$(function(){ var $container = $('#container'), $photos = $container.find('.photo'), $loadingIndicator = $('<div class="loading"><span><img src="http://i.imgur.com/IE7iw.gif" /></span></div>'); // trigger Isotope after images have loaded $container.imagesLoaded( function(){ $container.isotope({ itemSelector : '.photo', masonry: { columnWidth: 200 } }); }); // shows the large version of the image // shows small version of previously large image function enlargeImage( $photo ) { $photos.filter('.large').removeClass('large'); $photo.addClass('large'); $container.isotope('reLayout'); } $photos.find('a').click( function() { var $this = $(this), $photo = $this.parents('.photo'); if ( $photo.hasClass('large') ) { // already large, just remove $photo.removeClass('large'); $container.isotope('reLayout'); } else { if ( $photo.hasClass('has-big-image') ) { enlargeImage( $photo ); } else { // add a loading indicator $this.append( $loadingIndicator ); // create big image var $bigImage = $('<img>', { src: this.href }); // give it a wrapper and appended it to element $('<div>', { 'class': 'big-image' }) .append( $bigImage ) .appendTo( $this ) .imagesLoaded( function() { $loadingIndicator.remove() enlargeImage( $photo ); }); // add a class, so we'll know not to do this next time $photo.addClass('has-big-image'); } } return false; }); });
body { font-family: sans-serif; } #container { border: 2px solid; width: 800px; } .photo { width: 200px; float: left; } .photo.double { width: 480px; } .photo.large { width: 600px; z-index: 3; } .photo.large .small-image, .photo .big-image { display: none; } .photo .small-image, .photo.large .big-image { display: block; } .photo img { display: block; width: 100%; } .photo .loading { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; background: hsla( 0, 0%, 100%, 0.7 ); } .photo .loading span { position: absolute; left: 50%; top: 50%; } .photo .loading img { width: auto; position: absolute; left: -16px; top: -16px; } /* Start: Recommended Isotope styles */ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; } /* End: Recommended Isotope styles */
<p>Click for hi-res</p> <div id="container" class="photos clearfix"> <div class="photo"> <a href="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509_b.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" /></a> </div> <div class="photo"> <a href="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc_b.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" /></a> </div> <div class="photo"> <a href="http://farm5.static.flickr.com/4086/5013039583_26717f6e89_b.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" /></a> </div> <div class="photo"> <a href="http://farm5.static.flickr.com/4144/5013039541_17f2579e33_b.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" /></a> </div> <div class="photo"> <a href="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939_b.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" /></a> </div> <div class="photo"> <a href="http://farm5.static.flickr.com/4153/5013039741_d860fb640b_b.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" /></a> </div> <div class="photo"> <a href="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4113/5013039697_a15e41fcd8_b.jpg" /></a> </div> <div class="photo"> <a href="http://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4124/5013646314_c7eaf84918.jpg" /></a> </div> <div class="photo"> <a href="http://farm5.static.flickr.com/4089/5013040075_bac12ff74e.jpg"><img class="small-image" src="http://farm5.static.flickr.com/4089/5013040075_bac12ff74e_b.jpg" /></a> </div> </div> <!-- #container -->