BigPicture

These modular elements can be readily used and customized in every layout across pages.

For more details see BigPicture documentation

Bigpicture Image

BigPictures are integrated into Sparrow. 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">
  <div class="col-6 col-sm-4 mb-4"><a href="#!" data-caption="caption" data-bigpicture='{"imgSrc":"../../assets/img/gallery/02-f.jpg"}'><img class="img-thumbnail" src="../../assets/img/gallery/02.jpg" alt="" /></a></div>
  <div class="col-6 col-sm-4 mb-4"><a class="btn btn-primary btn-sm" href="#!" data-bigpicture='{"imgSrc":"../../assets/img/gallery/02-f.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 col-lg-3 mb-4"><a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../../assets/img/gallery/01-f.jpg"><img class="rounded img-fluid" src="../../assets/img/gallery/01.jpg" alt="" /></a></div>
  <div class="col-sm-4 col-lg-3 mb-4"><a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../../assets/img/gallery/02-f.jpg"><img class="rounded img-fluid" src="../../assets/img/gallery/02.jpg" alt="" /></a></div>
  <div class="col-sm-4 col-lg-3 mb-4"><a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../../assets/img/gallery/03-f.jpg"><img class="rounded img-fluid" src="../../assets/img/gallery/03.jpg" alt="" /></a></div>
  <div class="col-sm-4 col-lg-3 mb-4"><a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../../assets/img/gallery/04-f.jpg"><img class="rounded img-fluid" src="../../assets/img/gallery/04.jpg" alt="" /></a></div>
  <div class="col-sm-4 col-lg-3 mb-4"><a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../../assets/img/gallery/05-f.jpg"><img class="rounded img-fluid" src="../../assets/img/gallery/05.jpg" alt="" /></a></div>
  <div class="col-sm-4 col-lg-3 mb-4"><a href="#!" data-caption="caption" data-bigpicture='{"gallery":"#image_gallery"}' data-bp="../../assets/img/gallery/06-f.jpg"><img class="rounded img-fluid" src="../../assets/img/gallery/06.jpg" alt="" /></a></div>
</div>
Javascript
<script src="vendors/bigpicture/BigPicture.js"> </script>

Video

YouTube and Vimeo videos can be used with bigpicture by just providing the video ID through data-bigpicture.

Html
<div class="row gx-2">
  <div class="col-auto">
    <button class="btn btn-primary btn-sm" data-bigpicture='{"ytSrc":"FCPdIvXo2rU"}'>YouTube video</button>
  </div>
  <div class="col-auto">
    <button class="btn btn-primary btn-sm" data-bigpicture='{"vimeoSrc":"58558497"}'>Vimeo video</button>
  </div>
</div>