The following example displays the imBannerRotater plugin with carousel option. Use the mode:'carousel' option to rotate the images. Also set the interval option. The interval option is the amount of time (in milliseconds) that you want the carousel to move. For instance, 5000 milliseconds = 5 seconds.
$(document).ready(function(){
$("#cast").imBannerRotater({
mode: 'carousel',
interval: 5000,
image_url: 'rotate.php',
return_type: 'json',
data_map: {
image_name: 'name',
url_name: 'url',
image_title: 'image_title'
},
base_path: 'images/'
});
});
I've also set the image_title in the data_map option. By default, when a user moves their over an image, the name of the image will be displayed. If you want another value to be displayed, you can add it as part of the json record.
[{"name": "joneil.jpg", "url": "http://www.imdb.com/character/ch0005968/", "image_title": "Jack O'neil"},
{"name": "scarter.jpg", "url": "http://www.imdb.com/character/ch0005974/", "image_title": "Samantha Carter"},
{"name": "djackson.jpg", "url": "http://www.imdb.com/character/ch0005966/", "image_title": "Daniel Jackson"},
{"name": "ghammond.jpg", "url": "http://www.imdb.com/character/ch0006003/", "image_title": "George Hammond"},
{"name": "tealc.jpg", "url": "http://www.imdb.com/character/ch0005979/", "image_title": "Teal'c"},
{"name": "cmitchell.jpg", "url": "http://www.imdb.com/character/ch0005982/", "image_title": "Cameron Mitchell"},
{"name": "vala.jpg", "url": "http://www.imdb.com/character/ch0005977/", "image_title": "Vala Mal Doran"}]
You can also use the images option to store the files (instead of using the images_url option and loading a file via ajax ).
$(document).ready(function(){
$("#cast").imBannerRotater({
mode: 'carousel',
interval: 6000,
images: 'joneil.jpg,scarter.jpg,djackson.jpg,tealc.jpg,cmitchell.jpg,vala.jpg',
base_path: 'images/'
});
});
For documentation about the imBannerRotater plugin, view the blog post.