(a) Slideshow - jQuery plugin for organizing slide shows

I decided to practice writing jQuery plugins, and now I offer to the public my first plugin ...


This plugin allows you to organize a mini-presentation of any DOM elements, it is easy to use and may well be useful to you. Well, from words to deeds.

First we need the content for our slide show. Any tags <p>, <img>, <div> etc will do for us:
')

1. < div id = "MySlideshow" > <! - the wrapper of our slideshow ->
2. < p > Some text ... on slide one < / p >
3. < img src = "img / image_0.jpg" alt = "It's slide number two" / >
4. < img src = "img / image_1.jpg" alt = "It's slide number three" / >
5. < p > < label > Title < / label > Some text ... on slide four < / p >
6. < img src = "img / image_2.jpg" alt = "It's slide number five" / >
7. < / div >

Now connect the javascript (jquery and plugin) and the stylesheet:

1. < link href = "js / jquery.aslideshow / simple / styles.css" media = "screen" rel = "stylesheet" type = "text / css" / >
2. < script type = "text / javascript" src = "js / jquery.js? ver = 1.2.6" > < / script >
3. < script type = "text / javascript" src = "js / jquery.aslideshow.js" > < / script >

Initialization:

1. < script type = "text / javascript" >
2. $ (document) .ready (function () {
3. $ ('# MySlideshow'). Slideshow ();
4. });
5. < / script >

What is the result you can see on the home page of the project ;)

Configuration

The “alt” attribute for pictures, or the first “label” tag for the other slides is taken as a slide title ...

The plugin also has a number of settings:

1. $ ( '#CustmSlideshow' ) . slideshow ( {
2. width : 320 , // width in pixels
3. height : 240 , // width in pixels
4. index : 0 , // start from slide number N
5. content : {
6. 'nextclick' : false , // switch to the next slide by clicking on the main window
7. 'playclick' : false , // enable / disable slideshow playback by clicking on the main window
8. 'playframe' : true , // display the "Play Now!" slide first
9. 'imgresize' : false , // resize images to fit the slide show
10. 'imgcenter' : true // align pictures in the center (does not work yet)
11. } ,
12. controls : { // controls
13. 'hide' : true , // popup toolbar
14. 'first' : true , // first slide button
15. 'prev' : true , // button previous slide (if this is the first, go to the last slide)
16. 'play' : true , // start slideshow
17. 'next' : true , // button next slide (if this is the last one, go to the first slide)
18. 'last' : true , // button last slide
19. 'help' : true , // help line display button
20. 'counter' : true // display the current slide number
21. } ,
22. slideshow : {
23. 'time' : 3000 , // delay between slides change
24. 'title' : true , // display title or not
25. 'panel' : true , // display control panel or not
26. 'help' : "Hello World!" // helpline text
28. }
29. } ) ;

Download

You can download this plugin using either access to SVN:

svn checkout http: // a-slideshow.googlecode.com / svn / trunk / a-slideshow-read-only

Or in the archive:

http://code.google.com/p/a-slideshow/downloads/list
http://plugins.jquery.com/project/a-slideshow