Fancy Transition Image SlideShow

Introduction

Fancy Transition SlideShow is a Joomla module that enables users to display images in a slideshow with various transition effects. This documentation covers the installation, configuration, and usage of the Fancy Transition SlideShow 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: FancyTransitionSlideShow_UNZIP.zip

Unzipping the Package

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

• Folder Joomla 3: This extension is compatible with Joomla 3.x. In this folder, you will find the installation file named mod_fancy_slider_X.x.zip.
• Folder Joomla 4 & 5: The extension is also designed for seamless integration with Joomla 4.x and Joomla 5.x. This folder contains the installation file named mod_fancy_slider_X.x.zip.
• 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 appropriate installation file, then click "Upload and Install."
• For Joomla 4 & 5: 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 Fancy Transition SlideShow in the list.

General Settings

• Module Width: Enter the width of the module in pixels (default is 500px).
• Module Height: Enter the height of the module in pixels (default is 300px).

Pagination Settings

• Pagination Type: Select the type of pagination.
  • Options include: Numbered, Squared, Rounded, and None.
• Pagination Alignment: Select the alignment of the pagination (shown only if Pagination Type is not set to None).
  • Options are: Right, Left, or Center.
• Pagination Background: Select the color of the pagination background (shown only if Pagination Type is not set to None).
• Active Pagination Background: Select the color of the pagination background when active (shown only if Pagination Type is not set to None).
• Pagination Number Color: Select the color of the number on pagination when Pagination Type is set to Numbered.

Animation Settings

• Navigation Button: Select whether to enable or disable the navigation button.
  • Options are: ON or OFF.
• Slideshow Effects: Select the effects of the slideshow.
  • Options include: Random, Fold, Fade, SliceDown, SliceDownLeft, SliceUp, SliceUpLeft, SliceUpDown, SliceUpDownLeft, SlideInRight, SlideInLeft, BoxRandom, BoxRain, BoxRainReverse, BoxRainGrow, and BoxRainGrowReverse.
• Number of Slices: Enter the number of slices you want in the transition (default is 15).
• Box Columns: Enter the number of columns for box animation (default is 8).
• Box Rows: Enter the number of rows for box animation (default is 4).
• Slide Transition Speed: Enter the time in milliseconds for slide transition speed (default is 500).
• Pause Time: Specify how long each slide will be displayed (default is 3000).
• Pause On Hover: Select whether to pause the slideshow when the mouse is hovered over it.
  • Options are: ON or OFF.
• Auto Advance: Select whether to auto advance the slideshow.
  • Options are: ON or OFF.
• Random Start: Select whether to start the slideshow randomly.
  • Options are: ON or OFF.

Slide Settings

• Image Path Selection: Select whether you want to grab images from a folder or from individual image paths.
  • Options are: Individual Image Path or From Folder.
• Image Folder Path: Enter the image folder path (shown only if Image Path Selection is set to From Folder).
• Autoresize: Select whether auto-resizing of images is to be done or not.
  • Options are: Enable or Disable.
• Resize Image By: Select whether to resize the images by height, width, or both (shown only if Autoresize is enabled).
  • Options are: Height, Width, or Both.
• Image Height: Enter the height of the image in pixels (shown only if Autoresize is enabled and Resize Image By is set to Height or Both).
• Image Width: Enter the width of the image in pixels (shown only if Autoresize is enabled and Resize Image By is set to Width or Both).
• Crop Images: Select whether to crop images to proportionate (shown only if Autoresize is enabled).
  • Options are: ON or OFF.
• Show Images: Select whether to show images randomly or sequentially.
  • Options are: Random or Sequence.
• Sort Images By: Select the order in which you want to sort the images.
  • Options are: Ascending (A-Z, 0-9) or Descending (Z-A, 9-0).

Caption Settings (Only applicable if Image Path Selection is set to Individual Image Path)

• Caption Bar: Select the visibility of the caption.
  • Options are: Enable or Disable.
• Caption Bar Color: Select the color of the caption bar.
• Caption Text Color: Select the color of the caption text.
• Select Caption Text Font: Choose the font-family for the caption text.
  • Options are: User Defined or Google Font.
• Font: If Select Caption Text Font is set to User Defined, enter the desired font.
• Caption Text Font Size: Enter the size of the caption text in pixels (default is 12).
• Caption Text Font Weight: Select the font-weight for the caption text.
  • Options are: Normal or Bold.
• Caption Opacity: Specify the opacity of the caption (default is 0.7).

Link Settings (Only applicable if Image Path Selection is set to Individual Image Path)

• Enable Link: Select whether you want to enable a link or not.

  • Options are: Yes or No.

• Open in: Specify whether to open a link in the same window or a new tab.

  • Options are: Same Window or New Tab.

• Slides: Click on the "Add" button to add slides. You can set the image, title, caption, and link for each slide.

Advanced Settings

• Module Class Suffix: Add a suffix to the module class for styling purposes.
• Add Extra CSS: Add custom CSS for further styling customization.

Features

Once configured, assign the module to a position on your Joomla template and publish it. The Fancy Transition SlideShow will display the images based on your settings, providing a dynamic and visually appealing slideshow.

Features

• Multiple Transition Effects: Choose from a variety of slideshow effects, including fade, slide, box animations, and more.
• Customizable Dimensions: Set the width and height of the module to fit your template.
• Pagination Options: Select pagination type, alignment, background colors, and number colors.
• Navigation Buttons: Enable or disable navigation buttons for easy slide control.
• Auto-Advance and Random Start: Configure the slideshow to auto-advance and start randomly.
• Pause On Hover: Pause the slideshow when the mouse hovers over it for better user interaction.
• Image Resizing and Cropping: Auto-resize and crop images to fit the slideshow dimensions.
• Caption and Link Settings: Add captions and links to your slides with customizable text fonts, sizes, and colors.
• Custom CSS: Add extra CSS for advanced styling.

FAQ

• How do I change the slideshow effects?

  • Adjust the Slideshow Effects setting under Animation Settings.

• Can I set custom dimensions for the slideshow?

  • Yes, set the Module Width and Module Height under General Settings.

• How do I enable navigation buttons?

  • Set the Navigation Button option to ON under Animation Settings.

• How do I input images from a folder?

  • Set the Image Path Selection to From Folder and specify the folder path in Image Folder Path.

• How do I add captions to the images?

  • Enable the Caption Bar and configure the caption settings under Caption Settings.

Troubleshooting

• Slideshow Not Displaying: Ensure the module is assigned to a visible template position and published. Verify the Image Path Selection and Slideshow Effects settings.
• Images Not Resizing: Check the Autoresize settings and ensure the dimensions are set correctly.
• Styling Issues: Adjust the General Settings and Caption Settings to fix any styling problems.