@@include('docs/_sidebar.html', {"page": "elements-lightbox"})

Instructions

Use data-glightbox attribute to enable lightbox functionality on your image and video links.

To group images together, use data-gallery="group-name" attribute. This will enable navigation between images that have the same attribute value.

Image & Caption

This div will be used as the image description. HTML is supported.

View example's code

// Image
<a href="#" data-glightbox data-gallery="g1">Link</a>

// Image & Simple Caption
<a href="#" data-glightbox="title: Title; description: Description" data-gallery="g1">Link</a>

// Image & Advanced Caption
<a href="#" data-glightbox="title: Title; description: .caption1" data-gallery="g1">Link</a>
<div class="glightbox-desc caption1">
  <p class="mb-0">This div will be used as the image description. HTML is supported.</p>
</div>

Video

View example's code

// Vimeo
<a href="Vimeo Link" data-glightbox data-gallery="g2">Link</a>

// YouTube
<a href="YouTube Link" data-glightbox data-gallery="g2">Link</a>

// HTML5 video
<a href=".mp4 Link" data-glightbox data-gallery="g2">Link</a>

// PDF
<a href=".pdf Link" data-glightbox="height: 100vh">Link</a>

Lightbox

Instructions

Image & Caption

Image

Simple Caption

Advanced Caption

Video

Vimeo

YouTube

HTML5