Get Started

Fullscreen Image Gallery is a powerful Joomla extension that creates stunning fullscreen image galleries with lightbox functionality. Available as both a Content Plugin and Module, it provides flexible options for displaying image galleries throughout your Joomla website.

Plugin vs Module

• Content Plugin: Use shortcodes directly in articles and content areas to create galleries inline with your content
• Module: Display galleries in module positions (sidebars, headers, footers, etc.) with advanced configuration options

Key Highlights:

• Full Joomla 4, 5 & 6 Compatibility
• Fullscreen Lightbox Display
• Masonry Layout Support
• Automatic Image Resizing & Caching
• WebP Format Support
• Built-in Shortcode Examples (Plugin)
• Folder-based or Individual Image Selection
• Multiple Sorting Options
• Fully Responsive Design
• Customizable Styling Options

Downloading the Extension

After purchasing the extension, you will receive download links for both the plugin and module packages.

Installing the Plugin

1. Log in to your Joomla backend
2. Navigate to Extensions > Manage > Install
3. Click on the "Upload Package File" tab
4. Select the plugin installation file (plg_content_fullscreen_gallery_X.x.zip)
5. Click "Upload and Install"
6. Navigate to Extensions > Plugins
7. Search for "Content - Fullscreen Image Gallery" and enable it

Installing the Module

1. Navigate to Extensions > Manage > Install
2. Click on the "Upload Package File" tab
3. Select the module installation file (mod_fullscreen_gallery_X.x.zip)
4. Click "Upload and Install"
5. Navigate to Extensions > Modules
6. Click "New" and select "Fullscreen Image Gallery"
7. Configure and publish the module

A success message will be displayed once the installation is complete.

Access plugin settings by navigating to Extensions > Plugins, and find Content - Fullscreen Image Gallery.

Image and Title Settings

• Sort Images By: Choose how to sort images (Random, Ascending A-Z, Descending Z-A) - default: Random
• Enable Masonry: Enable masonry layout for the gallery (default: False)
• Masonry Column Width: Width of masonry columns in pixels (default: 100) - only when masonry is enabled
• Masonry Gap: Gap between masonry items in pixels (default: 5) - only when masonry is enabled
• Enable WebP: Convert images to WebP format (default: False)
• Thumbnail Border Color: Border color for thumbnails (default: #333333)
• Thumbnail Border Size: Border size in pixels (default: 1)

Layout Settings

• Control Background Color: Background color for navigation controls (default: #000)
• Background Color: Background color for fullscreen overlay (default: #000)

Title Settings

• Select Title Font: Choose from predefined fonts or user-defined (default: User Defined)
• User-defined Title Font: Enter custom font name if using user-defined option
• Title Background Color: Background color for image titles (default: #EEE)
• Title Color: Text color for image titles (default: #000)
• Title Font Size: Font size in pixels (default: 12)
• Title Font Weight: Normal or Bold (default: Bold)

Access module settings by navigating to Extensions > Modules, create or edit a "Fullscreen Image Gallery" module.

Image Settings

• Gallery Width: Width of the gallery container (e.g., 900px or 80%) - default: 900px
• Image Source: Choose how to load images
  • From Folder: Automatically load all images from a folder
  • Slides: Manually select specific images
• Select a folder: Choose folder containing images - only when "From Folder" is selected
• Resize Thumbnail By: Resize by Height, Width, or Both (default: Height)
• Thumb Image Width: Width in pixels (default: 100) - only when resizing by Width or Both
• Thumb Image Height: Height in pixels (default: 80) - only when resizing by Height or Both
• Enable WebP: Convert images to WebP format (default: False)
• Enable Masonry: Enable masonry layout (default: False)
• Masonry Column Width: Column width in pixels (default: 100)
• Masonry Gap: Gap between items in pixels (default: 5)
• Sort Images: Sequence A-Z, Z-A, or Random (default: Sequence A-Z)
• Zoom Image on Hover: Enable zoom effect on hover (default: Yes)

Styling Settings

• Overlay Controls Color: Color for navigation controls (default: #000)
• Overlay Color: Background color for fullscreen overlay (default: #000)
• Thumbnail Padding: Padding around thumbnails in pixels (default: 5)
• Thumbnail Margin: Margin around thumbnails in pixels (default: 5)
• Thumbnail Border: Border width in pixels (default: 2)
• Thumbnail Border Color: Border color (default: rgba(0, 0, 0, 1))
• Thumbnail Overlay Layer: Show/hide overlay layer (default: Hide)
• Caption Font Settings: Font family, size, color, weight - only when using Slides mode

Advanced Settings

• Add Extra CSS: Add custom CSS for advanced styling

Shortcode Examples Tab

The plugin includes a built-in Shortcode Examples tab in the plugin configuration with ready-to-use examples. Simply click "Copy" on any example to copy it to your clipboard, then paste it into your content.

Basic Syntax

Gallery from Folder

Display all images from a specific folder:

{fullscreen folder="images/gallery"}

Gallery with Custom Dimensions

Gallery with custom thumbnail and large image sizes:

{fullscreen folder="images/gallery" thumbwidth="150" thumbheight="100" largewidth="1200" largeheight="800"}

Individual Images Gallery

Display specific images with titles:

{fullscreen image="images/photo1.jpg,images/photo2.jpg,images/photo3.jpg" title="Photo 1,Photo 2,Photo 3"}

Gallery with Custom Width

Gallery with custom container width:

{fullscreen folder="images/gallery" width="80%"}

Gallery with Padding and Margin

Gallery with custom spacing:

{fullscreen folder="images/gallery" padding="5" margin="10"}

Where to Use

You can add shortcodes in:

• Joomla articles (Article Editor)
• Custom HTML modules
• Any content area that supports HTML

Image Path Guidelines

• Use relative paths from your Joomla root (e.g., images/gallery/photo.jpg)
• Do not include leading slash in image paths
• Supported formats: JPG, JPEG, PNG, GIF
• Images are automatically resized according to your plugin settings
• Resized images are cached in images/fullscreen/ directory

Creating a Gallery Module

Step 1: Create New Module

1. Navigate to Extensions > Modules
2. Click "New" button
3. Select "Fullscreen Image Gallery" from the list

Step 2: Configure Gallery Source

Option A: From Folder

1. Set "Image Source" to "From Folder"
2. Select folder containing images
3. All images in the folder will be automatically included
4. Configure sorting (A-Z, Z-A, or Random)

Option B: Slides

1. Set "Image Source" to "Slides"
2. Click "Add" button to add slides
3. For each slide:
   • Select an image
   • Add caption text (optional)
4. Configure caption display options

Step 3: Configure Display Settings

• Set gallery width
• Configure thumbnail dimensions (width/height/both)
• Enable WebP if desired
• Enable masonry layout if desired
• Configure styling options (colors, padding, margins, borders)
• Set caption styling (when using Slides mode)

Step 4: Assign Module Position

• Select module position (sidebar, header, footer, etc.)
• Set menu assignment (all pages, specific pages, etc.)
• Add extra CSS if needed

Step 5: Publish

• Set status to "Published"
• Save the module
• View your website to see the gallery

Module Positions

Common module positions where galleries work well:

• Sidebar positions: left, right, sidebar-a, sidebar-b
• Content positions: above-content, below-content
• Footer positions: footer, footer-a, footer-b
• Custom positions: Any custom module position in your template

Core Features

• Fullscreen Lightbox: Professional fullscreen lightbox overlay for viewing large images with smooth navigation
• Masonry Layout: Optional masonry/Pinterest-style grid layout for visually appealing image arrangements
• Automatic Image Resizing: Automatically resize images for thumbnails and lightbox display with configurable dimensions
• Smart Image Caching: Automatically cache resized images for faster repeated loads and improved performance
• WebP Format Support: Optional WebP format conversion for smaller file sizes and faster loading times
• Multiple Image Sources: Load images from folders or manually select individual images
• Flexible Sorting: Sort images randomly, alphabetically, or reverse alphabetically
• Built-in Shortcode Examples: Plugin includes ready-to-use shortcode examples with one-click copy

Plugin-Specific Features

• Inline Content Integration: Add galleries directly in articles using simple shortcodes
• Folder-based Galleries: Automatically display all images from a folder with one shortcode
• Individual Image Control: Specify individual images with custom titles
• Content Context Aware: Only processes shortcodes in appropriate content contexts

Module-Specific Features

• Module Position Flexibility: Display galleries anywhere on your site using module positions
• Advanced Configuration: More granular control over image display, captions, and styling
• Subform Interface: Easy-to-use interface for adding multiple images with captions
• Menu Assignment: Control which pages display the gallery module
• Custom CSS Support: Add extra CSS for advanced styling
• Zoom on Hover: Optional zoom effect when hovering over thumbnails

Advanced Features

• Performance Optimized: Uses Joomla's WebAssetManager for optimal asset loading
• Mobile Responsive: Fully responsive design that works perfectly on all devices
• Customizable Styling: Extensive styling options for colors, fonts, spacing, and borders
• Image Quality Control: Configurable image quality settings for optimal balance

Compatibility

• Joomla 4, 5 & 6 Compatible: Full support for all modern Joomla versions
• Modern PHP: PHP 7.4+ syntax and features for better performance
• Future-Proof: Regular updates and security patches for long-term compatibility

General Questions

What's the difference between the plugin and module?

• Plugin: Use shortcodes in articles/content to create galleries inline with your content
• Module: Display galleries in module positions (sidebars, headers, etc.) with more configuration options
• Both use the same underlying technology and styling options

Which Joomla versions are supported?

• Both plugin and module are fully compatible with Joomla 4.x, 5.x, and 6.x

What image formats are supported?

• JPG, JPEG, PNG, GIF formats are supported
• WebP conversion is available as an optional feature
• Images are automatically resized according to your settings

Plugin Questions

How do I add a gallery to an article?

• Use the shortcode: {fullscreen folder="images/gallery"} for folder-based galleries
• Or use: {fullscreen image="images/photo1.jpg,images/photo2.jpg" title="Photo 1,Photo 2"} for individual images
• See the Shortcode Examples tab in plugin settings for more examples

Can I customize thumbnail sizes in shortcodes?

• Yes, use thumbwidth and thumbheight attributes in the shortcode
• Example: {fullscreen folder="images/gallery" thumbwidth="200" thumbheight="150"}

Module Questions

How do I create a gallery module?

• Go to Extensions > Modules > New
• Select "Fullscreen Image Gallery"
• Choose "From Folder" or "Slides"
• Configure images and settings
• Assign to a module position and publish

Can I display captions on images?

• Yes, when using "Slides" mode, you can add captions to each image
• Configure caption styling in the Styling Settings section
• Folder-based galleries don't support captions

What is masonry layout?

• Masonry layout arranges images in a Pinterest-style grid
• Images are arranged to minimize gaps and create a visually appealing layout
• Enable it in Image Settings and configure column width and gap

Technical Questions

How does image caching work?

• Resized images are cached in images/fullscreen/ directory
• This improves performance by avoiding repeated image processing
• Cache is automatically created when images are first processed

How do I enable WebP support?

• Enable "WebP" option in Image Settings (both plugin and module)
• Images will be converted to WebP format automatically
• Original images remain unchanged
• Requires WebP support on your server

Can I customize the gallery styling?

• Yes, extensive styling options are available in settings
• For modules, use "Add Extra CSS" field for custom CSS
• Gallery uses standard CSS classes that can be overridden

Common Issues and Solutions

Plugin Issues

Shortcodes Not Working

• Ensure the plugin is enabled in Extensions > Plugins
• Verify the shortcode syntax is correct
• Check that you're using the correct shortcode format: {fullscreen folder="..."} or {fullscreen image="..."}
• Clear Joomla cache and browser cache
• Check browser console for JavaScript errors

Images Not Displaying

• Verify the image path is correct (relative to Joomla root, no leading slash)
• Check that the image file exists and is readable
• Ensure the image format is supported (JPG, PNG, GIF)
• Check file permissions on the images directory
• Verify the folder path is correct for folder-based galleries

Module Issues

Module Not Displaying

• Ensure the module is published
• Check module position is correct for your template
• Verify menu assignment includes the current page
• Check that module is assigned to correct user groups
• Clear Joomla cache

Images Not Loading in Module

• Verify folder path is correct (for folder-based galleries)
• Check that images exist in the specified folder
• For slides, verify image paths are correct
• Check file permissions on images directory
• Ensure images are in supported formats

Image Processing Issues

Images Not Resizing Properly

• Check thumbnail width and height settings
• Ensure the cache directory is writable: images/fullscreen/
• Clear the image cache by deleting files in the cache directory
• Check PHP GD or ImageMagick is installed and enabled
• Verify image files are not corrupted

WebP Conversion Not Working

• Ensure your server supports WebP format
• Check PHP GD or ImageMagick has WebP support
• Verify WebP support is enabled in PHP
• Check server error logs for conversion errors
• Test with a simple image first

Lightbox Issues

Fullscreen Lightbox Not Opening

• Check that jQuery is loaded (included with Joomla by default)
• Verify JavaScript files are loading (check browser console)
• Check for JavaScript errors in browser console
• Ensure no other scripts are conflicting
• Clear browser cache

Lightbox Styling Issues

• Check CSS files are loading
• Verify no CSS conflicts with your template
• Check browser console for CSS errors
• Try disabling other plugins/modules temporarily

Masonry Layout Issues

Masonry Not Working

• Ensure "Enable Masonry" is set to True
• Check that masonry JavaScript file is loading
• Verify column width and gap settings are correct
• Check browser console for JavaScript errors
• Ensure images have loaded before masonry initializes

Getting Help

If you continue to experience issues:

• Check Joomla error logs for PHP errors
• Visit our support forum: https://support.joomlax.com
• Ensure you're using the latest version
• Verify your Joomla version is compatible (4.x, 5.x, or 6.x)
• Check documentation: https://www.joomlax.com/documentation/fullscreen-image-gallery