/**
* jQuery.ScrollTo - Easy element scrolling using jQuery.
* Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
* Dual licensed under MIT and GPL.
* Date: 3/9/2009
* @author Ariel Flesler
* @version 1.4.1
*
* http://flesler.blogspot.com/2007/10/jqueryscrollto.html
*/
;(function($){var m=$.scrollTo=function(b,h,f){$(window).scrollTo(b,h,f)};m.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1};m.window=function(b){return $(window).scrollable()};$.fn.scrollable=function(){return this.map(function(){var b=this,h=!b.nodeName||$.inArray(b.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!h)return b;var f=(b.contentWindow||b).document||b.ownerDocument||b;return $.browser.safari||f.compatMode=='BackCompat'?f.body:f.documentElement})};$.fn.scrollTo=function(l,j,a){if(typeof j=='object'){a=j;j=0}if(typeof a=='function')a={onAfter:a};if(l=='max')l=9e9;a=$.extend({},m.defaults,a);j=j||a.speed||a.duration;a.queue=a.queue&&a.axis.length>1;if(a.queue)j/=2;a.offset=n(a.offset);a.over=n(a.over);return this.scrollable().each(function(){var k=this,o=$(k),d=l,p,g={},q=o.is('html,body');switch(typeof d){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px)?$/.test(d)){d=n(d);break}d=$(d,this);case'object':if(d.is||d.style)p=(d=$(d)).offset()}$.each(a.axis.split(''),function(b,h){var f=h=='x'?'Left':'Top',i=f.toLowerCase(),c='scroll'+f,r=k[c],s=h=='x'?'Width':'Height';if(p){g[c]=p[i]+(q?0:r-o.offset()[i]);if(a.margin){g[c]-=parseInt(d.css('margin'+f))||0;g[c]-=parseInt(d.css('border'+f+'Width'))||0}g[c]+=a.offset[i]||0;if(a.over[i])g[c]+=d[s.toLowerCase()]()*a.over[i]}else g[c]=d[i];if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],u(s));if(!b&&a.queue){if(r!=g[c])t(a.onAfterFirst);delete g[c]}});t(a.onAfter);function t(b){o.animate(g,j,a.easing,b&&function(){b.call(this,l,a)})};function u(b){var h='scroll'+b;if(!q)return k[h];var f='client'+b,i=k.ownerDocument.documentElement,c=k.ownerDocument.body;return Math.max(i[h],c[h])-Math.min(i[f],c[f])}}).end()};function n(b){return typeof b=='object'?b:{top:b,left:b}}})(jQuery);
$(function(){
var $container = $('#container'),
// get position of the top of the container
containerTop = $container.scrollTop(),
$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
},
itemPositionDataEnabled: true
});
});
// 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');
// scroll to big item
$.scrollTo({
top: $photo.data('isotope-item-position').y + containerTop,
left: 0
}, 'normal' );
}
$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 -->
External resources loaded into this fiddle: