jLightroom

by falk-m.de

jQuery plugin for photo gallery using a horizontal masonry layout. Git-Repo

Example

A other exapmle with random images and a jQuery lightbox find here

Usage

CSS

Define image height and margin in css:

.jlr {font-size: 0; /*remove epmty space between images*/}

.jlr div {
    font-size: 1rem;
    display: inline-block;
    box-sizing: border-box;     
    padding: 5px;
}

.jlr img {
    height: 200px;
    opacity: 0;

}

html

insert html code.

<div id="jLightroom" class="jlr">
    <div><img src="https://dummyimage.com/500x500" /></div> 
    <div><img src="https://dummyimage.com/1000x1000" /></div> 
</div>            

Javascript

Lightroom require jQuery and the imagesloaded-plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="jquery.lightroom.js"></script>
        
Init the lightroom. set same image-space linke the css-code
 $("#jLightroom").lightroom({img_space: 5}).init();

Options

name default description
img_space 5 the padding of the image-wrapped element
img_mode min min/max; the displayed images have minimal/maximal the hight from css code settings. By max-mode, it can be, that the last line not be complete filled.
image_container_selector div the selector of the image-wrapped element.
img_selector img the image selector.
img_class_loaded jlr_loaded images how loaded get this css-class name.
init_callback function(elem){} callback function after images are loaded. Can use for remove spinners e.g.