Package

GalleryLab Demo

GalleryLab is a lightweight image gallery component for Joomla 5 and 6. Create responsive photo galleries with a built-in lightbox, hover effects, and flexible display options — clean, fast, and dependency-free.

Key Features

Responsive grid layout — configurable column count (2–6) with automatic breakpoints for tablet and mobile
Vanilla JS lightbox — full-screen image viewer with keyboard navigation, touch swipe, image counter, and focus trapping
Lightbox captions — captions (or image titles as fallback) displayed directly below the image in the lightbox
Hover effects — choose from Zoom, Fade, or None; image titles appear in an overlay on hover
Multiple galleries — create and manage any number of galleries, each with its own settings
Gallery listing view — browsable listing of all galleries as cards with cover images and image counts
Shortcode embedding — embed any gallery in articles using {gallerylab ID}
Quick Add — import all images from a Media Manager folder into a gallery in one step
Image links — optionally link any image to an external URL instead of opening in the lightbox
Drag-and-drop ordering — reorder images within a gallery using drag and drop in the admin
Lazy loading — native browser lazy loading on all images for faster page loads
Style options — configure grid gap, border radius, hover effect, and overlay colours from the admin

Getting Started

Viewing a Gallery (Front-end)

Click View Front-end Demo above to browse the sample galleries
Click any image to open it in the lightbox
Use the arrow buttons or keyboard arrow keys to move between images
Swipe left or right on mobile to navigate
Press Escape or click the × button to close the lightbox
Click Back to Galleries to return to the gallery listing

Managing Galleries (Admin)

Click Open Admin Panel and log in with the demo credentials
Go to Components > GalleryLab
The Galleries list shows all galleries with their title, image count, and status
Click a gallery title to edit it, or click Manage Images to add and reorder images

Creating a Gallery

Click New from the Galleries list
Enter a Title (e.g. “Hawdon Valley”, “Wellington Portfolio”)
Optionally add a Description — shown above the images on the frontend
Set a Cover Image — displayed on the gallery listing page
Set the Columns count, or leave it at the global default
Click Save

Adding Images

Go to Components > GalleryLab > Images and click New
Select the gallery, then choose an image from the Media Manager
Add a Title (shown on hover in the grid), Alt Text (for accessibility), and optional Caption (shown in the lightbox)
Click Save
Drag images in the list to reorder them — the frontend reflects the saved order

Quick Add from a Folder

Upload images to a folder via the Joomla Media Manager first
Open the gallery and click Quick Add
Select the folder from the dropdown
Click Import Images — all images in the folder are added in one step with titles generated from filenames

Displaying a Gallery on the Frontend

Go to Menus and create a new menu item
Choose Gallery to display a single gallery, or Galleries to show the full listing
For a single gallery, select which gallery to display from the dropdown
Save and visit the page
Alternatively, add {gallerylab 1} to any article to embed a gallery inline (replacing 1 with the gallery ID)

← Back to Demos