Introduction
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
Installation
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.
General Settings
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.
Styling & Layout
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
Manual Content Items
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
Animation Effects
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