Interface elements for jQuery - Documentation - Slideshow

Slideshow

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.

example

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'
			}
		]
	}
)

Download now

Interface 1.2 146kb (source files, compressed files)
jQuery 1.1.2 19 kb
Digg it del.ici.us NewsVine Reddit

eLiberatica 2008 - The Benefits of Open and Free Technologies Conference