Lightbox
All modular elements can be readily used and customized in every layout across pages.
For detail documentation, Big Picture documentation ⟶
Bigpicture Image
BigPictures are integrated into Posh. It allows you to display a thumbnail and when clicked, the original image will pop up.
The lightbox image works by wrapping anything ie. <img>
tag inside an <a>
element with the data attribute data-bigpicture
. For example data-bigpicture={imgSrc:'source.jpg'}
<div class="row text-center mt-5">
<div class="col-sm-4">
<a href="#!" data-caption="caption" data-bigpicture='{"imgSrc":"../assets/images/portraits/square/02.jpg"}'>
<img class="img-thumbnail" src="../assets/images/portraits/square/02.jpg" alt="" />
</a>
</div>
<div class="col-sm-4">
<a class="btn btn-primary" href="#!" data-bigpicture='{"imgSrc":"../assets/images/portfolio/02.jpg"}' data-caption="caption">
LightBox
</a>
</div>
</div>
Javascript
<script src="vendors/bigpicture/BigPicture.js"> </script>
Bigpicture gallery
You can easily create a gallery of lightbox images by data-bigpicture
and data-bp
attribute. For a specific gallery set an Id to the parent element and pass the id through data-bigpicture
attribute. Use data-bp
attribute to pass the image source.
<div class="row mt-5" id="image_gallery">
<div class="col-sm-4 mb-4">
<a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../assets/images/portfolio/01.jpg">
<img class="rounded img-fluid" src="../assets/images/portfolio/01.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4">
<a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../assets/images/portfolio/02.jpg">
<img class="rounded img-fluid" src="../assets/images/portfolio/02.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4">
<a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../assets/images/portfolio/03.jpg">
<img class="rounded img-fluid" src="../assets/images/portfolio/03.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4">
<a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../assets/images/portfolio/04.jpg">
<img class="rounded img-fluid" src="../assets/images/portfolio/04.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4">
<a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../assets/images/portfolio/05.jpg">
<img class="rounded img-fluid" src="../assets/images/portfolio/05.jpg" alt="" />
</a>
</div>
<div class="col-sm-4 mb-4">
<a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../assets/images/portfolio/06.jpg">
<img class="rounded img-fluid" src="../assets/images/portfolio/06.jpg" alt="" />
</a>
</div>
</div>
Javascript
<script src="vendors/bigpicture/BigPicture.js"> </script>