jQuery

【jQuery】水平石積みのレイアウトフォトギャラリープラグインjLightroom

September 29, 2016
jLightroom

水平石積みのレイアウトフォトギャラリーのためのjQueryプラグイン。

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

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

Javascript

<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>
 $("#jLightroom").lightroom({img_space: 5}).init();

Options

name default
img_space 5
img_mode min
image_container_selector div
img_selector img
img_class_loaded jlr_loaded
init_callback function(elem){}