Creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide. A page may have more then one slideshow, eachone working independently. Each slide can be bookmarked. The source images can be defined by JavaScript in slideshow options or by HTML placing images inside container.
Options:
| container | string | mandatory | the HTML element's id that will contain the slideshow |
| loader | string | optional | the path to a image used as a preloader indicator |
| linksPosition | sting('top' or 'bottom') | optional | the place for navigation links container |
| linksClass | string | optional | the CSS class aplied to navigation links container |
| linksSeparator | string | optional | links separator |
| activeLinkClass | string | optional | active link CSS class name |
| nextslideClass | string | optional | CSS class aplied to next slide link |
| prevslideClass | string | optional | CSS class aplied to prev slide link |
| fadeDuration | integer | optional | the fade duration in miliseconds |
| captionPosition | sting('top' or 'bottom') | optional | the place for caption container |
| captionClass | string | optional | the CSS class aplied to caption container |
| autoplay | integer | optional | if this is set the slideshow will autoplay slides with a pause in seconds defined by this option |
| images | array | optional | an array of objects with 'src' and 'caption' for each image |
Code sample:
$.slideshow(
{
container : 'slideShow1',
loader: 'images/slideshow_loader.gif',
linksPosition: 'top',
linksClass: 'pagelinks',
linksSeparator : ' | ',
fadeDuration : 400,
activeLinkClass: 'activeSlide',
nextslideClass: 'nextSlide',
prevslideClass: 'prevSlide',
captionPosition: 'bottom',
captionClass: 'slideCaption',
autoplay: 5,
images : [
{
src: 'images/panda/Panda.jpg',
caption: 'Fiat Panda'
},
{
src: 'images/panda/Active.jpg',
caption: 'Panda Active'
},
{
src: 'images/panda/Actual.jpg',
caption: 'Panda Actual'
},
{
src: 'images/panda/Dynamic.jpg',
caption: 'Panda Dynamic'
}
]
}
)