Responsive Fluid Photo Gallery with jQuery - Latae

File Size: 941 KB
Views Total: 5632
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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" 
  <a href="#">
    <figure class="picture" 
            data-title="Description 2" 
  <a href="#">
    <figure class="picture" 
            data-title="Description 3" 

3. Initialize the photo gallery and done.


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


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