# Galleries & Albums

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

# Markup: Images Gallery

<!-- Gallery -->
<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 -->
  <!-- gallery image 3 -->
  <a href="img/assets/project1/img-1-4.jpg" data-size="900x1350" data-title="Wrong Path">
    <div class="lazy">
      <img data-src="img/assets/project1/img-1-4_thumb.jpg" src="#" alt="" width="450" height="675"/>
    </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 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.

# Markup: Video Gallery

<!-- Gallery -->
<div class="js-gallery">
  <!-- gallery video 1 (HTML5 self-hosted) -->
  <a href="img/assets/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/project1/img-1-2.jpg" data-size="900x1350" data-title="Long Road">
    ...
  </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 1 -->
  <a href="img/assets/project1/img-1-2.jpg" data-size="900x1350" data-title="Long Road">
    ...
  </a>
  <!-- - gallery image 1 -->

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

# <a> Attributes

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

Note

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

# Markup: Photo Albums

The main difference between albums and galleries is that in albums you can hold any amount of photos inside a single <a> link. Also albums don't require to specify data-size attribute of the opening image because there is no opening animation.

<!-- Album -->
<a class="js-album" href="#">
  <!-- album photos (hidden visually by "d-none" class) -->
  <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=""/>
    <img src="#" data-album-src="img/assets/albumImages/album-1_3.jpg" width="1920" height="1920" data-title="Caption #3" alt=""/>
    <img src="#" data-album-src="img/assets/albumImages/album-1_4.jpg" width="1920" height="1920" data-title="Caption #4" alt=""/>
    <img src="#" data-album-src="img/assets/albumImages/album-1_5.jpg" width="1920" height="1920" data-title="Caption #5" alt=""/>
    <img src="#" data-album-src="img/assets/albumImages/album-1_6.jpg" width="1920" height="1920" data-title="Caption #6" alt=""/>
  </div>
  <!-- - album photos (hidden visually by "d-none" class) -->
<!-- - Album -->

# <img> Attributes

src – leave it as #
data-album-src – URL of the full size image.
data-title – optional caption that will be added to the slide in the PhotoSwipe gallery.

← Header Google Map →