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'}

LightBox
<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>