Isotope - dynamically load images

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 Danish Farman

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

$(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;
  });

});