【jQuery】水平石積みのレイアウトフォトギャラリープラグイン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){}
 
jLightroom

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

  • LATEST
  • RELATED
  • POPULAR