GrassHopperPebbles.com Demos

JQuery Plugins

gpImageRotate 0.5 - Carousel Option

The following example displays the gpImageRotate plugin with mode set to carousel option. 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(){
	$("#gpImageRotateCntnr").gpImageRotate({
	    mode: 'carousel',
	    interval: 5000,
		image_url: 'rotate.php',
		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 mouse 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"}]	
#gpImageRotateCntnr {
	float:left;
	width:500px;
	height:100px;
	margin: 40px 0 20px 40px;
}

.gpImageRotate-SlideCntnr {
	float:left;
	width:500px;
	height:100px;
	overflow:hidden;
	margin:0;
	padding:0;
}
.gpImageRotate-Slider {
	position:relative;
	left:0;
	top:0;
	width:5000px;
	margin:0;
	padding:0;
}
.gpImageRotate-DisplayCntnr {
	float:left;
	margin:0;
	margin-left:10px;
	padding:0;
	height:100px;
	font-family:Arial, Helvetica, sans-serif;
}

.gpImageRotate-TextCntnr {
	position:relative;
	top:-120px;
	background: rgba(85, 85, 85, 0.7);
	height:120px;
	width:400px;
	display:none;
}

.gpImageRotate-TextCntnr h2 {
	color:#fff;
	font: 16px bold Arial, Helvetica, sans-serif; 
	text-align:center;
	line-height:24px;
}
.gpImageRotate-TextCntnr p {
	color:#fff;
	font: 11px Arial, Helvetica, sans-serif;
	margin:7px; 
}

IMG {
	border:none;
}	

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

Tags

, , , , , , , , , ,