Discussion on LayerSlider Responsive jQuery Slider Plugin

1348 comments found

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

I am trying to get an image to be a hyperlink as well. I’ve scanned the documentation and these comments, and am getting frustrated I can’t make it work. I’m not a coder, I’m sorry. I just need a simple example. Like ‘masterbeat’ above, I’m trying to make an image in a layer (even one of your examples) be a URL hyperlink.

I’m baffled that the support here just keeps saying “use common HTML ” and even above gives examples, but still no examples of this very common question.

Just a common example of exactly how to put an IMAGE on a layer and have it be an a href link to another URL . Could we get that? Would help so much of us out! Seems a common question on here.

The fact there is no example even when asked – is it not possible? Crossing fingers!

  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Bought between 100 and 499 items
  • Referred between 1000 and 1999 users
  • Has been a member for 2-3 years

Dear masterbeat & bergerkahn,

I replied / explained it in my last comment: you can add hyperlink to an image sublayer by the following:

     <a class="ls-s2" href="url">
          <img src="yourimage" alt="sometext" />
     </a>

In this case the anchor tag will be the sublayer, not the image. The image is inside the anchor tag, so you should add the “ls-s2” (3,4,5…) class to the anchor tag. You can position it by adding style=”left: xx; top: yy;” properties.

Here is an example of a layer with more sublayers (images and images with links):

<div class="ls-layer">
    <img class="ls-bg" src="gallery/l5.jpg" alt="backround" />
    <img id="earth" class="ls-s3" src="gallery/l51.jpg" alt="sublayer" />
    <a class="ls-s4" style="custom_style_if_you_want" href="link_to_an_url">
        <img src="gallery/l52.png" alt="image" />
    </a>
    <img class="ls-s6" src="gallery/l53.png" alt="sublayer" />
    <a class="ls-s8" style="custom_style_if_you_want" href="link_to_an_url">
        <img src="gallery/l54.png" alt="sublayer" />
    </a>
</div>

I hope this helps.

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

Thank you so much Kreatura! Sorry that it didn’t appear that easy in the first explanation. Trying it now and will let you know. Appreciate your great support and great plugin!

kreatura

Thank you!

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years

Hi Kreatura, thanks so much for answering the questions. The examples you gave bergerkahn above were more helpful to me than the first examples you gave – I’m sorry I couldn’t decipher the href/image tag from your first example, but the examples above helped. I’ve got the image URL link working now, but for some reason I cannot get that image to place properly ont he page with any top or left properties. No matter what I do, the image stays all the way to the left. I’ve tried both % and px.

Below is my code: <div id="layerslider" style="width: 100%;height:750px;"> <div class="ls-layer"> <img class="ls-bg" src="images/bg_b2b.jpg" alt="layer" /> <img class="ls-s6" src="images/b2b_moon.png" alt="sublayer" style="left:20%; durationin: 6000; easingin: easeOutQuart" /> <a class="ls-s2" href="http://www.masterbeat.com/event_basics.htm"> <img src="images/details_basics.png" alt="backtobasics" style="left: 300; top:100; durationin: 2000; easingin: easeOutExpo; slidedirection: bottom; delayin: 1000" /> </a> <img class="ls-s5" src="images/b2b_metal.jpg" alt="sublayer" style="left: 80%; durationin: 3000; easingin: easeOutExpo" /> <img class="ls-s4" src="images/b2b_boy.png" alt="sublayer" style="left: 80%; delayin: 1400; easingin: easeOutExpo" /> </div> You'll see on layer "ls-s2" is the one and only layer i need the image to be a link. the link works fine, but I can't get it to position. What am I doing wrong with the style? Using either % or px it won't move. Is it because my main bg layer is a 100% slide? This is to fill the entire background with a full width slide. You can take a look at the site and page itself in action at http://www.masterbeat.com/index_ls.htm Any help you could give on positioning that image link later woud be greatly appreciated.</div>
kreatura

Hi,

Properties left: 300; and top:100; won’t work, you have to use px or % at the end of the values, like:

left: 300px; top: 100px;

or

left: 50%; top: 20%;

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years

Hi, once again thank you for your quick response. Please do a view source on the page I referenced above (masterbeat.com/index_ls.htm) – I’ve actually tried both the % and px and neither has any effect. The image simply won’t move from it’s position in bottom left of screen.

The code I sent above was after I’d changed it for the 3rd time, but I have been trying the % and px. That’s why I was hoping you could take a look at the code around it or the actual implementation on the page to see if something else is wrong or if this is a bug. You’ll see the image will not move from bottom left no matter that style values I put. Is my style not getting read?

kreatura

I’m sorry I missed something: if you want to position a sublayer, you have to add left, and top properties to the sublayer itself, and not to the included image. So in this case the sublayer is not the image, but the a tag, so you have to add left: xx; and top: yy; to the a tag, and of course you have to add all other setting also the a tag:

<a class="ls-s2" style="left: 300px; top: 200px; durationin: 2000; easingin: easeOutExpo; slidedirection: bottom; delayin: 1000" href="http://www.masterbeat.com/event_basics.htm">
          <img src="images/details_basics.png" alt="backtobasics" />
     </a>
Default-user

That did the trick, THANK YOU ! Great support!

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years

Ok, that fixed it – final quesiton (I promise, I think!) LOL ! Now I have images working and positioning correctly, but final problem is I can’t get one of the images on top of the others. I’m confused on what controls the layer order – is it the LS # or the order it appears in code?

For example, in code below, I need the image details_btraining.png (on ls2) to be on top, but it’s appearing hidden below the boot (layer ls4). How do I move it to the top?

<div class="ls-layer" rel="slidedelay: 9000"> <img class="ls-bg" src="images/bg_basics.jpg" alt="layer" /> <a class="ls-s2" style="left: 300px; top: 200px; durationin: 2000; easingin: easeOutExpo; slidedirection: bottom; delayin: 1000" href="http://www.masterbeat.com/event_btraining.htm"> <img src="images/details_btraining.png" alt="backtobasics" /> </a> <img class="ls-s4" src="images/basics_boot.png" alt="sublayer" style="left:50%; durationin: 1800; easingin: easeOutQuad" /> <img class="ls-s5" src="images/basics_tag.png" alt="sublayer" style="left: 8%; durationin: 5600; slidedirection: top; easingin: easeOutQuad" /> <img class="ls-s6" src="images/basics_logo.png" alt="sublayer" style="left:80%; durationin: 3000; slidedirection: top; easingin: easeOutQuart; delayout: 12000" /> <img class="ls-s7" src="images/basics_abel.png" alt="sublayer" style="left: 50%; top 20%; slidedirection: top; delayin: 2000; delayout: 9000" /> </div>
kreatura

Simply cut & paste the image with ls-s2 class before the end tag of the Layer DIV . (You have to place that image as the last sublayer inside the Layer).

  • Bought between 50 and 99 items
  • Has been a member for 5-6 years
tiara Purchased

Hi,

I have purchased Layer slider and can you please help me to solve one issue.

Can I apply dissolve effect to background without moving it. I just want to have dissolve effect (like when its load first time) in each background and move only layers. (www.tosrilanka.com)

Best regards Samantha

kreatura

Hello tiara,

Unfortunately that’s not possible because of the structure of the slider, but I have another idea if you don’t mind.

It is possible to make fixed backgrounds. To do this, please follow these steps:

  1. Take the first Layer.
  2. Reset the background in Layer Properties.
  3. Add a New Sublayer to this Layer, the type of this layer should be img
  4. Reorder sublayers, Move this new sublayer to the first row.
  5. Click Save Changes.
  6. After the page is reloaded take the new sublayer which is the first of the list and add it your previous layer background. (Click the Image input and select your background-image).
  7. Set Left property to 50%
  8. Set P.Level to 0 (null)
  9. Save Changes

We are created a sublayer that is fixed (sublayers with P.Level 0 are not moving). You can repeat this steps on all Layers.

Please try this and let me now whether you like it.

Default-user
tiara Purchased

Dear kreatura,

Thank you for your reply. Is possible you to give ma ex code.

Below is the code I have created.

sublayer sublayer sublayer sublayer sublayer sublayer sublayer sublayer

My backgrounds are to-sri-lanka-001bg.jpg, to-sri-lanka-002bg.jpg, to-sri-lanka-001bg.jpg etc.

I appreciate your support very much.

regards

Samanta

Default-user
tiara Purchased
<!— sublayer sublayer sublayer sublayer sublayer sublayer sublayer sublayer —>
Default-user
tiara Purchased
/* sublayer sublayer sublayer sublayer sublayer sublayer sublayer sublayer */
kreatura

I’m sorry I thought that you purchased LayerSlider WP, now I see that you purchased the original version. Of course I will help you, please send us an email from this page (see the bottom box at the right side). I will send you the requested HTML code.

Regards, George

  • Bought between 50 and 99 items
  • Has been a member for 5-6 years
tiara Purchased
id=”layerslider” style=”width: 100%;”> sublayer sublayer sublayer sublayer sublayer sublayer sublayer sublayer
  • Bought between 50 and 99 items
  • Has been a member for 5-6 years
tiara Purchased

I can not post my codes. I ts not coming to this page.

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years
Vikab Purchased

A simple 5-image faded auto rewinding slideshow, can it be done? (Image1-Image2-Image3-Image4-Image5-Image1-Image2…)

If so, do You have any examples?

kreatura

Hi,

I’m sorry, but this is not a simple image-fader. LayerSlider is animating layers from 4 directions because of Parallax Effect. You can fade in / out sublayers but you cannot fade layers.

  • Bought between 10 and 49 items
  • Has been a member for 2-3 years

Hi, thanks for the plugin – nice work :) I’m trying to set up a slider with as 2/3 image, 1/3 caption text. I want the image to slide vertically, and the caption text to come in from the right. I want to try and keep the image and text separated, but what I’ve got happening at the moment is the transitions overlap each other. Is it possible to achieve what I’m trying to do?

This is my current code: <div class="ls-layer"> <img class="ls-s2" src="../gallery/l2.jpg" alt="layer" width="70%" style="slidedirection: top; slidedelay: 6000" /> <div class="ls-s1 caption" style="slidedirection: left; slidedelay: 6000"> <p class="ls-s3"> Hello.<br /> Some Text. </p> <p class="ls-s6"> Read more ›› </p> </div> </div>
kreatura

Hi,

Please send us an email with your website url.

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

Does this plugin easily support displaying a fullscreen slideshow?

kreatura

Hi,

Yes it supports. You have to add width: 100% and height: 100% to html, body, and the layerslider-container. Of course in this case it is recommended to use percentage values of top and left properties of sublayers.

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years
fparent Purchased

Hi, first of all thanks for the plugin, great job on this awesome slider!

I got a question: I created a fullscreen slider (height & width at 100%) and need my sublayers to always stay at the bottom of the screen. Hence the use of the “bottom” property for my absolute positioned elements like so:

<img class="ls-s10" src="../gallery/l29.png" width="100" height="100' style=" position:="" absolute="" bottom:="" alt="" />

However, the sublayers positionned like this doesn’t seem to be animating properly. I guess it’s because it needs a top offset… Do you see a way I could make it work? I hope my question is clear :)

kreatura

Hello,

I created an example. It’s a bit tricky but I think you will easily understand:

I created a full-sized (width: 100%; height: 100%;) sublayer DIV and I added the bottom positioned DIV INSIDE this sublayer.

You can see it here:

http://kreaturamedia.com/layerslider/fullscreen.php

  • Bought between 10 and 49 items
  • Has been a member for 4-5 years

Kreatura, I love your slider, but my project lead wants to go with another one because he says that yours doesn’t respond quickly enough when a person clicks on the thumbnail or prev/next buttons (ie, if it’s still animating the current slide, it waits til it’s done animating before accepting another click.) Any way this can be prevented? Thanks!

(PS, here’s a pretty awesome (IMHO) example from our company: andersonpress.com/; especially the last few slides…)

kreatura

Hi,

LayerSlider respond quickly I think – you have to waint only for the layer animation but you can click next / prev before all sublayers are animating into their positions.

Default-user

Thank you. I agree, mostly, but I see that it would be nice if the moment a user clicked on a thumbnail or prev/next button, it shot to the chosen slide instead of waiting til the animation finished. Still, this is my favorite slider out there.

kreatura

I think I can modify the plugin with adding .stop() functions into the right functions :)

  • Bought between 10 and 49 items
  • Has been a member for 4-5 years

you’re awesome!

kreatura

Thanx! :)

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

Hey Kreature,

Love this script. Have bought the extended license – have a question I’d like to ask, but would rather do it over email; would that be possible?

aj[at]putitout.co.uk

Thanks!

kreatura

Hello,

Please send us an email from this page (see the bottom box at the right side).

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

How could I use custom thumbnails for each slide? Would this be done with a custom skin? Are there examples of this type of implementation?

kreatura

Hello,

LayerSlider is not generating thumbnails from slides (beacuse you can use not onlay images as sublayers), so you hvae to do this manually. If you have your thumbnails, you can add them a click function to change the requested slide (see LayerSlider API for more information).

Default-user

Thanks for your reply, worked like a charm. Yes a little manual, but works! Great product by the way.

  • Bought between 100 and 499 items
  • Europe
  • Has been a member for 4-5 years
Grphoto Purchased

Great work, one question, i have some product that need to show from left to right, can i change the generally direction of slider from left to right?

kreatura

Hello,

Yes, you can change slideDirection (global or per-slide). You can read more about this in the documentation.

Default-user
Grphoto Purchased

Thank you, yes i found it.

  • Bought between 1 and 9 items
  • Has been a member for 2-3 years

Hey there. Looking at buying this (or the WP version) but thought I’d ask you which you through was best.

We will be using wordpress and want to make this basically be the homepage. Will the wordpress version work with 100% widths? or would we be better of using the standalone and writing our loops into the markup?

kreatura

Hi,

I think the standalone is better choice, but with the WordPress version you also get the standalone :) So maybe you can try if you want. We added a responsive option into wordpress version, but this can be little buggy with some wp themes because of wp theme limitations.

  • Bought between 10 and 49 items
  • Has been a member for 4-5 years

Does this allow you to animate the same item between frames/slides? For example, circle slides in first frame. On the second frame, it enlarges, but stays in its current position.

Does it also allow any item to do 2 separate animations in a transition, even if it is done with some sort of custom jquery/hook? Example, on transition out, rectangle first rotates 90 degrees, and then when complete, moves up out of frame.

I am debating whether we can use this script, or if it needs to be custom jQuery programming.

kreatura

Hello,

I’m sorry, but Layerslider doesn’t support these functions.

by
by
by
by
by
by