GrassHopperPebbles.com Demos

imBannerRotater 2.1 - Random Image

The following example uses the imBannerRotater plugin in the default mode (Random image). If you refresh the page, a different image will appear. I am also loading a json file for this example, so I have to use the return_type option. Note that I have added a url for each image, so you should be able to click on each image and move to the specified location.

[{name: "joneil.jpg", url: "http://www.imdb.com/character/ch0005968/"},
    {name: "scarter.jpg", url: "http://www.imdb.com/character/ch0005974/"},
    {name: "djackson.jpg", url: "http://www.imdb.com/character/ch0005966/"},
    {name: "tealc.jpg", url: "http://www.imdb.com/character/ch0005979/"},
    {name: "cmitchell.jpg", url: "http://www.imdb.com/character/ch0005982/"},
    {name: "vala.jpg", url: "http://www.imdb.com/character/ch0005977/"}]	

I could add the full path of each image (images/joneil.jpg, etc), but instead, I am going to use the base_path option of the plugin. The images will be displayed in the 'cast' id selector. When using thie json option, you have to use the data_map option tell the plugin where to find the image name. The data_map does not specify the url_target, so it will be '_blank' by default.

$(document).ready(function(){
	$("#cast").imBannerRotater({
		image_url: 'random.php',
		base_path: 'images/',
		return_type: 'json',
		data_map: {image_name: 'name', url_name: 'url'}
	});
});	

By default, when a user clicks on a link, the url will be displayed in a new window (target = '_blank'). You can change this by either changing the url_target option:

$(document).ready(function(){
	$("#cast").imBannerRotater({
		image_url: 'random.php',
		base_path: 'images/',
		return_type: 'json',
		data_map: {image_name: 'name', url_name: 'url'},
		url_target: '_self'
	});
});	

Or you can add an option to each json record. First set the value in the data_map option:

$(document).ready(function(){
	$("#cast").imBannerRotater({
		image_url: 'random.php',
		base_path: 'images/',
		return_type: 'json',
		data_map: {image_name: 'name', url_name: 'url', url_target: 'url_target'}
	});
});	

[{"name": "joneil.jpg", "url": "http://www.imdb.com/character/ch0005968/", "image_title": "Jack O'neil", "url_target": "_blank"},
    {"name": "scarter.jpg", "url": "http://www.imdb.com/character/ch0005974/", "image_title": "Samantha Carter", "url_target": "_blank"},
    {"name": "djackson.jpg", "url": "http://www.imdb.com/character/ch0005966/", "image_title": "Daniel Jackson", "url_target": "_self"},
    {"name": "ghammond.jpg", "url": "http://www.imdb.com/character/ch0006003/", "image_title": "George Hammond", "url_target": "_blank"},
    {"name": "tealc.jpg", "url": "http://www.imdb.com/character/ch0005979/", "image_title": "Teal'c", "url_target": "_self"},
    {"name": "cmitchell.jpg", "url": "http://www.imdb.com/character/ch0005982/", "image_title": "Cameron Mitchell", "url_target": "_self"},
    {"name": "vala.jpg", "url": "http://www.imdb.com/character/ch0005977/", "image_title": "Vala Mal Doran", "url_target": "_blank"}]	

For documentation about the imBannerRotater plugin, view the blog post.