jQuery Plugin: A 1kb Simple Slider for Images + Description

I recently set out to find a good slideshow for our homepage, but most of them are monsters, with 20kb code, no thanks…
The simples/best solution i found was the s3Slider somewhat simple and looks good.

But after it started behaving silly (sliding to fast/slow, hanging on mouseover) I decided to fix it and discovered a pile of spaghetti. So here is my s3_slider rewrite download that is smaller(now ~1kb) / simpler / maintainable and more easy to setup! Demo of the new version

42 thoughts on “jQuery Plugin: A 1kb Simple Slider for Images + Description

  1. [FIXED]
    Hi! Thank you very much for spending the time to remake this great little slider. However, I’ve just finished setting up your version, and the rotation cycle seems odd, it goes like this: photo 1, photo 2, photo 4, 2, 4, 2, 4 and so on. Everything else is working fine. The images are named “slide-#.jpg”, I’m using jquery-1.3.1.min and s3-slider.min.js. It would also be nice to start the sliding with a fade-in, or at least showing the label with an animation. Thanks!

  2. ..and with further page reloads, it can also loop in a photo 1, 3 secuence. You don’t happen to have a bug tacker for this project yet, do you? 😉

  3. ups, i fixed that, this was a bug with mouseover calling multiple slidings, thanks for the tip!

    Making a fade-in transition at the start would not make sense for me,because I load the page and users should see an image and not a blank spot, then javascript is loaded and the sliding starts. Therefore first showing an then hiding the image would cause flickering.

  4. I fixed the start-slide problem while refactoring, if you want to start with a fade from blank to image0, just hide the first slide(display:none).

  5. sorry for the reposted comment, but it makes more sense here:

    Hi,

    I’m having an issue with your version of the s3Slider. In IE(7 and 8), only the first image shows the opacity correctly(after i added in the filter css attribute), then every image after that is full opacity. The example you reference on github has the same problem. The old plugin seemed to deal with this but is a mess to look through. Do you have any solutions to this? Thanks,

    Matt

  6. doesn’t work either way. in the last few minutes I’ve been experimenting and took out the filter css and did a jquery browser check for ie. If it’s IE, instead of using fadeIn(I’m testing fadeOut now) I set the span’s opacity to 0 using jQuery’s css() then .show().fadeTo() instead of fadeIn(). This seems to do the trick, although it feels a bit hacky…

  7. Did the same thing for fadeOut, and it seems to work great now on FF, Safari, and IE 7 and 8. For my own purposes, I exposed an opacity parameter from your plugin also to pass in for the IE issue. If you’re interested in what I have please email me. And thanks for all your hard work on this plugin!

  8. Awesome! I’ve been using the original s3Slider, but it has problems in IE 7 – it wants to load ALL the images before starting the slideshow. Yours works perfectly! Thanks!

  9. Well, I spoke too soon. I found a few problems compared to the original s3slider.
    1)..If I don’t include a span (don’t want to show ANY text), the slideshow hangs.
    2)..If I use an empty span of text, it still shows a black box in the corner – VERY distracting!
    3)..Changing the timeout and delay makes no difference – in IE 6 nor FF 3.

    😦

  10. as far as I know empty spans did not work in the original either, but I fixed them 😉
    (i think timeout did work, but it was spelled incorrectly in the demo timeOut -> timeout, please check if this solves the issue)

  11. Thanks! Now that these issues are resolved, I’ll consider yours over the original on my next project.
    On the original version, I could use an empty span with a class of “none” and it wouldn’t show the box. On yours, it still showed a small box. This is why I had to revert back to the original version until these issues were resolved with your version. Thanks – look forward to trying your latest version.

  12. hi!
    thanks for your script, it works perfectly in FF but got a “Stack Overflow at line = xxx” in ie 6/7, I’m not really good at javascript so please can you help me?

  13. your demo works well!!!!
    But i’ve finally found the bug, I use an old version of jquery 😦 with the last slider…
    Thanks.

  14. Hi,

    Nice work on the s3-slider. 🙂

    I am getting a stack overflow/out of memory error with your script whilst using JQuery 1.3.2 on IE7/8 (probably 6 too, but not tested that).

    I am calling the slideshow in an external htm file using http://flowplayer.org/tools/demos/tabs/ajax.html

    If I stop using the tabs, and load your s3-slider inside of the main htm file, or change JQuery to 1.3.1 the problem goes away.

    Any ideas?

  15. Thanks for cleaning this up, working great for me.
    One question
    For the first image in my sequence I have a swf (intro) animation. Currently the s3slider doesn’t wait for my swf to load before transitioning to the next image. Is there a way to hold on swf file (like the mouseover var) while it loads and after it loads execute the fadetime var?

    • Hello Brian, how are you?

      I was wondering if you can let me know how you inserted the swf animation for your first image.

      Thanks

      Michael

  16. a simple solution could be to set the fadetime higher if the image is “.swf”, or set the initial fadetime high and then set it to a lower value later on

  17. I love this plug in. You made it very simple to follow and understand. The only problem I am having is that I would like to have the first image transition in the text. For me it shows up right away with the image. I’ve tested in firefox and internet explorer with the same conclusion. Other than that, it works awesome. The only other suggestion would be a way to not have the images stop when you hove over them. Thanks again.

  18. I figured out the first part. I changed the part of the s3slider file from false to true as below:

    //Track mouseover
    $slider.mouseover(function() {
    mouseOver = false;
    });

    That makes it still rotate even if the mouse is over the image.

    I hope I did that right.

  19. yes, this should work. Do you mean that first the image should appear, and then the text? This would be a bit harder, youd need to fadeIn the image and then the text (atm the item is faded in, which contains image and text)

  20. This is great, much better than the original s3slider. However instead of fading to blank before fading into the new slide would it be possible to fade directly into the new slide without having to suffer a period of there not being any image?

    Much appreciated.

    Jon

  21. Hello,
    First off this s3slider is so great and much easier to understand for a jquery noob like me.
    However, I’d like to build a little upon it, I’d like to add little preview images underneath the slider so that once your mouse is over some image that image will at that moment appear on the slider and the slider will temporarily stop (until mouse leaves images space after which it should resume, not necessarily from the shown image, but at least with the same speed as before).
    I’ve tried the following to no avail:
    – I’ve added outside the < div class=”slider” > multiple image tags like so
    < img class=”btn” src=”demo/1.jpg” alt=”0″ / >
    < img class=”btn” src=”demo/2.jpg” alt=”1″ / >
    < img class=”btn” src=”demo/3.jpg” alt=”2″ / >
    etc. (for each jpg in the slider there’s an image with alt property equal to index in slider).
    – I’ve added a jquery variable in the code that gets all image tags like so
    var button = $(this).parent().find(“.btn”);
    – And I’ve added two event handlers for the mouseenter/over and mouseleave/out events on the image tags now selected inside $(button) object like so

    $(button).mouseover(function() {
    current = $(this).attr(‘alt’);
    item = $(items[current]);
    span = $(‘span’, item);

    fadeIn(item,span);

    mouseOver = true;
    });

    $(button).mouseout(function() {
    mouseOver = false;
    });

    Unfortunately, this doesn’t work, as I have artifacts such as preview images not responding always, slider getting stuck and speed of resumed sliding being much faster than originally.

    Please help! Any help would be much appreciated, and I will be quite grateful. TIA

  22. Hmm.. from the description of it I cannot understand/fix the problem,
    if you post a simple demo of what you are trying (e.g. single html file via gist.github.com) ill have a closer look

  23. Sure…I’ve just placed the modified demo (so you can try see it live immediately) index page to the website in my signature and placed the gist of it on gist (git://gist.github.com/567032.git)…if you see anything please let me know (I just noticed that in IE7 on mouse over the img or now even an anchor tag there’s an error “Object doesn’t support this action”…I’m looking this up now…but could still use help).
    Thank you in advance.
    P.S. I apologize for having posted so many comments on your blog, I didn’t see them at first, not having confirmed my wordpress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s