jquery collage

from dan atkison com

by grant

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>$(document).ready(function(){
	$('#container-id').plusPics({
		userId: '+grantamaral',
		albumId: '6077223627586772513',
		numImages: 3,
		title: 'Images'
	});
});</script>


<div id="container-id"></div>

CSS

/* ---------- plus pics -----------*/

#container-id .pluspics {
	width: 940px;
	}

#container-id .pluspics li {
	position: relative;
	float: left;
	width: 188px;
	height: 125px;
	}
	
#container-id .pluspics li a span {
	position: absolute;
	display:block;
	overflow: hidden;
	width: 188px;
	height: 125px;
	padding: 6px;
	background-color: #fff;
	}
	
#container-id .pluspics li a {
	display:block;
	}
	
#container-id .pluspics li a:hover span.hover {
	padding: 5px;
	border: solid 1px #CCC;
	-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
    box-shadow: 1px 1px 5px #999;
}
	
#container-id .pluspics li img {
	position: absolute;
	top:50%;
  	left:50%;
  	display: none;
}

JavaScript

/*
 
    jQuery plugin to retrieve images from Google+ and display with hover effect.
    Author: Dan Aktinson (www.danatkinson.com)
	Usage:
	-----

	$(document).ready(function() {
		$('#myContainer').plusPics({
			userId: 'your_user_id',
			albumId: 'the_album_id',
			numImages: 3,
			title: 'Latest photos'
		});
	});
	
*/

(function($){
  $.fn.plusPics = function(options) {  
    options = $.extend( {
    	'url' : "http://picasaweb.google.com/data/feed/api/user/"+options.userId+"/albumid/"+options.albumId+"?alt=json",
    	'title' : 'Images'
    }, options);

    return this.each(function() {  
    	var cont = $(this);
    	$.getJSON(options.url+'&max-results='+options.numImages, function(data) {
  		  var items = [];
  		  $.each(data.feed.entry, function(i,item) {
  			url = item.media$group.media$content[0].url;
  			title = item.media$group.media$title.$t;
  		    items.push('<li class="pluspic-'+i+'"><a title="'+title+'"><span><img src="' +url+ '" alt="'+title+'"/></span></a></li>');
  		  }); 
  		  $('<ul/>', {
  		    'class': 'pluspics',
  		    html: '<h3>'+options.title+'</h3>'+items.join('')+'<div class="clear"></div>'
  		  }).appendTo(cont);
  		  $($(cont).children('.pluspics').children('li').children('a').children('span').children('img')).load(function(){
  			   css = {
  					   "margin-left": '-' + ( parseInt( $(this).width() ) / 2 ) + 'px',
  					   "margin-top": '-' + ( parseInt( $(this).height() ) / 2 ) + 'px'
  					};
  			   $(this).css(css);
  			   $(this).fadeIn(1000, function() {
    				 $(this).parent().hover(function() {
						    $(this).addClass("hover");
						    var img = $(this).children('img');
						    $(this).css({ "z-index": "1000"});
						    $(this).stop().animate({
						        width: img.width(),
						        height: img.height(),
						        left: '-'+(parseInt(img.width()-$(this).width())/2)+'px',
			                    top: '-'+(parseInt(img.height()-$(this).height())/2)+'px'
						      }, 500);
						 ...