Modular elements

Lightbox

For detail documentation, Big Picture documentation ⟶

Bigpicture Image

BigPictures are integrated into Hideaway. 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 mt-5">
  <div class="col-sm-6">
    <a href="#!" data-caption="caption" data-bigpicture='{"imgSrc":"../assets/images/feature/12.jpg"}'>
      <img class="img-thumbnail mb-4" src="../assets/images/feature/12.jpg" alt="" />
      <a class="btn btn-primary" href="#!" data-bigpicture='{"imgSrc":"../assets/images/feature/12.jpg"}' data-caption="caption">
        LightBox
      </a></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/feature/1.jpg">
      <img class="rounded img-fluid" src="../assets/images/feature/1.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/feature/2.jpg">
      <img class="rounded img-fluid" src="../assets/images/feature/2.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/feature/7.jpg">
      <img class="rounded img-fluid" src="../assets/images/feature/7.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/feature/10.jpg">
      <img class="rounded img-fluid" src="../assets/images/feature/10.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/feature/5.jpg">
      <img class="rounded img-fluid" src="../assets/images/feature/5.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/feature/6.jpg">
      <img class="rounded img-fluid" src="../assets/images/feature/6.jpg" alt="" />
    </a>
  </div>
</div>

Javascript

<script src="vendors/bigpicture/BigPicture.js"> </script>