jQuery plugin for photo gallery using a horizontal masonry layout. Git-Repo
A other exapmle with random images and a jQuery lightbox find here
.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;
}
<div id="jLightroom" class="jlr">
<div><img src="https://dummyimage.com/500x500" /></div>
<div><img src="https://dummyimage.com/1000x1000" /></div>
</div>
<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();
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. |