GrassHopperPebbles.com Demos

JQuery Plugins

gpImageRotate 0.5 - Fade inOutIn

The following example displays the gpImageRotate plugin in curtains mode with the transition_direction set to inOutIn.

The interval option is the amount of time (in milliseconds) that you want wait before the next image rotates. For instance, 5000 milliseconds = 5 seconds.

$(document).ready(function(){
	$("#cast").gpImageRotate({
	    mode: 'fade',
	    interval: 5000,
	    transition_direction: 'inOutIn',
	    data_map: {
			image_name: 'name',
			url_name: 'url'
		},
		image_url: 'rotate.php',
		base_path: 'images/'
	});
});	
#cast {
	position:relative;
	margin-left:40px;
	margin-top:20px;
}

.gpImageRotate-DisplayCntnr {
	position:absolute;
	top:0;
	left:0;
}

IMG {
	border:none;
}	

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

Tags

, , , , , , , , , ,