Download

Fullscreen Image Gallery

Version: 2.0

Installation

  • Unzip the Downloaded File:

    • After downloading the FullScreenImageGallery_UNZIP file, extract it. Inside the extracted folder, you should find the package zip which contains both module and the plugin, and a ReadMe.txt file. 

  • Locate the Installation Package:

    • In the extracted files, look for the package named pkg_fullscreen_gallery_X.x.zip. This is the installation package for Joomla 4.x and 5.x.

  • Access Joomla Extension Manager:

    • Log in to your Joomla admin panel.
    • Navigate to Extensions > Extension Manager. This is where you can manage all extensions, including installation, updates, and removal.

  • Upload the Installation Package:

    • In the Extension Manager, click on the Upload Package File tab. This option allows you to install extensions by uploading their package files.
    • Click on Browse or a similar button (this may vary depending on your browser) to select the pkg_fullscreen_gallery_X.x.zip file from your computer.

  • Install the Extension:

    • After selecting the file, click on Upload and Install. Joomla will upload the file and automatically start the installation process.
    • Wait for the process to complete. You should see a success message once the installation is finished.

  • Post-Installation Setup:

    • After installation, you might need to configure the module and plugin settings based on your requirements. You can usually find these settings in the Extensions > Modules and Extensions > Plugins sections of your Joomla admin panel.
    • Refer to the ReadMe.txt file or any other documentation provided with the package for specific configuration instructions or troubleshooting steps.

Module Image Settings

In the Fullscreen Image Gallery module for Joomla, the Images tab provides various options for customizing the display of your image gallery. Here's a breakdown of the updated parameters:

  • Gallery Width: Set the width of the gallery. You can specify this in pixels (e.g., 900px) or percentage (e.g., 100%) to make the gallery responsive to the browser window size.

  • Image Source: Choose how to populate your gallery. There are two options:

    • Slides: Select individual images and assign captions to each.
    • From Folder: Automatically fetch all images from a specified folder within your Joomla site.

  • Select a Folder: This option appears when you choose "From Folder" as the Image Source. Here, you designate the folder from which images will be sourced.

  • Resize Thumbnail By: Determine how thumbnails are resized by selecting either height, width, or both. This ensures a consistent and clean appearance for your gallery thumbnails.

  • Thumb Height: Specify the height of the thumbnail images in pixels, without needing to add 'px'. For example, entering 150 would set the height to 150 pixels.

  • Thumb Width: Define the width of the thumbnail images in pixels, similar to the Thumb Height setting.

  • Sort Image: Organize how images are displayed in the gallery. Options include sorting by ascending or descending order, or displaying them randomly.

  • Slides: This setting becomes available when "Slides" is chosen as the Image Source. It allows you to select individual images and add a corresponding caption to each.

  • Enable WebP: A toggle switch that allows you to choose whether to serve images in the WebP format. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Setting this to True will enable WebP images if they are available.

  • Enable Masonry: A toggle switch to enable or disable the masonry layout. The masonry layout is a grid layout based on columns but without fixed row heights, so it can create a more balanced display of images regardless of their size.

  • Masonry Column Width: Here, you specify the width of each column in the masonry layout in pixels. This setting is important to define how many images will be displayed in a row and their respective sizes.

  • Masonry Gap: This defines the space between images in the masonry layout, often known as the gutter. The gap is specified in pixels and adds padding between the images for a cleaner layout.

  • Zoom Image on Hover: This option, when set to Yes, will enable a zoom effect on images when a user hovers over them. It's a nice interactive feature that allows users to get a closer look at thumbnails.

 

Styling Settings

  • Overlay Controls Color: This is the color for the controls that appear on the image overlay, like navigation arrows or close buttons. The color is set using a hex code, for example, #ff0000 for red.

  • Overlay Color: The background color of the overlay that appears when you click on an image. This is also defined using a hex code, such as #4698fc for a blue shade.

  • Thumbnail Margin: The space around each thumbnail image, specified in pixels. A margin of 2 means there will be a 2-pixel space around each thumbnail.

  • Thumbnail Border: The thickness of the border around each thumbnail, in pixels. A border of 2 sets a 2-pixel thick border.

  • Thumbnail Border Color: The color of the thumbnail border, defined by a hex code like #cccccc for a light grey.

  • Select Caption Font: Allows you to define the font for the captions. It can be set to a default or a user-defined option. If "User Defined" is selected, you can choose a specific font.

  • Font: The actual font family used for the captions, such as 'Open Sans'. You can use any google fonts or system default fonts.

  • Title Background Color: The background color for the title of the image or gallery, with a hex code like #000000 for black.

  • Title Color: The color of the title text itself, typically set against the title background color for contrast. #ffffff is white.

  • Title Font Size: The size of the title font in pixels. For example, 12 would set the font size to 12 pixels.

  • Title Font Weight: The weight (thickness) of the title font, options like 'Normal', 'Bold', or numerical values indicating the weight of the font.

Advanced

  • Add Extra CSS : You can add extra css directly by adding into this field.

Plugin Shortcode

If you are using the content plugin you can use the following two syntax.The content plugin can be used inside Joomla Articles or Custom Module.

To fetch from folder :

{fullscreen folder="images/woo/" thumbheight="100" thumbwidth="100" width="100%" padding="2"}

The above shortcode accepts the following attributes.

  1. folder : Set the path of your images folder. Example : folder="images/woo/"
  2. thumbheight : Set the height of the thumbnail image. Don't use px. Example : thumbheight="100"
  3. thumbwidth : Set the width of the thumbnail image. Don't use px. Example : thumbwidth ="100"
  4. padding : You can set the padding around the thumbnail. Example : padding="2" which means 2 pixles.

Fetch Individual Images with Title

{fullscreen image="images/woo/1.jpg,images/woo/2.jpg,images/woo/3.jpg" title="Title1,Title2,Title3" thumbheight="100" thumbwidth="100" }

The above shortcode accepts following attributes:

  1. image: Set the complete path of the individual images.
  2. title : Set the title of the images sequentially like the images.
  3. thumbheight : Set the height of the thumbnail image. Don't use px. Example : thumbheight="100"
  4. thumbwidth : Set the width of the thumbnail image. Don't use px. Example : thumbwidth ="100"
  5. padding : You can set the padding around the thumbnail. Example : padding="2" which means 2 pixles.

 

The plugin settings are settings are same as the module settings as mentioned above.

Troublesettings

 

  • Check if the images path are correct.
  • Check properly that you have activated the module in an existing template position.