GrassHopperPebbles.com Demos

JQuery Plugins

gpImageRotate 0.5 - Random Image with Multiple Links

The following example uses the gpImageRotate plugin in the default mode (Random image). If you refresh the page, a different image will appear. But I also added the ability to create multiple links on each image.

[{"name": "bobmarley.jpg", "links": [{"link_url": "http://www.bobmarley.com", "link_class": "btnOne", "link_target": "_blank"}, {"link_url": "http://www.imdb.com/character/ch0005968/", "link_height": "30px", "link_width": "100px", "link_top": "350px", "link_left": "220px"}]},
    {"name": "burnin.jpg", "links": [{"link_url": "http://en.wikipedia.org/wiki/Burnin%27_%28The_Wailers_album%29", "link_class": "btnOne", "link_target": "_blank"}, {"link_url": "http://www.imdb.com/character/ch0005974/", "link_class": "btnTwo"}]},
    {"name": "confrontation.jpg", "links": [{"link_url": "http://en.wikipedia.org/wiki/Confrontation_%28album%29", "link_class": "btnOne", "link_target": "_blank"}, {"link_url": "http://www.imdb.com/character/ch0005966/", "link_class": "btnTwo"}]},
    {"name": "exodus.jpg", "links": [{"link_url": "http://en.wikipedia.org/wiki/Exodus_%28Bob_Marley_%26_The_Wailers_album%29", "link_class": "btnOne", "link_target": "_blank"}, {"link_url": "http://www.imdb.com/character/ch0005979/", "link_class": "btnTwo"}]},
    {"name": "rastaman_vibration.jpg", "links": [{"link_url": "http://en.wikipedia.org/wiki/Rastaman_Vibration", "link_class": "btnOne", "link_target": "_blank"}, {"link_url": "http://www.imdb.com/character/ch0005982/", "link_class": "btnTwo"}]},
    {"name": "survival.jpg", "links": [{"link_url": "http://en.wikipedia.org/wiki/Survival_%28Bob_Marley_%26_The_Wailers_album%29", "link_class": "btnOne", "link_target": "_blank"}, {"link_url": "http://www.imdb.com/character/ch0005977/", "link_class": "btnTwo"}]},
	{"name": "uprising.jpg","links": [{"link_url": "http://en.wikipedia.org/wiki/Uprising_%28album%29", "link_class": "btnOne", "link_target": "_blank"}, {"link_url": "http://www.imdb.com/character/ch0005968/", "link_class": "btnTwo"}]}]	

If the data returned contains a links option, the plugin will check for the following options that will be used to determine how to place the link:

  "links": [{"link_url": "", "link_class": "", "link_height": "", "link_width": "", "link_top": "", "link_left": "", "link_target": "_self", "link_color": "hex", "link_text": "", "link_bck_color": "hex", "link_bck_image": ""}]	

The link_url option is required, the remaining are optional. The following is the grouping of the options:
Use link_class to place the link on the image with a class in a style sheet.
Or
Use link_width,link_height,link_top,link_left to place the link.

Note: Whether using a class or manually styling each link, the link_top and link_left should be positioned absolutely position:absolute.

#cast {
	position:relative;
	float:left;
	margin:0;
	padding:0;
	width:400px;
	height:400px;
	font-family:Arial, Helvetica, sans-serif;
}
.gpImageRotate-DisplayCntnr {
	width:400px;
	height:400px;
}
IMG {
	border:none;
}
#cast a {
	background-color:#000066;
}
a.btnOne, a.btnTwo {
	position:absolute;
	top:350px;
	left: 60px;
	width:100px;
	height:30px;
}
#cast a.btnTwo {
	left:220px;
}	
$(document).ready(function(){
	$("#cast").gpImageRotate({
		image_url: 'random.php',
		base_path: 'images/',
		data_map: {
			image_name: 'name'
		}
	});
});	

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").gpImageRotate({
		image_url: 'random.php',
		base_path: 'images/',
		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").gpImageRotate({
		image_url: 'random.php',
		base_path: 'images/',
		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 gpImageRotate plugin, view the blog post.

Tags

, , , , , , , , , ,