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
Michael Grosser, the Blog 
[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!
Oh, I should have mentioned I used a total of 4 images.
..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? 😉
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.
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).
This looks like a very sleek slider. Always looking for something fresh, and if it is also small on top of that, then so much better.
Thanks, the actual goal was not to make it small but understandable/simple, smallness is only a side-effect 😉
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
do you mean it works when no filter css is applied (what filter-css?) or it does not work either way ?
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…
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!
can you fork my repo and apply these changes, id love to see what you did!
i may have done it wrong, but here’s what i got to work for me: http://github.com/mcritchlow/s3_slider/forkqueue
also, if I kept your display:block on the first child, i add the opacity filter in the css so the first slide has the correct opacity.
I updated it, now opacity and fading works perfectly on IEs, thanks Matt 🙂
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!
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.
😦
Correction to last comment: IE 7 (not IE 6) and FF 3.
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)
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.
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?
works for me so far, can you try to download the example and see if it runs standalone ?
your demo works well!!!!
But i’ve finally found the bug, I use an old version of jquery 😦 with the last slider…
Thanks.
which version was it ? id like to keep the slider backwards compatible if possible/feasible
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?
hmm im not doing anything weird afaik, so id suspect its a jquery bug, ill have a look at it…
Just wanted to say thanks for this! Saved me some time fixing s3slider!
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
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
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.
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.
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)
Thanks for sharing. your version of s3slider works seamless with jquery 1.3.2.
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
yes it is, its also documented afaik, the trick is to change the css to be visible by default (if i remember correctly)
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
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
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
there you go, hope its what you expected http://gist.github.com/567412 🙂
Hello! Great Work!
What would I have to do if I want the textbox to fade too, instead of slide?
Thanks
get in there and hack it, the code isnt that hard to understand I hope 😀
sorry, i dont understand much of coding besides html. i’ll give another try. thanks.