This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create Horizontally Tiled Photo Gallery – jLightroom, hope it will help you in programming stack.
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.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/imagesloaded.min.js"></script> |
2. Load the jLightroom plugin’s JS and CSS files as this:
1 |
<link href="jquery.lightroom.css" rel="stylesheet"> |
2 |
<script src="jquery.lightroom.js"></script> |
3. The plugin works perfectly with Lightbox2 which allows to display your images in an elegant lightbox popup.
1 |
<link rel="stylesheet" href="/path/to/lightbox.min.css"> |
2 |
<script src="/path/to/lightbox.min.js"></script> |
4. Insert a group of images into the gallery.
01 |
<div id="jLightroom" class="jlr"> |
02 |
<div><img src="1.jpg" /></div> |
03 |
<div><img src="2.jpg" /></div> |
04 |
<div><img src="3.jpg" /></div> |
05 |
<div><img src="4.jpg" /></div> |
06 |
<div><img src="5.jpg" /></div> |
07 |
<div><img src="6.jpg" /></div> |
08 |
<div><img src="7.jpg" /></div> |
5. Invoke the plugin with default settings and you’re done.
1 |
$("#jLightroom").lightroom().init(); |
6. All default plugin settings.
01 |
$("#jLightroom").lightroom({ |
04 |
image_container_selector: "div", |
10 |
img_class_loaded: "jlr_loaded", |
19 |
init_callback: function(elem){} |
Change log:
2016-10-01
This awesome jQuery plugin is developed by falkmueller. For more Advanced Usages, please check the demo page or visit the official website.
