Release: [jQuery Plugin] Slideshow Lite
Posted by Fred Wu
Latest release: v0.5.3
Please check for the latest version on Github!
A few days ago I was asked to make a simple slideshow. My initial thought was, there must be a ton of solutions available for jQuery. I could easily draw inspiration from them.
I was wrong. Whilst there are a few nicely done slideshow plugins for jQuery, the majority of them are either poorly written or far too complicated.
So, I decided to code my own plugin from the ground up. Meet Slideshow Lite!
The plugin is only tested with jQuery 1.3, but it should also work on jQuery 1.2.
Features
- Unobtrusive JavaScript, simply load it and that’s it
- Clean, semantic HTML structure
- Easy to use
- Customisable
- Free to use or to modify (GPL/MIT dual license)!
Plugin Options
- pauseSeconds (float) – number of seconds between each photo to be displayed
- fadeSpeed (float) – number of seconds for the fading transition, the value should not exceed ‘pauseSeconds’
- width (integer) – width of the slideshow, in pixels
- height (integer) – height of the slideshow, in pixels
- caption (boolean) – display photo caption?
- cssClass (string) – name of the CSS class, defaults to ‘slideshowlite’
Usage
$(document).ready(function(){
// with default options
$("#slideshow").slideshow();
// with custom options
$("#slideshow2").slideshow({
pauseSeconds: 4,
height: 200
});
});
Please checkout the demo for the HTML required.
Demo
Download / Source Code
Please check for the latest version on Github!
Changelog
v0.5.3 [2009-09-24]
- Added ‘fadeSpeed’ for setting the transition speed.
v0.5.2 [2009-09-06]
- Repackaged to remove an unnecessary .htaccess file.
v0.5.1 [2009-08-30]
- Fixed some typo.
v0.5 [2009-08-29]
- Major rewrite: slides can now be clicked freely (as opposed to waiting for one to finish showing before it can be clicked again).
- Added automatic photo caption.
v0.4 [2009-08-05]
- Code clean up.
- Added transparency effects to the navigation, to indicate when it is clickable.
- Added inline configuration documentation.
v0.3 [2009-08-04]
- Smoother animation.
v0.2 [2009-08-04]
- Fixed a navigation bug where the clicks no longer work after clicking on the current slideshow.
v0.1 [2009-08-04]
- Initial release.
demo有些问题，比如，点了2，再点7，8，没有反应的样子。再点别的又好了，再点又不行了，不太稳定。不知道沧蓝有木碰到这问题。。
这个是已知的问题，当一个图片转换了以后，才能点击其他图片，防止slideshow重复运行。
未来版本我会解决这一问题。
回的真快。除了上面的问题以外，用起来确实很方便，图片列表那儿写法也很简单，嘿嘿。
Hi, i am using your slide show function in our company’s website. Your newest log said that you added a function to indicate the buttons when they are clickable. However, i want the digit buttons are able to be clicked anytime. At this moment, If i clicked “2″, i have to wait for the slide to change and then i can click the other digits. Can you let me know how i can disable this function. I am sorry about this because i am a newer to the JQ. Thank you
@Francis: This feature is not currently available, but is planned for a future release.
请问能不能在图片上加上文字？
@pidan: 暂时不行，不过我会考虑在未来版本中添加此功能。
Version 0.5 is released! :)
Nice work Fred !
How can I easily turn off the ‘numbered boxes’ ?
I can probably add a switch in a future release, but for now, if you want to disable the pagination, simply add ‘display: none;’ to ‘.slideshowlite ul’ in your CSS file.
This thing’s really hot but it just won’t work in my home Apache server installation (WAMP5) and not on my webhosting server either. If I attempt to open the index file directly from my hard drive, it loads the script normally and runs the slideshow. If I open the page from either server, it looks like a flash-of-unstyled-content… See for yourself! http://miniagencia.com.br/estudos/slideshow/ — any help appreciated ;)
Under the ‘js’ directory there is a hidden ‘.htaccess’ file, delete that file and it will work fine. Alternatively, I have repackaged the files (v0.5.2), you can download it again. :-)
Oh boy, that did it! But wait, wasn’t that .htaccess supposed to *stay* there?
We’re selecting a slideshow script like this for our website. Right now I’m stick with Slideshow Lite and also testing EasySlider. Since they display different effects it’ll be pretty much a matter of taste for the guys at the office, I’ll post a link here if we end up using Slideshow Lite, I think you’ll like the result.
Umm. By “stick with” I meant “sticking to” and not “stuck with” by the way. :)
I really found this script to be ultra useful.
I’m glad you find the script useful Rafael. And no the .htacccess file was included by mistake. :)
Hi, Thanks alot
But I need put swf file not image!
so I use , not use
what I do?
Thank you so much
Oh sorry! some tags is disappear!
this my msg with change in tags:
————————————
Hi, Thanks alot
But I need put swf file not image!
so I use , not use
what I do?
Thank you so much
I am so so sorry!
Oh sorry! some tags is disappear!
this my msg with change in tags:
————————————
Hi, Thanks alot
But I need put swf file not image!
so I use [ embed ], not use [ img ]
what I do?
Thank you so much
Flash content is not supported at the moment, but I’d be happy to look into this. :-)
No, I just say this idea
Thanks alot
but make this in your mind if you need upgrade your code!
Good luck
Hi Fred, many thanks for this script and all your hard work – it really is excellent esp for people new to web development. Have a strange glitch in Fire Fox – have turned off the pagination and the captioning and a strange number “2″ appears in the top right hand corner of the image. Weird Huh – doesn’t occur in Safari either. Yet to test on IE. Any ideas?
How did you turn off the pagination and the caption? Or, could you provide a link to your slideshow page?
IE8下按钮好像不会切换
Hi Fred,
some links to the demo page of your plugin are broken.
JQuery-Homepage -> your DemoSite
your site ( below the scriptexample) -> your demo page
Thanks for the nice plugin,
Carsten
@sky: 等有时间后我会在IE8下进行测试。
@Caddy: Nice catch! The demo links are now fixed. Thanks. :)
Thanks a ton for this. Very cool slider.
Hi,
Im currently using your scipt on one of my web sites. Is there anyway that we can slow the transition time from one image to another?
Plugin updated to 0.5.3, you can now set the ‘fadeSpeed’ parameter for the transition speed. :-)
Hi guys
i have use this slideshow.its amazing and thankyou
and now i just needed to add play and pause button to this slideshow is there any eazy way to do it
pls regard this
thank you
roshan!
Hi Roshan,
There is no immediately plans to implement play/pause feature, but you’re welcome to contribute.
Have a look at ‘clearTimeout()’: http://www.w3schools.com/js/js_timing.asp
Hi.
I’m really interested in your slideshow lite gallery as most other galleries out there seem to be rather cluttered and over the top; yours is very clean and simple which is great. I want to put the slideshow into a div in my website (that’s currently under construction). However, I’m rather new to all this stuff. I’ve been working through trying to understand CSS and the like. Is there an easy way you can explain how to get your plugin working within a div? Basically, for me, the div (which currently just has a single image in it) has an id tag set in the CSS which positions it correctly. If I have ‘slideshow’ as the id, where do I put all the CSS styles for that new id?
I’m sure this is probably a stupid question… I’m sorry! But any pointers would be really gratefully received!
Edward
@Edward: Slideshow Lite needs its own div container, in your case you can simply make a another div that wraps around the slideshow div. Or, you can simply target your div ID in the JavaScript, i.e. $(“#your-div-id”).slideshow();
Hello
Absolutely love this slider.
I was wondering of there is a way to make the caption text appear opaque at the moment its see thru the same amount as the background box.
thanks
@jacob, I might add an option later, but for now, you can simply comment out line 88 and line 89:
pagination.fadeTo(0, 0.8);caption.fadeTo(0, 0.6);
:-)
IE8下按钮好像还是不会切换
还有提个意见，切换动作最好等全部幻灯图片载入后才执行
现在这样没等全部图片载入好就切换，有的图片都显示不了
Hi,
is it possible to disable the 1 – 2 – 3 – 4 options in the bottom of the image?
thanx
Yes, set the ‘caption’ option to
false.Great slideshow.
Just wondering if why it always opens in a new window/tab when you click on the image, anyway to turn it off?
Any plans to include image pre-loading, for startup speed?
蛮好。这样的插件正在找，希望还能再完善：比如再增加其他样式的..嘿嘿！
Hello! Thank you for the plugin! I just have a problem – how I could remove page numbers’ opacity? Their background is too transparent :(.
Hi I was wondering if there is an easy way to have the slideshow pause when moused over or perhaps only play through once.
Thanks
Hello, working on a site for a non-profit, where I use this slideshow… I love it and works amazing in firefox and safari, my only concern/question, is that it is not displaying correctly in Internet Explorer… here is the link
http://www.pbpioneers.com/NEW/index.html
What am I doing wrong here?
Thanks
Love this script!
Does anyone know of a way to override IE’s pesky ActiveX Controls blockage?
Just a quick question… How do you make the slideshow swing or slide to the left, instead of a cross dissolve?
Tyler
I’d like to direct this inquiry to Fred Wu or anyone else that might have some input.
This Slideshow Lite looks very good — I haven’t tried using it yet, but it’s close to another style slideshow, or light box, that I like very much. The one I’m referring to is in use on http://www.forbes.com in the upper left corner.
Is this one basically the same as Slideshow Lite? What might I have to do differently or change in Slideshow Lite to get the same effect as the one on the Forbes site?
Please advise when possible.
Thanks, Vinnie.
Very nice slide show! I have a request. Is there a way to add different kinds of transitions other than the standard fade? For instance, one of my customers wants a way to replace the fade transition with one where it appears as if the current photo is being “peeled away” to show the next photo beneath it. A “curl” on the corner of the photo that peels away the top photo diagonally would be perfect.
好像不支持最新的 Jquery 1.4.4
It counld not work in Jquery 1.4.4
@ajings, are you using the latest version from Github? https://github.com/fredwu/jquery-slideshow-lite/commits/master
I’m using it with jQuery 1.4.4 and it works fine. What sort of issues did you run into?
此插件有好多问题啊，有点就是写的让人看的很清楚，自己也可以加以改动，等到我按照自己的需求全部改完后发现。。。悲剧产生了。。。IE8下数字不走。。。请作者赶紧出第二版啊，急用啊！！！
还有一个问题补充一下，希望作者出下一个版本的时候，点击按钮也同样有淡入淡出的效果(正倒序都有)，本人按照作者的代码稍微进行改动，正序点击的时候有了淡入淡出效果了，但是倒序点击就没有任何效果，再经过费脑筋后倒序点击勉强有了效果，但是跟正序有点不太一样啊(my god~囧)。还有一个小小要求就是：鼠标移到图片上面的时候不让自动切换图片。最好设计成能自己在参数那边能控制这个情况下自动走还是不走。希望作者快去接着做呀，谢谢你拉，真急用！
Hello- Is there a way to make the slide show appear just on the home page without showing on the rest of the pages? Thank you.
我想问一下，如果我想鼠标移动的时候切换怎么办？
請問 黑框線條可以去掉?
謝謝
Hello- Is there a way to make the slide show appear just on the home page without showing on the rest of the pages? Thank you.
Great slider! So simple I love it.
One question. I’m trying to add a line break in the caption so I can have a caption title. Line break and the utf line break doesn’t work at all with the alt tag so I changed it to title – works on the hover but not in the caption. Changed to name so it shouldn’t be tied to any standards – same result. Is there a simple way to either add a line break or use another attribute to add a header? I’m terrible with js! OH! also, over time the pix speed up and the titles all come in at once.