Get Started

Lightbox Content Popup is a powerful and flexible Joomla module that allows you to create beautiful lightbox popup galleries with content from Joomla articles or manually added items. Perfect for showcasing portfolios, image galleries, product displays, and interactive content presentations.

Key Highlights:

• Full Joomla 4, 5 & 6 Compatibility
• Dual Content Sources (Joomla Articles & Manual Content)
• Professional Lightbox Popup System
• 50+ Animation Effects
• Complete Style Control
• Advanced Image Handling
• Keyboard Navigation Support
• Fully Responsive Design
• Lazy Loading Support
• Modern WebAssetManager Support

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package from your account.

System Requirements

• Joomla Version: 4.x, 5.x, or 6.x
• PHP Version: 8.0 or higher

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4/5/6: Go to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete. The module will appear in Content > Site Modules.

Enabling the Module

After installation, navigate to Extensions > Modules, search for "Lightbox Content Popup", and click on it to enable and configure the module.

Access the module settings by navigating to Extensions > Modules, and find Lightbox Content Popup in the list.

Content Source

• Content Source: Choose where to get your content from. Select "Joomla Articles" to pull from your article database based on categories and filters, or "Manual Contents" to manually add custom items with images and text.

Joomla Articles Configuration

• Category: Select one or more categories from which to pull articles. You can select multiple categories.
• Order Results: Choose how articles are sorted. Options include Published Date, Created Date, Modified Date, Ordering, Hits, or Random.
• Order Direction: Select Ascending or Descending order for the selected ordering method.
• Number of Items: Set how many articles to display in the lightbox gallery. Default: 5
• Show Article Image: Display the article's intro image (the image field in Joomla article editor). When disabled, images will be hidden even if they exist in the article.
• Show Article Title: Display the article title below the image (or at the top if no image). When disabled, titles will be hidden.
• Show Intro Text: Display the article's intro text (the text from the article's 'Intro Text' field in the editor). The text will be automatically truncated to fit the container.
• Show Read More Link: Display a 'Read More' link below each item. When enabled, users can click this link to open the full article in the lightbox popup.
• Read More Link Text: Customize the text displayed on the 'Read More' link. Common examples: 'Read More', 'Learn More', 'View Details', or 'Continue Reading'. Leave empty to use default text.
• Strip HTML from Intro Text: Remove HTML formatting from intro text to display plain text only. Enable this for cleaner text display, or disable to preserve formatting like bold, italic, and links.

Manual Content Configuration

• Display Mode: Choose what to show for manually added content items. 'Both' shows images and captions, 'Image Only' hides captions, and 'Caption Only' shows text without images.
• Manual Content Items: Click the 'Add' button to create new items. Each item can have an image, caption, content that appears in the lightbox popup, and support for YouTube, Vimeo, or Google Maps links.

Popup Configuration

• Popup Box Height: Set the height of the lightbox popup window in pixels. This controls how tall the popup content area will be. Default: 400
• Popup Box Width: Set the width of the lightbox popup window in pixels. This controls how wide the popup content area will be. Default: 600
• Animation Effect: Choose an animation effect that plays when the lightbox popup opens. Select from 50+ effects including Fading, Zooming, Bouncing, Sliding, Attention Seekers, Light Speed, and Special effects. Select 'None' to disable animations.
• Animation Duration: Control how fast or slow the animation plays. Options include Normal, Slow, Slower, Fast, and Faster. This setting only applies when an animation effect is selected.
• Lightbox Title Bar: Control the black title bar at the bottom of the lightbox popup. 'Inside' shows it within the popup, 'Outside' below it, 'Over' as an overlay, or 'None' to hide it completely.
• Overlay Background Opacity: Control the darkness of the background overlay that appears behind the popup. Values range from 0 (transparent) to 1 (fully opaque). Lower values create a lighter overlay. Default: 0.3
• Keyboard Navigation: Enable keyboard shortcuts for better accessibility. When enabled, users can press ESC to close the popup and use arrow keys to navigate between items. Default: Enabled
• Show Empty State Message: Display a message when no items are found. This helps users understand why the gallery appears empty. Default: Enabled
• Empty State Message: Customize the message shown when no items are available. Make it helpful and user-friendly. Default: No items found.

Customize the visual appearance of your lightbox gallery with comprehensive styling options.

Layout Options

• Display Orientation: Choose how items are arranged. Horizontal displays items in a row (side by side), while Vertical stacks them in a column.
• Container Width: Set the maximum width for each item container. Use CSS units like px, %, rem, or em. Example: '250px', '20%', or '15rem'. Default: 200px
• Container Height: Set a fixed height for all item containers to create uniform rows. Use CSS units like '300px', '20rem', or leave empty for automatic height based on content.
• Container Gap: Set the spacing between item containers. This creates consistent gaps between items. Use CSS units like px, rem, or em. Example: '1rem', '15px', or '20px'. Default: 1rem
• Horizontal Alignment: Control how items are aligned horizontally. 'Center' centers items, 'Left' aligns to the left, 'Right' to the right, and spacing options distribute items evenly.
• Vertical Alignment: Control how items align vertically when they have different heights. 'Top' aligns to the top, 'Center' centers them, 'Bottom' aligns to the bottom, and 'Stretch' makes all items the same height.

Container Styling

• Container Padding: Set the internal spacing inside each container. Click the link icon to lock/unlock all sides. When locked, changing one value updates all sides. Default: 10px on all sides
• Background Color: Choose the background color for item containers. This is the color that appears behind the content inside each container. Default: #FFFFFF
• Border Color: Select the color for the container borders. This creates a colored outline around each item container. Default: #eeeeee
• Border Width: Set the thickness of the container borders in pixels. Use 0 to remove borders completely, or higher values for thicker borders. Default: 1
• Border Radius: Add rounded corners to containers. Use '0' for square corners, '5px' for slightly rounded, '10px' for more rounded, or '50%' for circular containers. Default: 0

Typography Settings

• Caption Font Family: Choose a font family for captions and titles. Select from 40+ Google Fonts or use a custom font. Default: User Defined
• Custom Font Name: Enter the name of your custom font family. This is used when 'User Defined' is selected above. Make sure the font is available on your website (loaded via CSS or web fonts). Default: Arial
• Caption Font Size: Set the size of caption text. Enter a number (will be treated as pixels) or include a unit like '14px', '1rem', or '1.2em'. Default: 12
• Caption Font Weight: Control the thickness of caption text. 'Normal' uses the regular font weight, 'Bold' makes text thicker and more prominent. Default: bold
• Caption Text Color: Choose the color for caption and title text. This affects all text overlays and captions displayed on items. Default: #000000
• Read More Font Size: Set the font size for 'Read More' links. Use CSS units like '12px', '0.9rem', or '14px'. Default: 12px
• Read More Top Margin: Set the spacing above 'Read More' links. Use CSS units like '5px', '0.5rem', or '10px'. Default: 5px
• Intro Text Top Margin: Set the spacing above intro text and titles. Use CSS units like '5px', '0.5rem', or '10px'. Default: 5px

Image Settings

• Image Fit Mode: Control how images fit within their containers. 'Contain' shows the full image, 'Cover' fills the container (may crop), 'Fill' stretches to fit, 'None' uses original size, and 'Scale Down' only shrinks if needed. Default: contain
• Image Aspect Ratio: Set a fixed aspect ratio for all images to ensure consistent sizing. Leave as 'Auto' to use each image's natural aspect ratio. Options include Square (1:1), Standard (4:3), Widescreen (16:9), Classic (3:2), Ultrawide (21:9), Portrait (2:3), and Vertical (9:16).
• Image Area Height: Set a fixed height specifically for the image area within containers. This is useful when you want images to be uniform while allowing other content to vary. Leave empty for automatic.
• Lazy Load Images: Enable lazy loading to improve page performance. Images will only load when they're about to become visible, reducing initial page load time. Default: Disabled
• Zoom on Hover: Enable a zoom effect when users hover over images. This creates an interactive visual feedback effect. Default: Enabled
• Zoom Scale: Control how much images zoom on hover. Use decimal values like '1.5' for 50% zoom, '2.0' for double size, or '1.2' for subtle zoom. This only applies when zoom is enabled. Default: 1.5
• Image Overlay: Show a semi-transparent overlay on images when hovered. This overlay can display captions or titles and improves text readability. Default: Enabled
• Hover Overlay Color: Choose the color of the overlay that appears when hovering over images. This overlay displays on top of the image when hovered. Default: #000000
• Overlay Opacity: Control the opacity of the hover overlay. Values range from 0 (transparent) to 1 (fully opaque). Higher values make overlays more visible. Default: 0.8
• Overlay Z-Index: Control the stacking order of overlays. Higher values appear above other elements. Usually kept at 1, but increase if overlays are hidden behind other content. Default: 1

Transition Settings

• Transition Duration: Set how long hover effects and animations take to complete. Use CSS time values like '0.3s' for fast, '0.45s' for normal, or '1s' for slow transitions. Default: 0.45s
• Transition Easing: Choose the animation style for transitions. 'Ease' is smooth, 'Linear' is constant speed, and the 'Ease In/Out' options create acceleration effects. Default: ease

Adding Manual Content Items

When 'Manual Contents' is selected as the Content Source, click the Add button in the "Manual Content Items" fieldset to add a new item. You can add unlimited items to a single module instance.

Item Configuration

• Select an Image: Choose an image for the item from your Joomla media manager. This image will be displayed in the gallery and can be clicked to open the lightbox popup.
• Caption: Enter a caption or title for the item. This text will be displayed below the image (or in the overlay if enabled) and in the lightbox title bar.
• Media: Select what type of content to show in the lightbox popup:
• Content: Display custom HTML content in the popup (default)
• Youtube: Embed a YouTube video in the popup
• Vimeo: Embed a Vimeo video in the popup
• Google Maps: Embed a Google Maps location in the popup
• Link: When Media is set to Youtube, Vimeo, or Google Maps, enter the URL or embed code for the media. For YouTube/Vimeo, use the video URL. For Google Maps, use the map embed URL.
• Content: When Media is set to 'Content', enter the HTML content that will appear in the lightbox popup. You can use HTML tags, images, text, and other content.

Display Mode Options

• Both (Image & Caption): Shows both the image and caption for each item
• Image Only: Hides captions and shows only images
• Caption Only: Shows text without images

Best Practices

• Use high-quality images for best visual results
• Keep captions concise and descriptive
• For YouTube/Vimeo videos, use the standard video URL format
• For Google Maps, use the embed URL from Google Maps
• Test your content in the lightbox popup to ensure it displays correctly

Available Animation Effects

The module includes 50+ professional animation effects organized into categories. All animations use the Animate.css library for smooth, professional transitions.

Fading Effects

• Fade In: Simple fade-in effect
• Fade In Down: Fade in while sliding down
• Fade In Down Big: Fade in with larger downward movement
• Fade In Left: Fade in from the left
• Fade In Left Big: Fade in from the left with larger movement
• Fade In Right: Fade in from the right
• Fade In Right Big: Fade in from the right with larger movement
• Fade In Up: Fade in while sliding up
• Fade In Up Big: Fade in with larger upward movement
• Fade In Top Left: Fade in from top-left corner
• Fade In Top Right: Fade in from top-right corner
• Fade In Bottom Left: Fade in from bottom-left corner
• Fade In Bottom Right: Fade in from bottom-right corner

Zooming Effects

• Zoom In: Zoom in from center
• Zoom In Down: Zoom in from top
• Zoom In Left: Zoom in from left
• Zoom In Right: Zoom in from right
• Zoom In Up: Zoom in from bottom

Bouncing Effects

• Bounce In: Bounce in from center
• Bounce In Down: Bounce in from top
• Bounce In Left: Bounce in from left
• Bounce In Right: Bounce in from right
• Bounce In Up: Bounce in from bottom

Sliding Effects

• Slide In Down: Slide in from top
• Slide In Left: Slide in from left
• Slide In Right: Slide in from right
• Slide In Up: Slide in from bottom

Attention Seekers

• Bounce: Continuous bouncing effect
• Flash: Flash effect
• Pulse: Pulsing effect
• Rubber Band: Rubber band stretch effect
• Shake X: Horizontal shake
• Shake Y: Vertical shake
• Head Shake: Head shake effect
• Swing: Swinging effect
• Tada: Celebration effect
• Wobble: Wobbling effect
• Jello: Jello effect
• Heart Beat: Heartbeat effect

Light Speed Effects

• Light Speed In Right: Fast entry from right
• Light Speed In Left: Fast entry from left

Special Effects

• Roll In: Rolling in effect
• Jack In The Box: Jack-in-the-box effect

Animation Duration

• Normal: Standard animation speed
• Slow: Slower animation speed
• Slower: Very slow animation speed
• Fast: Faster animation speed
• Faster: Very fast animation speed

Best Practices

• Choose animations that match your website's style and tone
• Subtle animations (like Fade In) work well for professional sites
• More dramatic animations (like Bounce In) work well for creative or playful sites
• Test animations on different devices to ensure smooth performance
• Consider disabling animations on mobile devices if performance is a concern

Advanced Configuration

• Module Class Suffix: Add a custom CSS class suffix to the module wrapper. This allows you to target this specific module instance with custom CSS. Example: 'custom-gallery' will add the class 'mod_lightbox_popup_custom-gallery'. Leave empty if not needed.
• Custom CSS: Add your own CSS code to further customize the module appearance. This CSS will be added to the page and can override default styles. Useful for advanced styling that isn't available through the standard options.

Module Assignment

• Module Position: Choose a position where you want the module to appear (e.g., position-7, gallery, content-top).
• Menu Assignment: Ensure the module is assigned to the desired menu items under the Menu Assignment tab.
• Module Status: Set the status to Published to make the module visible on the frontend.
• Access Level: Set the access level to control who can see the module (Public, Registered, Special, etc.).

Performance Optimization

• Lazy Loading: Enable lazy loading to improve page performance by loading images only when they're about to become visible.
• Animation Performance: Consider using simpler animations (like Fade In) on mobile devices for better performance.
• Image Optimization: Optimize your images before uploading to reduce page load times.

Accessibility Features

• Keyboard Navigation: Enable keyboard navigation to allow users to navigate the gallery using keyboard shortcuts (ESC to close, arrow keys to navigate).
• ARIA Labels: The module includes proper ARIA labels for screen readers and accessibility tools.
• Empty State Messages: Display helpful messages when no items are found to improve user experience.

Key Features

• Dual Content Sources: Pull content from Joomla articles based on categories and filters, or manually add custom items with images, captions, and content
• Professional Lightbox System: Beautiful lightbox popup system with customizable size, overlay opacity, and title bar positioning
• 50+ Animation Effects: Choose from 50+ professional animation effects including Fading, Zooming, Bouncing, Sliding, Attention Seekers, Light Speed, and Special effects
• Complete Style Control: Customize container width, height, padding, borders, background colors, border radius, and spacing
• Advanced Image Handling: Control image fit mode, aspect ratios, lazy loading, hover zoom effects, and overlay displays
• Flexible Layout Options: Choose horizontal or vertical orientation, control alignment, gap spacing, and container sizing
• Rich Typography Options: Choose from 40+ Google Fonts or use custom fonts, control font size, weight, and colors
• Article Integration: Display article images, titles, intro text, and full content in lightbox popups with customizable display options
• Manual Content Support: Add unlimited manual items with images, captions, and support for YouTube, Vimeo, and Google Maps embeds
• Keyboard Navigation: Full keyboard support with ESC to close and arrow keys to navigate between items
• Lazy Loading: Improve page performance by loading images only when they're about to become visible
• Hover Effects: Interactive hover effects including image zoom, overlay displays, and smooth transitions
• Responsive Design: Fully responsive design that adapts beautifully to smartphones, tablets, and desktop screens
• Joomla 4, 5 & 6 Compatible: Full support for all modern Joomla versions with WebAssetManager for optimal performance
• Cross-Browser Compatible: Works perfectly across all modern browsers including Chrome, Firefox, Safari, Edge, and Opera
• Enhanced Security: Built with security best practices including input sanitization, XSS prevention, and secure content handling
• Accessibility Features: Proper ARIA labels, keyboard navigation, and screen reader support
• Empty State Handling: Customizable messages when no items are found
• Modern WebAssetManager: Uses Joomla's native asset management for optimal performance and compatibility

• How do I add items to the gallery?

  • You can either select 'Joomla Articles' as the content source and configure categories/filters, or select 'Manual Contents' and click 'Add' to manually add items with images and content.

• Can I use both Joomla articles and manual content together?

  • No, you must choose one content source per module instance. However, you can create multiple module instances with different content sources.

• How do I customize the popup size?

  • Use the 'Popup Box Width' and 'Popup Box Height' settings in General Settings to control the size of the lightbox popup window.

• Can I embed YouTube videos in the popup?

  • Yes, when using Manual Contents, set the Media type to 'Youtube' and enter the YouTube video URL in the Link field.

• How do I change the animation effect?

  • Select an animation effect from the 'Animation Effect' dropdown in General Settings. Choose from 50+ effects organized by category.

• Can I disable animations?

  • Yes, select 'None' from the Animation Effect dropdown to disable animations completely.

• How do I customize the container appearance?

  • Use the Styling & Layout settings to customize container width, height, padding, borders, background colors, border radius, and spacing.

• Can I use custom fonts?

  • Yes, select 'User Defined' from the Caption Font Family dropdown and enter your custom font name in the 'Custom Font Name' field.

• How do I enable lazy loading?

  • Enable 'Lazy Load Images' in the Styling & Layout settings. Images will only load when they're about to become visible.

• Can I show article intro text in the gallery?

  • Yes, enable 'Show Intro Text' in General Settings when using Joomla Articles as the content source.

• How do I customize the hover overlay?

  • Enable 'Image Overlay' in Styling & Layout settings, then customize the 'Hover Overlay Color' and 'Overlay Opacity' to match your design.

• Can I hide the lightbox title bar?

  • Yes, set 'Lightbox Title Bar' to 'None' in General Settings to hide the title bar completely.

• How do I control image sizing?

  • Use 'Image Fit Mode' to control how images fit within containers, 'Image Aspect Ratio' to set fixed aspect ratios, and 'Image Area Height' to set fixed heights for image areas.

• Is the module responsive?

  • Yes, the module is fully responsive and adapts to different screen sizes. Containers automatically adjust on mobile devices.

• Can I add custom CSS?

  • Yes, use the 'Custom CSS' field in Advanced Settings to add your own CSS rules for advanced styling.

• How do I enable keyboard navigation?

  • Enable 'Keyboard Navigation' in General Settings. Users can then press ESC to close the popup and use arrow keys to navigate.

• Can I show multiple module instances on the same page?

  • Yes, you can create multiple module instances and assign them to the same page. Each instance operates independently with its own configuration.

• Gallery Not Displaying: Check that the module is published, assigned to the correct menu items or pages, and that the module position exists in your template. Verify module access levels match your user's access level.
• No Items Showing: Ensure you have selected categories (for Joomla Articles) or added manual items (for Manual Contents). Check that articles are published and accessible. Verify the 'Number of Items' setting is greater than 0.
• Images Not Loading: Verify that images exist in the specified paths. Check file permissions on image directories. Ensure images are properly uploaded through Joomla's media manager. Check browser console for 404 errors.
• Lightbox Not Opening: Ensure jQuery is loaded (the module automatically loads jQuery via WebAssetManager). Check browser console for JavaScript errors. Verify that the lightbox JavaScript files are loading correctly.
• Animations Not Working: Verify that an animation effect is selected (not 'None'). Check that the Animate.css file is loading (check browser console). Ensure animations are not disabled in your browser settings.
• Styling Issues: Check if your template's CSS is overriding the module styles. Use browser developer tools to inspect elements. Add custom CSS via the Custom CSS field or your template's custom CSS file. Clear Joomla cache and browser cache.
• Layout Issues: Verify that container width, height, and gap settings are correct. Check that orientation (horizontal/vertical) is set as desired. Ensure flexbox is supported in your browser (all modern browsers support it).
• Fonts Not Loading: For Google Fonts, ensure your site has internet access to load fonts from Google's CDN. For custom fonts, verify that fonts are properly loaded via CSS or web fonts. Check browser console for font loading errors.
• Keyboard Navigation Not Working: Verify that 'Keyboard Navigation' is enabled in General Settings. Check browser console for JavaScript errors. Ensure the popup is focused when trying to use keyboard shortcuts.
• Lazy Loading Issues: Verify that 'Lazy Load Images' is enabled. Check browser console for errors. Some older browsers may not support lazy loading natively.
• Hover Effects Not Working: Verify that 'Zoom on Hover' or 'Image Overlay' is enabled in Styling & Layout settings. Check that transition duration and easing are configured. Ensure CSS transitions are not disabled.
• Article Content Not Displaying: Verify that 'Show Article Image', 'Show Article Title', or 'Show Intro Text' is enabled. Check that articles have the corresponding content (images, titles, intro text). Ensure articles are published and accessible.
• Manual Content Not Saving: Verify that you have clicked 'Add' to create items before configuring them. Check that required fields (like image) are filled. Ensure you have saved the module after adding items.
• YouTube/Vimeo Not Embedding: Verify that Media type is set to 'Youtube' or 'Vimeo' and that the Link field contains a valid video URL. Check that the URL format is correct (standard YouTube/Vimeo URL format).
• Responsive Issues: Check that your template supports responsive design. Verify that custom CSS is not overriding responsive styles. Test on different devices and screen sizes. Ensure container width uses relative units (%, rem, em) for better responsiveness.
• Performance Issues: Enable lazy loading for images. Consider using simpler animations on mobile devices. Optimize images before uploading. Reduce the number of items displayed if performance is slow.
• Empty State Message Not Showing: Verify that 'Show Empty State Message' is enabled. Check that the 'Empty State Message' text is not empty. Ensure there are actually no items to display (not just hidden items).