Examples and instructions on how to add lightbox functionality to your image or video links.
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
<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>
// 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>
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox