Release: [jQuery Plugin] Slideshow Lite
August 4th, 2009
Posted by Fred Wu
Latest release: v0.5.3
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
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.