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
$('#fixed-size').lightGallery({
// Width of the gallery
width: '800px',
// Height of the gallery
height:'600px',
// Change transition mode (optional)
mode: 'lg-fade',
// Add a custom class for styling the gallery (optional)
addClass : 'fixed-width'
})
Css (optional)
.fixed-width.lg-outer {
background-color: rgba(0, 0, 0, 0.9);
}
.fixed-width.lg-outer .lg-inner {
background-color: #000;
}
.fixed-width.lg-outer .lg-sub-html {
position: absolute;
text-align: left;
}
.fixed-width.lg-outer .lg-toolbar {
background-color: transparent;
height: 0;
}
.fixed-width.lg-outer .lg-toolbar .lg-icon {
color: #FFF;
}