Lightbox

Examples and instructions on how to add lightbox functionality to your image or video links.

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

image
Image
image
Simple Caption
image
Advanced Caption

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

// 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

image
Vimeo
image
YouTube
image
HTML5
// 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>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image