Lightbox

Enable

Image and video lightbox powered by GLightbox. Requires the JS module in the child theme.

functions.php JS module

// Add to the softedge_js_components filter:
$components[] = 'lightbox';

main.scss CSS — required

GLightbox CSS is not included in the parent theme bundle. Import it in the child main.scss or load the CDN stylesheet.

// SCSS import (if glightbox is in node_modules)
@import "glightbox/dist/css/glightbox.min.css";

Basic Usage

Auto-initialized — just add the .glightbox class to any link.

.glightbox

<a href="full-size.jpg" class="glightbox">
  <img src="thumbnail.jpg" alt="...">
</a>

Gallery

Group images into a navigable gallery with data-gallery. All items sharing the same gallery name can be swiped through.

data-gallery

<a href="img-1.jpg" class="glightbox" data-gallery="gallery1">
  <img src="thumb-1.jpg" alt="...">
</a>
<a href="img-2.jpg" class="glightbox" data-gallery="gallery1">
  <img src="thumb-2.jpg" alt="...">
</a>
<a href="img-3.jpg" class="glightbox" data-gallery="gallery1">
  <img src="thumb-3.jpg" alt="...">
</a>

Video

Link directly to a YouTube or Vimeo URL. Videos autoplay when opened.

YouTube / Vimeo

Point the href to any YouTube or Vimeo URL. GLightbox detects the provider automatically.

// YouTube
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="glightbox">
  Watch video
</a>

// Vimeo
<a href="https://vimeo.com/115041822" class="glightbox">
  Watch video
</a>

// Local video
<a href="video.mp4" class="glightbox">
  Watch video
</a>

Captions & Descriptions

Add title and description via data-glightbox attributes.

data-glightbox

<a href="image.jpg" class="glightbox"
   data-glightbox="title: My Title; description: Some description text.">
  <img src="thumb.jpg" alt="...">
</a>

Configuration

GLightbox is auto-initialized with sensible defaults. No extra setup needed.

Default options

Option Value Description touchNavigation true Swipe to navigate on touch devices loop true Loop back to first slide after last autoplayVideos true Auto-play videos when opened

// Initialized automatically in core JS:
GLightbox({
  touchNavigation: true,
  loop: true,
  autoplayVideos: true,
});

On this page