Lightbox Content Popup 6.0 turns Joomla articles or manually created image cards into responsive galleries with a modern vanilla JavaScript lightbox. Visitors can browse formatted content, videos, maps, and external pages without leaving the current page.

Version 6.0 highlights

• Joomla article and manual card content sources
• Responsive grid, horizontal row, and vertical stack layouts
• Light, Dark, Glass, and Brand card themes
• Light, Dark, and Brand lightbox themes
• Zoom, Fade, and Slide up opening effects
• YouTube, Vimeo, Google Maps, iframe, and formatted HTML content
• Previous and next controls, counter, loop, and keyboard navigation
• Popup-corner or window-corner close button
• Optional shareable URL hash for every gallery item
• Responsive sizing, internal scrolling, scroll-position restoration, and reduced-motion support
• No jQuery, FancyBox, or animate.css dependency

Requirements

• Joomla 4, 5, or 6
• PHP 8.0 or newer
• A modern browser with JavaScript enabled

Important: Joomla 3 is not supported by version 6.0. Continue using the legacy 5.x package on Joomla 3 sites.

New installation

1. Download mod_lightbox_popup_6.0.zip.
2. Sign in to the Joomla administrator.
3. Open System > Install > Extensions.
4. Use Upload Package File and select the downloaded zip.
5. Wait for the installation success message.

Create and publish a module

1. Open Content > Site Modules.
2. Select New, then choose Lightbox Content Popup.
3. Configure Content Source, Gallery Cards, and Lightbox.
4. Select a template position and assign the required menu items.
5. Set Status to Published. Hiding the standard module title is recommended.
6. Save and check the assigned page on the front end.

Updating from version 5.x

Install version 6.0 over the existing module using Joomla's extension installer. Joomla keeps existing module instances and parameters where possible. Version 6.0 maps basic legacy orientation and animation values, but its front-end engine and settings are new.

After updating, open each module instance, review its Content Source, Gallery Cards, and Lightbox tabs, then save it once. Clear Joomla and browser caches to remove old FancyBox assets.

Choose Joomla articles in the Content Source tab to build the gallery from one or more categories.

• Category: Select one or multiple com_content categories.
• Sort by: Published date, created date, modified date, article ordering, hits, or random.
• Sort direction: Ascending or descending. This setting is hidden for random sorting.
• Number of articles: Select between 1 and 24 items.
• Show article image: Uses the article Intro Image on the gallery card.
• Show article title: Displays the title on the card when it is not presented as an image overlay.
• Show intro text: Adds a shortened article introduction to the card.
• Show read more hint: Adds a configurable call-to-action below the introduction.
• Strip HTML from intro: Produces clean plain-text card descriptions.

Content inside the lightbox

The popup includes the article Full Article Image when available, falling back to the Intro Image. It then renders the prepared intro and full text, including Joomla content-plugin output. Long articles scroll inside the popup while the page behind it remains fixed.

Tip: Give every article an Intro Image, useful alt text, a concise introduction, and enough full text to make the popup valuable.

Choose Manual cards when the gallery should not depend on Joomla articles. Add, remove, and reorder cards using the repeatable Manual Cards field.

Fields for each card

• Card image: Select a thumbnail from Joomla Media Manager.
• Card caption: Enter the card label and accessible popup title.
• Popup content type: Choose Article / HTML, YouTube, Vimeo, Google Maps, or Iframe URL.
• Popup content: Enter formatted HTML or the URL/location required by the selected type.

Article / HTML content

Enter headings, paragraphs, lists, links, and other safe HTML. Joomla content plugins are prepared before the content is shown. Use this mode for product details, staff profiles, services, portfolios, and promotional information.

YouTube and Vimeo

Paste a normal video page URL. Version 6.0 converts supported YouTube and Vimeo URLs into responsive 16:9 embeds. Video popups hide the content title bar and render edge to edge.

Google Maps

Enter a place name, address, or compatible Google Maps URL. The module creates an embeddable map view that fills the popup.

Iframe URL

Enter a complete HTTPS URL. The destination must permit iframe embedding through its security headers. Sites that send restrictive X-Frame-Options or Content-Security-Policy headers cannot be displayed.

The Gallery Cards tab controls the presentation before a visitor opens the lightbox.

Layout

• Responsive grid: Creates 2 to 6 equal columns on desktop, two columns on tablets, and one column on small phones.
• Horizontal strip: Places cards in one auto-fitting row without a horizontal scrollbar. Cards wrap on tablets and stack on phones.
• Vertical stack: Displays one full-width card per row.
• Grid columns: Controls desktop columns for the Responsive grid layout.

Theme and dimensions

• Card theme: Light, Dark, Glass, or Brand.
• Accent colour: Used by highlights, links, and brand styling.
• Card radius: Controls rounded corners from 0 to 32 pixels.
• Card width: Preferred card width, especially useful for row layouts.
• Card gap: Space between cards. CSS units such as px and rem are accepted.
• Card height: Optional fixed card height. Leave empty for automatic height.

Images and hover

• Image area height: Optional custom media height.
• Image fit: Cover, Contain, or Fill.
• Image aspect ratio: Auto, Square, Standard 4:3, Widescreen 16:9, or Classic 3:2.
• Zoom on hover: Enables a lightweight image scale effect.
• Zoom scale: Controls the hover magnification.
• Caption overlay: Displays the caption over the image on hover.
• Overlay colour and opacity: Controls caption-overlay readability.

The Lightbox tab controls the popup container, backdrop, animation, close control, and gallery navigation.

• Lightbox theme: Light, Dark, or Brand.
• Open effect: Zoom, Fade, or Slide up. Reduced-motion browser preferences disable unnecessary animation.
• Close button position: Place it at the popup top-right or the browser window top-right.
• Lightbox width: Desktop target width from 320 to 1200 pixels. The popup automatically shrinks to fit smaller screens.
• Lightbox max height: Maximum desktop height from 240 to 900 pixels. Overflowing content scrolls inside the popup.
• Backdrop opacity: Controls how strongly the page behind the popup is darkened.
• Backdrop blur: Adds 0 to 24 pixels of visual blur behind the popup.
• Title bar: Show or hide the title for HTML and article content.
• Gallery counter: Displays the current position, such as 2 / 6.
• Loop previous / next: Moves from the final item back to the first and vice versa.
• Keyboard navigation: Uses Left Arrow, Right Arrow, and Escape.

Video, map, and iframe popups automatically hide the title bar and remove body padding so embedded media runs edge to edge. The close control remains available above the media.

Shareable URL hash

Enable Shareable URL hash to give every item a direct browser URL. Opening an item updates the current address without navigating away or moving the page.

The default format is:

#lightbox-MODULE-ID-ITEM-NUMBER

Example: #lightbox-189-2 opens item 2 in module 189. Loading a page with this hash automatically opens the matching item. Closing the popup removes the lightbox hash without changing the page scroll position.

• URL hash prefix: Replace lightbox with a short URL-safe word for your project.
• Use a unique prefix when multiple lightbox systems exist on the same page.
• Changing a module ID or reordering cards changes the generated item URLs.

Navigation behaviour

Previous and next controls are shown when the gallery contains more than one item. On desktop they sit outside the popup content. On smaller screens they move inside safe bottom corners so they cannot overflow the viewport. Keyboard navigation and looping can be enabled independently.

Scroll locking

While the popup is open, the page is fixed at its current position and scrollbar width is compensated to avoid layout movement. Closing restores the exact horizontal and vertical scroll position and returns keyboard focus to the card that opened the popup.

The Typography & Colors tab provides detailed card styling that can override or complement the selected card theme.

• Card background: Set a solid or supported RGBA background.
• Card border colour: Choose the border colour.
• Card border width: Set 0 to 8 pixels.
• Card border radius: Enter a CSS size such as 16px or 1rem.
• Text colour: Controls card caption and title text.
• Text size: Enter a CSS size such as 14px or 1rem.
• Text weight: Normal, Semi-bold, or Bold.
• Font family: System/custom, Inter, Poppins, Montserrat, or Open Sans.
• Custom font name: Used when System/custom is selected. The font must already be loaded by the template or another extension.

Card content padding

Use the four labelled Top, Right, Bottom, and Left inputs. When the control is Linked, changing one value applies it to all sides. Select Unlinked for individual values. Available units are px, rem, em, and percent.

Accessibility tip: Keep normal text contrast at 4.5:1 or higher and avoid very small type. Test Light, Dark, Glass, and Brand themes against the actual template background.

• Lazy load images: Defers off-screen gallery images until the browser needs them. Recommended for most galleries.
• Show empty message: Displays a status message when no article or manual card is available.
• Empty message: Customises the message shown for an empty gallery.
• Module Class Suffix: Adds a class suffix for template-level styling.
• Custom CSS: Adds module-specific CSS without editing extension files.
• Alternative Layout: Selects an installed template override or module layout.

Custom CSS guidance

Scope overrides to the module ID to avoid affecting other instances. For example:

#jx-lbp-123 .jx-lbp-card { box-shadow: none; }

Replace 123 with the module ID. Avoid changing portal positioning, scroll-lock classes, or accessibility states unless you have tested desktop, tablet, mobile, keyboard, and reduced-motion behaviour.

Performance

Version 6.0 loads one CSS file and one deferred vanilla JavaScript file. It does not load jQuery, FancyBox, or animate.css. Use appropriately sized thumbnails and modern image formats for the best page speed.

Article Grid

Joomla articles, three-column Responsive grid, Light cards, Light popup, Zoom effect, article hero images, long-form content, and URL hashes.

Manual Cards

Four manual HTML cards with hover overlays, formatted content, counter, loop, and keyboard controls.

YouTube Strip

Three auto-fitting cards in a horizontal row, Brand theme, Slide up effect, and edge-to-edge YouTube video embeds.

Glass Gallery

Four square Glass cards in a responsive grid with a blue accent and Slide up effect.

Dark Cinema

Dark cards, Dark popup, Fade effect, richer formatted content, stronger backdrop, and the close button positioned at the browser window top-right.

Google Maps

Three auto-fitting location cards with responsive, edge-to-edge Google Maps embeds.

Recommended first setup: Article Grid, 3 columns, Light cards, Light lightbox, Zoom effect, popup-corner close button, counter and keyboard navigation enabled.

The gallery is empty

For article mode, confirm that categories are selected and contain published articles visible to the current access level and language. For manual mode, add at least one complete card.

An image is missing

Open the card or article and select the image again in Media Manager. Confirm that the file exists, is readable, and is a valid image rather than a damaged upload. Clear Joomla image caches after replacing a file.

A video does not play

Use a complete public YouTube or Vimeo page URL. Private, age-restricted, region-restricted, or embedding-disabled videos may not play in an iframe.

An iframe page is blank

The remote website may block iframe embedding through X-Frame-Options or Content-Security-Policy. This restriction cannot be bypassed by the module.

The old FancyBox design still appears

Confirm that version 6.0 is installed, then clear Joomla page/cache data, CDN cache, template optimisation cache, and browser cache. The v6.0 package contains no FancyBox or animate.css assets.

The page moves when the popup closes

Version 6.0 stores and restores the exact page position. If movement remains, temporarily disable template smooth-scroll, page-builder animation, and third-party popup scripts to identify a conflicting scroll handler.

The popup is too large on mobile

Remove custom CSS overrides and test again. Version 6.0 limits the popup to the viewport, uses internal content scrolling, moves navigation controls into safe positions, and supports mobile safe-area insets.

URL hash does not open an item

Confirm that Shareable URL hash is enabled and that the URL contains the current module ID, item number, and configured prefix. Save the module after changing the prefix.

Need help?

Documentation: joomlax.com/documentation/lightbox-content-popup
Support: support.joomlax.com