ABOUT
The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. I needed something like that for jQuery. Since i didnt find it after a small research i decided to build it by my self.
HOW TO USE
It is very easy. First include the jQuery library then include the s3Slider javascript in the head of the page(s) where you want to use s3Slider.
jQuery can be download from jQuery`s homepage.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
Important: For the script to work properly there is a set of rules that must be followed.
HTML
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
Explanation
If you set that main div id is s3slider as we did here, that is the name that must be prefix for all other classes and id`s for that specific gallery (slide show). For example, if you set an id for main div as your_name, the inner id must be your_nameContent and the class .your_nameImage like in example above.
The second thing is that every .your_nameImage element in it self must have span. Also, the last div with class clear must also have an class of image holder in this case .your_nameImage. if you dont put that, the last image will NOT be shown in the slide show.
CSS
#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.clear {
clear: both;
}
Then you need to initalize s3Slider and set the duration of how long will one picture be shown on the page (value is in miliseconds).
JS
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
Take a look at the live example.
COPYRIGHT
This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones.
BROWSER SUPPORT
This plugin has been tested and is known to work in the following browsers:
- Firefox 2.x (Win)
- Firefox 3.0.3 (Win/Linux/Mac)
- Opera 9.6 (Win/Linux)
- Safari 3.0.3 (Win/Mac)
- Internet Explorer 6 (Win)
- Internet Explorer 7 (Win)
- Google Chrome (Win)
DOWNLOAD
Full version (with examples) (size: 574kb)
Uncompressed version (size: 4.12kb)
Compressed version (size: 1.66kb)
Submit
Comments
Ivalex said
Ejjj, super je ovo,
Def ide u bookmarks. Uz malo customizacije moze da izgleda super ;)
Ivan Aleksic said
Brao macane :)
Boban Karišik said
Hvala, hvala... :)
Igor Milankovic said
Odlicno izgleda, svaka cast ;)
Marjanovic Boban said
Swaka ti dala ime :)
Vuk Nikolic said
Vrlo korisno. Hvala :)
Andrija Markovic said
Bas lepo i lako za primeniti, hvala! Stumbled.
kamal said
Wowwwwwwwwww, thanks for sharing.
Iva said
I meni se dopada, i drago mi je da postoji i kao WP plugin!
Tasarım said
Very nice thank you for this plugin
Sale said
Ma ludilo, bacam odma na svoj sajt :)
Hvala.
Marc-Andre Menard said
I REAALY like your slider, but i like to have/use a lighter version... same effect but get text (simgle line) from title tag... is it possible ?
Boban Karišik said
Yes it is.. You just remove the title text from html, so if you want only one line of text, wrote just one line, if you want more lines, wrote more lines..
touhami said
je veut juste vous dire que vous me sauver la vie merci beaucoup , respect.
Bandito (aka Dule) said
Hvala prikane, ovo vrijedi :)
Davi Ferreira said
Awesome plugin, thanks :)
Goran Jurić said
Odličan posao!
Faisal Basra said
Really awesome, great job.
Deny Sri Supriyono said
cooool!
one question, is there a way so we can have a loading animation for a big size image — so, the slideshow will wait until the image loaded before loading the next frame?
thanks for sharing, Boban!
Colin Scroggins said
Very nice plugin. I have noticed several anomalies in the downloadable examples that do not exist in your online demonstration page. 1) CSS image border need to be none. 2) There is overlap of the text in the right layer if viewed in Firefox.
Paulo Sacramento said
Thank you so much!
Great plugin! :D
oceangray said
good works..
rsturk said
Thanks for sharing. This looks like a great widget!
:)
Eric said
nice but what happens if I have 200 photos to show ??? it could be too long to load !
Evert said
Looking good!!
Soranna said
You are so kind to give an idea how to implement next, prev and play/pause button?
publicidad en internet said
nice plugin, thanks for your work.
Fernando said
Very, very nice. Congratulation!
sinan said
thank you.best sharing.
Vinnie said
is it too hard to make the script to scan a directory for images?
Stanley said
Good job! And once again thank! Keep it up.
Douglas Wilson said
Why would you offer your packages in rar format? Most projects go for a free format like tar.gz or in zip format.
jess said
great script, modularizing code is great for everyone, do you plan on adding to the plug in, say previous/next/pause functionality, or a thumbnail strip to navigate the gallery?
Matt Haworth said
Nice.
Some way of navigating the slides such as a thumbnail strip would be a great addition to this.
Nagaraj Hubli said
this is super! thx a lot
Matt said
You rock man!! have been waiting for something like this woopw woop woop
keith said
Colin Scroggins ..
Just set the border to ZERO on the href of any links and set the margin and padding to ZERO on the UL in the CSS.. that will fix any alignment issues... Very niceh plgin
miba said
Super
Lucian Lature said
Perfect for what I was looking for. Very good job!...
Mr.Proxy said
this is what I was looking for a long time. Great job! Thanks...
Queli Coto said
very nice!!!
Boban Karišik said
Hello all, and thanks for comments.
@Deny Sri Supriyono: at this point no, i didn`t make this plugin for something like that, i`ve build it for the specific use, for the website i`m developing at the moment.
@Colin Scroggins: thanks, i`ll look at it and fix it.
@Eric: this is a for a small slideshow use, not for web gallery, anyway, if you have 200 images on your web site it will load slow in any case. ;)
@Vinnie: no, but it would have to use some server side language..
@jess: never thought about it, maybe in version 2.
mehdi said
thank you
how put next and preview button
hcabbos said
Very sweet. Too bad it doesn't degrade with Javascript off. It should show the contents of the ul if JS is off.
冯熠熠 said
nice work,
like flash
tony said
very sweet.
tony said
can we put next and preview button.
thanks.
bilard said
Nicely done script. Keep up the good work! thanks
olcay bal said
veryy good
Boban Karišik said
@tony: current version does`nt support that, so it can not be done without any modification of script, but you can contact me over the email or skype (witch you can find on my web site) and i can do that for you...
Angelo said
excelente!
Nathan said
Awesome script mate.
For Firefox, you need to set the UL padding to 0 to fix the CSS position.
#slider1Content { padding: 0px; }
rahul said
nice work
erwan said
nice !! what about next and prev buttons ?
İzak Hason said
Good job! And once again thank! Keep it up. thanks thanks..
Maicon - Brazil said
Fantastic work.
Zoonex said
Very very nice. Just too bad it doesn't validate :(
Simon said
Excellent effect.
I really think thats very professional.
but it is flickering on my website. It loads the tag, dissapers and then it moves in place normally.
Any ideas ?
Boban Karišik said
@Zoonex : Can you explain that?
@Simon : Please send me you link, and i will take a look. Thanks.
Tarih Online said
Nice work.Thank you...
Mirko said
Jako dobro, svakacast.
Eduardo Romero said
Impresionante! MUY BUEN TRABAJO!
benp said
*very* nice! Just wondering: is there a way to have the <span> text always visible? Like, it would fade in and fade out with the picture?
Keep up the good work! :-)
Frank said
There is a problem. The picture has diferente size in Explorer and Firefox. When you show two pictures together, Explorer good but Firefox is smaller.
Gabriel Rodriguez said
Boban, I gotta say this is one of the best scripts I've ever seen. I was looking for something like this and you nailed it very nicely.
Congratulations, really excellent work. I hope to see more versions with even more features. Thanks for a great script you share with us.
policr0matico said
very very nice, thanks!
Mike Meisner said
Dude, sick plugin. Nice work; thanks for bringing this to jQuery.
Kim Steinhaug said
Great work, production look without a doubt! However, thumbnails and previous next buttons and you will be hailed as a king! I do understand you buildt this for your own project, and that it works perfect for this... However, we all want it... We all want it to fit our personal greedy purposes, :D
Hassan Ali said
very nice work. i agree wit Kim Steinhaug on having the thumbnails withe previous next, something like http://www.frontpageslideshow.net
looking forward for this to become a plugin everyone craves for, of course with thumbnails and prev next features. good luck!
ben0x said
Very nice, thanks :D.
Jim said
Hi there. Excellent script.
We've deployed the script using Includes and iFrames, instead of inserting the content directly in the page.
The slider looks fine in Firefox, but in IE (6), the images don't transition smoothly.
.
Please see growth trac dot com
Any ideas? Thanks.
Boban Karišik said
Yes, try to declare the doc type to xhtml transitional...
Jim said
Boban, thank you.
Something like this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Jim said
Okay, that did it. Thank you.
Is it good practice to include that statement throughout our site (on all pages)?
Jim
Ricardo Zea said
Very, very nice script... but a fatal flaw is the invalid CSS:
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
Rubén Casalta said
wow
very nice and useful!!
barren said
nice effect, I'll use it for sure :)
Hassan Ali said
excellent one. i've already used it. i did some basic js tweak to make it look like frontpageslideshow.net but now i'm stuck with something and would need help. on the right side i want the thumbnails to be clickable (simple thing) but after click i want to know how do i adjust the slide sequence so that the slide sequence continues from the click. please see this http://220.227.247.121/qats-new/index.aspx
pleeeeeeeeeeease gimme some inputs.
hcabbos said
Hassan, that looks sweet! Great job.
Boban Karišik said
@Hassan Ali: you have an email ;)
MotoChristo said
absolutely amazing! Cooler than the mooltools one even IMHO
DeAndre Johnson said
Nice script!!!! Is there a way to add pager(thumbnails for each slide)?
Philip Truax said
Boban,
Thank you very much for your time and patience in putting together this incredibly valuable plugin. It was exactly what I was looking for an shows so much class with a variety of applications. I hope you continue to maske great plugins and wish you great success thoughout your career and the best in all things to come. ps. I don't want any crazy navigation buttons, that's why I liek this so much :)
jQuery Lover said
Great script, great jquery plugin.
Amazingly simple and elegant.
Thanks for this.
inclitus said
don´t go in ie6 and ie7 but, it´s ok in Firefox, why???
Anthony Meluso said
Couldn't you just clear with another li instead of a div? Something like this <li class="clear s3sliderImage"></li>. That worked for me in every browser including IE 6 and its valid CSS.
Anthony Meluso said
Ok so I forgot my code will render here. What I was trying to say is < li class="clear s3sliderImage ></li>
Barock said
i had search for it for a long time ago, Thanks
Mario said
great script -- thanks for sharing this with all of us.
Rijalul Fikri said
Wow, great script. Thx's for sharing this. I could use this to develop a wordpress theme easier.
Chris said
Great script. I think the premise is excellent, it just needs a bit more tweaking to get it to validate and display the same on all browsers. Also, it needs to degrade if the end user has JS off. V2 (if you release it) can easily fix all these minor issues.
Erika said
Now, I think this script is really on it's way to being something awesome, but in this era I think it is a basic fundamental that your product should validate. The clearing div within the UL tags yet outside of the LI tags causes the XHTML to invalidate. Not only that, but using the "span" tags for the text within the li tags limits the choices of some of what tags can be used within it. I like the script and although I know how to change some of these things on my own, I thought I'd offer a little but of constructive criticism to help you make your product more popular. Best of luck. :)
Chumbi said
All is right, smooth, almost perfect, but the sizes when it's viewed on internet explorer 7 and firefox 3 change... almost 20 px of diference, you can check it on your own examples.
Amazing script, but still not perfect ;-)
Amazing
fernando R. said
Thanks !
valeu cara! Muito bacana
mg-brasil
Ben said
Thanks a lot for this awesome plugin! This was so easy to implement and customize... Great great work Boban.
roxx said
Excellent plugin but the slider didnt came up in my site. IE7 sometimes shows the slider, FF 3.0.5 shows the slider never.
please help.
roxx said
wow, thats because of my javascript to making rounded corners breaking the slider.
currently fixed..
Scott said
Is there a way to have a smoother fade transition - so the image fading out doesn't completely fade out before the next image fades in?
Dexter said
Looking for something like what you have developed but with a sequence of frame points to go directly to a certain frame and a pause button would be nice.
An example of what I am talking about can be seen on http://www.lonelyplanet.com/
I also like the version on http://www.trekbikes.com/us/en/ that uses a rollover effect to engage the text layer.
Not sure you are working on any version that has any of these features.