Gallery with fixed size.
By default lightgallery opens in a fullscreen window. But if you want tranditional fixed size gallery you can specify width and hight by passing values to width height settings.
HTML structure
<div id="fixed-size">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
Javascript
lightGallery(document.getElementById('fixed-size'), {
width: '700px',
height: '470px',
mode: 'lg-fade',
addClass: 'fixed-size',
counter: false,
download: false,
startClass: '',
enableSwipe: false,
enableDrag: false,
speed: 500
});
Css (optional)
.lg-backdrop.in {
opacity: 0.85;
}
.fixed-size.lg-outer .lg-inner {
background-color: #FFF;
}
.fixed-size.lg-outer .lg-sub-html {
position: absolute;
text-align: left;
}
.fixed-size.lg-outer .lg-toolbar {
background-color: transparent;
height: 0;
}
.fixed-size.lg-outer .lg-toolbar .lg-icon {
color: #FFF;
}
.fixed-size.lg-outer .lg-img-wrap {
padding: 12px;
}