Dashboard

Editing: example-advanced.html

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.gallerie.js"></script>
<link rel="stylesheet" type="text/css" href="gallerie.css"/>
<link rel="stylesheet" type="text/css" href="gallerie-effects.css"/>

$.ajax('https://secure.flickr.com/services/rest/',{
		data: {
			format: 'json',
			method: 'flickr.interestingness.getList',
			api_key: '270e736b0e42643aab5aab7819164d84'
		},
		dataType: 'jsonp',
		jsonp: 'jsoncallback'
	}).done(function(data){
	
		var $gallerie = $('#gallery'),
			$image,
			$link,
			base_url,
			t_url,
			i_url;
		
		$.each(data.photos.photo, function(index, photo){
			base_url = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret;
			t_url = base_url + '_t.jpg';
			i_url = base_url + '_b.jpg';  
			
			$image = $('<img/>').prop({
				'src': t_url,
				'title': photo.title
			});
			
			$link = $('<a/>').prop('href', i_url).append($image);
			$gallerie.append($link);
		});
	
		$('#gallery').gallerie();

});
});
</script>

#gallery > a img:hover {
		border-color: yellow;
		opacity: 1.0;
		transform: scale(1.5);
		-webkit-transform: scale(1.5);
		-moz-transform: scale(1.5);
		-ms-transform: scale(1.5);
		-o-transform: scale(1.5);
		z-index: 10;
	}
</style>
</head>

Cancel