GrassHopperPebbles.com Demos

JQuery Plugins

gpImageRotate 0.5 - Fading Image Classes

The following example displays the gpImageRotate plugin using the fade mode.

In this example, I'm using the class_name option in the data_map, so instead of specifying an image name, I supply a class name.

$(document).ready(function(){
	$("#cast").gpImageRotate({
		mode: 'fade',
		interval: 5000,
		data_map: {
			class_name: 'class_name',
			url_name: 'url'
		},
		image_url: "/assets/gpimagerotate/rotate_class.php"
	});
});	
[{"class_name": "joneil", "url": "http://www.imdb.com/character/ch0005968/"},{"class_name": "scarter", "url": "http://www.imdb.com/character/ch0005974/"},
{"class_name": "djackson", "url": "http://www.imdb.com/character/ch0005966/"},{"class_name": "tealc", "url": "http://www.imdb.com/character/ch0005979/"},
{"class_name": "cmitchell", "url": "http://www.imdb.com/character/ch0005982/"},{"class_name": "vala", "url": "http://www.imdb.com/character/ch0005977/"}]	
#cast {
	position:relative;
	margin-left:40px;
	margin-top:20px;
}

.gpImageRotate-DisplayCntnr {
	position:absolute;
	top:0;
	left:0;
	width:150px;
	height:100px;
}

IMG {
	border:none;
}

.joneil {
	background-image:url("/assets/gpimagerotate/joneil.jpg")
}
.scarter {
	background-image:url("/assets/gpimagerotate/scarter.jpg)
}
.djackson {
	background-image:url("/assets/gpimagerotate/djackson.jpg")
}
.tealc {
	background-image:url("/assets/gpimagerotate/tealc.jpg")
}
.cmitchell {
	background-image:url("/assets/gpimagerotate/cmitchell.jpg")
}
.vala {
	background-image:url("/assets/gpimagerotate/vala.jpg")
}	

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

Tags

, , , , , , , , , ,