GLightbox Gallery Feature Demo #

This post demonstrates the new gallery shortcode functionality using GLightbox. Galleries allow you to group related images together and navigate through them in the lightbox viewer.

Gallery 1: Conference Photos #

Here’s a gallery of conference photos. Click any image to open the lightbox, then use arrow keys or on-screen controls to navigate between images in the gallery.

Conference Venue

Speaker Session

Networking Break

Gallery 2: Development Screenshots #

This is a separate gallery showing development environment screenshots. Notice how these images are grouped separately from the conference gallery above.

How It Works #

The gallery shortcode system consists of two parts:

Gallery Container - Wraps images in a responsive grid layout
Gallery Images - Individual images that belong to the same gallery group

Usage Example #

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{{< gallery name="my-gallery" >}}
  {{< gallery-img
      src="/path/to/image.jpg"
      title="Image Title"
      caption="Detailed description shown in lightbox"
      pos="bottom" >}}
  {{< gallery-img
      src="/path/to/another.jpg"
      title="Another Image"
      caption="More details here" >}}
{{< /gallery >}}

Features #

Grouped Navigation: Images in the same gallery can be navigated using arrow keys or on-screen controls
Separate Galleries: Multiple galleries on the same page remain independent
Responsive Grid: Automatically adjusts to screen size
Captions & Titles: Each image can have a title (shown below thumbnail) and detailed caption (shown in lightbox)
Flexible Positioning: Caption position in lightbox can be customized (top, bottom, left, right)