jQuery Plugin To Create Horizontally Tiled Photo Gallery - jLightroom

jLightroom is a jQuery plugin used for generating a responsive, masonry-like, horizontally tiled photo gallery where all the images are arranged in a straight row as you seen on Google Image Search and Flicker.

How to use it:

1. Load the needed jQuery library and imagesloaded plugin into your webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/imagesloaded.min.js"></script>

2. Load the jLightroom plugin's JS and CSS files as this:

<link href="jquery.lightroom.css" rel="stylesheet">
<script src="jquery.lightroom.js"></script>

3. The plugin works perfectly with Lightbox2 which allows to display your images in an elegant lightbox popup.

<link rel="stylesheet" href="/path/to/lightbox.min.css">
<script src="/path/to/lightbox.min.js"></script>

4. Insert a group of images into the gallery.

<div id="jLightroom" class="jlr">
  <div><img src="1.jpg" /></div>
  <div><img src="2.jpg" /></div>
  <div><img src="3.jpg" /></div>
  <div><img src="4.jpg" /></div>
  <div><img src="5.jpg" /></div>
  <div><img src="6.jpg" /></div>
  <div><img src="7.jpg" /></div>
  ...
</div>

5. Invoke the plugin with default settings and you're done.

$("#jLightroom").lightroom().init();

6. All default plugin settings.

$("#jLightroom").lightroom({

  // selector of image container
  image_container_selector: "div",

  // selector of images
  img_selector: "img",

  // CSS class when images are loaded
  img_class_loaded: "jlr_loaded",

  // space between images
  img_space: 5,

  // 'min' or 'max'
  img_mode: 'min',

  // callback function after images are loaded
  init_callback: function(elem){}

});

Change log:

2016-10-01

• fixed 'max' mode.

---

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