Responsive Fluid Photo Gallery with jQuery - Latae

Latae is a simple, responsive, fluid jQuery / HTML5 photo gallery plugin which dynamically resizes and arranges images with different height / width in a neat, compact grid when viewport size changes.

How to use it:

1. Load jQuery library and the jQuery latae plugin in the head section or just before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/latae.js"></script>

2. Add your photos into the gallery using the data-url attribute instead. The data-title attribute is used to specify the detail displayed in the caption bar when your hover over an image.

<div class="gallery">
  <a href="#">
    <figure class="picture" 
            data-title="Description 1" 
            data-url="1.jpg">
    </figure>
  </a>
  <a href="#">
    <figure class="picture" 
            data-title="Description 2" 
            data-url="2.jpg">
    </figure>
  </a>
  <a href="#">
    <figure class="picture" 
            data-title="Description 3" 
            data-url="3.jpg">
    </figure>
  </a>
  ...
</div>

3. Initialize the photo gallery and done.

$(".gallery").latae();

4. You can also initialize the plugin with specific options.

$(".gallery").latae({

  // max height of image
  max_height  : 350,

  // space between images
  margin      : 4,

  // target image selector
  target      : 'picture',

  // path to the image loader
  loader      : 'img/loader.gif',

  // shows image captions
  displayTitle: false
  
});

---

This awesome jQuery plugin is developed by tsahraoui. For more Advanced Usages, please check the demo page or visit the official website.