Kinsey

# Lightbox Gallery

Whenever you want to create a single lightbox or a gallery, use the js-gallery class as the outer wrapper. Inside that wrapper, store all the links to the media content you wish to populate in the gallery.

<!-- Gallery -->
<div class="js-gallery">
  <!-- gallery image 1 -->
  <a href="img/assets/projects/project1/img-1-2.jpg" data-size="900x1350" data-title="Title #1">
    <div class="lazy-wrapper">
      <div class="lazy">
        <img data-src="img/assets/projects/project1/img-1-2_thumb.jpg" src="#" alt="" width="450" height="675"/>
      </div>
    </div>
  </a>
  <!-- - gallery image 1 -->
  
  <!-- gallery image 2 -->
  <a href="img/assets/projects/project1/img-1-3.jpg" data-size="900x1350" data-title="Title #2">
    <div class="lazy-wrapper">
      <div class="lazy">
        <img data-src="img/assets/projects/project1/img-1-3_thumb.jpg" src="#" alt="" width="450" height="675"/>
      </div>
    </div>
  </a>
  <!-- - gallery image 2 -->
  
  <!-- gallery image 3 -->
  <a href="img/assets/projects/project1/img-1-4.jpg" data-size="900x1350" data-title="Title #3">
    <div class="lazy-wrapper">
      <div class="lazy">
        <img data-src="img/assets/projects/project1/img-1-4_thumb.jpg" src="#" alt="" width="450" height="675"/>
      </div>
    </div>
  </a>
  <!-- - gallery image 3 -->
</div>
<!-- - Gallery -->

# <a> Attributes

  • href – URL of the full-size image.
  • data-size – mandatory width and height of the full-size image.
  • data-title – optional caption that will be added to the slide in the PhotoSwipe gallery.

Note

data-size is a mandatory attribute! This size is used for the correct animation effect when opening the gallery. The gallery will fail if you don't specify the actual image size.

# <img> Attributes

  • src – leave it as # in case you use lazy loading.
  • data-src – URL of the thumbnail image.
<!-- Gallery -->
<div class="js-gallery">
  <!-- gallery video 1 (HTML5 self-hosted) -->
  <a href="img/assets/section/sectionVideo/video-1.mp4" data-autoplay="data-autoplay">
    ...
  </a>
  <!-- gallery video 1 (HTML5 self-hosted) -->

  <!-- Mixing Videos & Images is OK -->

  <!-- gallery image 1 -->
  <a href="img/assets/projects/project1/img-1-2.jpg" data-size="900x1350" data-title="Title #1">
    ...
  </a>
  <!-- - gallery image 1 -->

  <!-- gallery video 1 (Vimeo) -->
  <a href="https://vimeo.com/177110108" data-autoplay="data-autoplay">
    ...
  </a>
  <!-- gallery video 1 (Vimeo) -->
  
  <!-- gallery video 1 (YouTube) -->
  <a href="https://youtube.com/watch?v=1La4QzGeaaQ" data-autoplay="data-autoplay">
    ...
  </a>
  <!-- gallery video 1 (YouTube) -->

  <!-- Mixing Videos & Images is OK -->

  <!-- gallery image 2 -->
  <a href="img/assets/projects/project1/img-1-3.jpg" data-size="900x1350" data-title="Title #2">
    ...
  </a>
  <!-- - gallery image 2 -->
</div>
<!-- - Gallery -->

# <a> Attributes

  • href – URL of the media you want to embed in the gallery. Supported URLs: YouTube, Vimeo, HTML5 video.
  • data-autoplay – try to autoplay the video on gallery open.

Note

Video autoplay function may be restricted by the browser's policy.

# Showcase

  • 📄 012-landing-page-2.html
  • 📄 013-portfolio-details-masthead-boxed-horizontal.html
  • 📄 015-portfolio-details-masthead-boxed-vertical.html
  • 📄 016-portfolio-details-masthead-boxed-vertical.html
  • 📄 017-portfolio-details-masthead-fullwidth-horizontal.html
  • 📄 020-portfolio-details-masthead-fullwidth-horizontal.html
  • 📄 021-portfolio-details-masthead-boxed-vertical.html
  • 📄 023-portfolio-details-masthead-fullwidth-horizontal.html
  • 📄 034-services.html

← Counters Up →