Isotope - dynamically load images, and scrollTo

For image galleries. First use small images for start-up. Then, when clicked, large high-res images are loaded dynamically. When large image is loaded, isotope is triggered again.

by desandro

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<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"...

CSS

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 */

JavaScript

/**
 * 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...