Rhye HTML5 Template: Lightboxes

<!-- Example #1: Animated Image(s) in Lightbox -->
<div class="js-gallery">
  <!-- gallery image 1 -->
  <a href="img/assets/project1/img-1-2.jpg" data-size="900x1350" data-title="Long Road">
    <div class="lazy">
      <img data-src="img/assets/project1/img-1-2_thumb.jpg" src="#" alt="" width="450" height="675"/>
    </div>
  </a>
  <!-- - gallery image 1 -->
  <!-- gallery image 2 -->
  <a href="img/assets/project1/img-1-3.jpg" data-size="900x1350" data-title="Before the Adventure">
    <div class="lazy">
      <img data-src="img/assets/project1/img-1-3_thumb.jpg" src="#" alt="" width="450" height="675"/>
    </div>
  </a>
  <!-- - gallery image 2 -->
</div>
<!-- // -->

<!-- Example #2: Image(s) in Lightbox -->
<a class="js-album" href="#">
  <span>Click Me</span>
  <div class="js-album__items d-none">
    <img src="#" data-album-src="img/assets/albumImages/album-1_1.jpg" width="1920" height="1920" data-title="Caption #1" alt=""/>
    <img src="#" data-album-src="img/assets/albumImages/album-1_2.jpg" width="1920" height="1920" data-title="Caption #2" alt=""/>
  </div>
</a>
<!-- // -->

<!-- Example #3: Embedded iFrame in Lightbox -->
<div class="js-gallery">
  <a href="https://artemsemkin.com/rhye/wp/" data-title="Embedded iFrame">
    <div class="lazy">
      <img data-src="img/assets/project1/img-1-2_thumb.jpg" src="#" alt="" width="450" height="675"/>
    </div>
  </a>
</div>
<!-- // -->

<!-- Example #4: Embedded Video in Lightbox -->
<a class="js-album" href="#">
  <span>Open Video</span>
  <div class="js-album__items d-none">
    <img src="#" data-album-src="https://vimeo.com/177110108" width="1920" height="1920" data-title="Vimeo Video" alt=""/>
  </div>
</a>
<!-- // -->