Responsive Image Gallery - JoomlaX Documentation

Introduction

Responsive Image Gallery is a Joomla module that allows you to create a responsive image gallery with customizable settings. This documentation covers the installation, configuration, and usage of the Responsive Image Gallery module.

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: ResponsiveImageGallery_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the ResponsiveImageGallery_UNZIP.zip package. After unzipping, you will find the following contents:

mod_responsive_gallery.zip: This is the installation file compatible with Joomla 3.x and Joomla 4.x.
ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

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

For Joomla 3: Navigate to Extensions > Extension Manager, then click on the "Upload Package File" tab. Click "Browse" to select the installation file (mod_responsive_gallery.zip), then click "Upload and Install."
For Joomla 4: 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.

Configuration

After installation, the module needs to be configured to suit your requirements. Access the module settings by navigating to Extensions > Modules, and find Responsive Image Gallery in the list.

General Settings

Gallery Background Color: Select the background color of the gallery.
- Options include: #000000 (default), any color in rgba format.
Carousel Position: Select the position of the carousel.
- Options are: Top or Bottom.
Autoplay: Choose whether to autoplay the gallery.
- Options are: ON (default) or OFF.
Autoplay Speed: Enter the autoplay speed in milliseconds (default is 3000).

Slide Settings

Image Path Selection: Choose whether to grab images from a folder or from individual image paths.
- Options are: Folder or Slides.
Image Folder Path: Enter the image folder path. This option works only when Image Path Selection is set to Folder.
- Default path is images/test/.
Show Images: Select whether to show images randomly or sequentially.
- Options are: Random or Sequence.
Sort Images By: Choose the order in which to sort the images.
- Options are: Ascending (A-Z, 0-9) or Descending (Z-A, 9-0).
Resize Image By: Choose whether to resize images by height, width, or both.
- Options are: Height, Width, or Both.
Thumbnail Image Height: Enter the height of the thumbnail image.
Thumbnail Image Width: Enter the width of the thumbnail image.
Large Image Height: Enter the height of the large image.
Large Image Width: Enter the width of the large image.

Caption Settings

Title Color: Select the color of the title. This option works only when Image Path Selection is set to Slides.
Select Title Font: Choose the font family for the title.
- Options include: User Defined, Questrial, Numans, Comfortaa, Andika, Podkova, Carme, Varela Round, Shanti, Muli, Yellowtail, Didact Gothic, Lato, Nunito, Lobster Two, Rosario, IM Fell French Canon SC, Actor, Cabin, Rochester, Calligraffitti, Pacifico, Damion, Varela, Molengo, Ubuntu.
User-defined Title Font: If Select Title Font is set to User Defined, enter the font here.
Title Font Size: Enter the size of the title text in pixels (default is 12).
Title Font Weight: Select the font weight for the title text.
- Options are: Normal or Bold.

Slides

Slides: Click on the "Add" button to add slides. You can set the image, title, caption, and link for each slide. This option works only when Image Path Selection is set to Slides.

Advanced Settings

Module Class Suffix: Add a suffix to the module class for styling purposes (optional).

Features

Once configured, assign the module to a position on your Joomla template and publish it. The Responsive Image Gallery will display the images based on your settings, providing a dynamic and visually appealing gallery.

Customizable Background: Set the background color of the gallery to match your website’s theme.
Carousel Positioning: Position the carousel at the top or bottom of the gallery.
Autoplay Options: Enable autoplay and set the autoplay speed for the gallery.
Flexible Image Source: Load images from a folder or use individual image paths.
Random or Sequential Display: Display images randomly or in a specific sequence.
Image Resizing: Automatically resize images by height, width, or both.
Caption Customization: Customize the title font, size, color, and weight for image captions.
Advanced Customization: Add a module class suffix for further styling and customization.

FAQ

How do I change the background color of the gallery?
- Adjust the Gallery Background Color setting under General Settings.
Can I set the gallery to autoplay?
- Yes, set the Autoplay option to ON and configure the Autoplay Speed under General Settings.
How do I load images from a specific folder?
- Set the Image Path Selection to Folder and enter the folder path in the Image Folder Path field under Slide Settings.
How do I add captions to the images?
- Customize the title settings under Caption Settings and add slides with titles under Slides if Image Path Selection is set to Slides.
Can I resize images automatically?
- Yes, enable the Resize Image By option under Slide Settings and specify the dimensions.

Troubleshooting

Gallery Not Displaying: Ensure the module is assigned to a visible template position and published. Verify the Image Folder Path and other settings.
Images Not Resizing: Check the Resize Image By settings and ensure the dimensions are correctly specified.
Caption Issues: Adjust the Caption Settings and ensure titles are correctly entered for each slide.