artemsemkin

Rhye HTML5 Template: Lightboxes

Apr 13th, 2021 (edited)
320
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- Example #1: Animated Image(s) in Lightbox -->
  2. <div class="js-gallery">
  3.   <!-- gallery image 1 -->
  4.   <a href="img/assets/project1/img-1-2.jpg" data-size="900x1350" data-title="Long Road">
  5.     <div class="lazy">
  6.       <img data-src="img/assets/project1/img-1-2_thumb.jpg" src="#" alt="" width="450" height="675"/>
  7.     </div>
  8.   </a>
  9.   <!-- - gallery image 1 -->
  10.   <!-- gallery image 2 -->
  11.   <a href="img/assets/project1/img-1-3.jpg" data-size="900x1350" data-title="Before the Adventure">
  12.     <div class="lazy">
  13.       <img data-src="img/assets/project1/img-1-3_thumb.jpg" src="#" alt="" width="450" height="675"/>
  14.     </div>
  15.   </a>
  16.   <!-- - gallery image 2 -->
  17. </div>
  18. <!-- // -->
  19.  
  20. <!-- Example #2: Image(s) in Lightbox -->
  21. <a class="js-album" href="#">
  22.   <span>Click Me</span>
  23.   <div class="js-album__items d-none">
  24.     <img src="#" data-album-src="img/assets/albumImages/album-1_1.jpg" width="1920" height="1920" data-title="Caption #1" alt=""/>
  25.     <img src="#" data-album-src="img/assets/albumImages/album-1_2.jpg" width="1920" height="1920" data-title="Caption #2" alt=""/>
  26.   </div>
  27. </a>
  28. <!-- // -->
  29.  
  30. <!-- Example #3: Embedded iFrame in Lightbox -->
  31. <div class="js-gallery">
  32.   <a href="https://artemsemkin.com/rhye/wp/" data-title="Embedded iFrame">
  33.     <div class="lazy">
  34.       <img data-src="img/assets/project1/img-1-2_thumb.jpg" src="#" alt="" width="450" height="675"/>
  35.     </div>
  36.   </a>
  37. </div>
  38. <!-- // -->
  39.  
  40. <!-- Example #4: Embedded Video in Lightbox -->
  41. <a class="js-album" href="#">
  42.   <span>Open Video</span>
  43.   <div class="js-album__items d-none">
  44.     <img src="#" data-album-src="https://vimeo.com/177110108" width="1920" height="1920" data-title="Vimeo Video" alt=""/>
  45.   </div>
  46. </a>
  47. <!-- // -->
RAW Paste Data