GrassHopperPebbles.com Demos

JQuery Plugins

gpImageRotate 0.5 - Portfolio with Description slideY

The following example displays the gpImageRotate plugin with portfolio option (mode: portfolio). This option is similar to the carousel mode option. Set the interval option - the amount of time (in milliseconds) that you want the portfolio to change. For instance, 5000 milliseconds = 5 seconds.

I also set the side navigation to display when the user moves their mouse over the image.

The image description will display on the top portion of the image and is set to slide in from the top when the image is loaded.

$(document).ready(function(){
	$("#gpImageRotateCntnr").gpImageRotate({
		mode: 'portfolio',
		interval: 8000,
		speed: 2000,
		data_map: {
			image_name: 'name',
			url_name: 'url',
			image_title: 'image_title',
			image_desc: 'image_desc'
		},
		primary_nav: {'display': 'top'},
		side_nav: {'display': 'onhover'},
		desc_display: {'display': 'onload', 'anim_type': 'slideY', 'display_position': 'top'},
		image_url: "portfolio.php'",
		base_path: "images/"
	});
});

I've also set the image_title and image_desc in the data_map option. The default option for the display of the title and description is onhover, so the container will display when the user moves their mouse over the image.

[{"name": "bobmarley.jpg", "url": "http://www.bobmarley.com", "image_title": "Bob Marley", "image_desc": "Bob Marley was a hero figure, in the classic mythological sense."},
{"name": "burnin.jpg", "url": "http://en.wikipedia.org/wiki/Burnin%27_%28The_Wailers_album%29", "image_title": "Burnin", "image_desc": "Burnin is a roots reggae album by The Wailers, "},
{"name": "confrontation.jpg", "url": "http://en.wikipedia.org/wiki/Confrontation_%28album%29", "image_title": "Confrontation", "image_desc": "Confrontation is a roots reggae album by "},
{"name": "exodus.jpg", "url": "http://en.wikipedia.org/wiki/Exodus_%28Bob_Marley_%26_The_Wailers_album%29", "image_title": "Exodus", "image_desc": "Exodus is the ninth studio album by "},
{"name": "rastaman_vibration.jpg", "url": "http://en.wikipedia.org/wiki/Rastaman_Vibration", "image_title": "Rastaman Vibration", "image_desc": "Rastaman Vibration is a roots reggae "},
{"name": "survival.jpg", "url": "http://en.wikipedia.org/wiki/Survival_%28Bob_Marley_%26_The_Wailers_album%29", "image_title": "Survival", "image_desc": "Survival is a roots reggae "}, 
{"name": "uprising.jpg", "url": "http://en.wikipedia.org/wiki/Uprising_%28album%29", "image_title": "Uprising", "image_desc": "Uprising is a 1980 roots reggae album by Bob Marley & "}]	
#gpImageRotateCntnr {
	float:left;
	width:460px;
	margin-left:40px;
	margin-bottom:20px;
}

.gpImageRotate-Primary-Nav {
	float:left;
	width:100%;
	height:15px;
	margin-bottom:10px;
	display:none;
}

.gpImageRotate-Primary-Nav ul {
	float:right;
	list-style:none;
	margin: 5px 0 0 5px;
	padding:0;
	width:400px;
}

.gpImageRotate-Primary-Nav ul li {
	float:left;
	display:block;
	cursor:pointer;
	height:9px;
	width:9px;
	margin-left:5px;
}

.gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-default {
	background: url("/assets/gpimagerotate/images/dot-nav-blue2.png") no-repeat;
}

.gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-default-selected  {
	background: url("/assets/gpimagerotate/images/dot-nav-blue1.png") no-repeat;
}

.gpImageRotate-SlideCntnr {
	position:relative;
	width:400px;
	height:400px;
	overflow:hidden;
	margin:0;
	padding:0;
}

.gpImageRotate-Slider {
	position:absolute;
	left:0;
	top:0;
	width:5000px;
	margin:0;
	padding:0;
}

a.gpImageRotate-PrevBtn, a.gpImageRotate-NextBtn {
	position:absolute;
	background-image: url("/assets/gpimagerotate/images/image_rotate_side_nav.png");
	top:200px;
	width:34px;
	height:68px;
	opacity: 0.7;
	cursor:pointer;
}

a.gpImageRotate-PrevBtn {
	left:0;
	background-position:0 0;
}

a.gpImageRotate-NextBtn {
	right:0;
	background-position: 34px 0;
}

.gpImageRotate-DisplayCntnr {
	float:left;
	margin:0;
	padding:0;
	width:400px;
	height:400px;
	font-family:Arial, Helvetica, sans-serif;
}

.gpImageRotate-TextCntnr {
	color:#fff;
	position:relative;
	/*top:-120px;*/
	background: rgba(85, 85, 85, 0.7);
	/*height:120px;*/
	display:none;
	height:120px;
}

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

.gpImageRotate-TextCntnr p {
	color:#fff;
	font: 12px Arial, Helvetica, sans-serif;
	margin:7px; 
}
	
IMG {
	border:none;
}	

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

Tags

, , , , , , , , , ,