Fancy Transition Image SlideShow

Introduction

Fancy Transition SlideShow is a powerful Joomla module that creates professional image slideshows with smooth transitions and customizable effects. Built with modern coding standards, it provides flexible options for displaying image slideshows throughout your Joomla website.

Key Highlights

• Full Joomla 4, 5 & 6 Compatibility
• 15+ Professional Transition Effects
• Nivo Slider Integration
• Automatic Image Resizing & Caching
• Folder-based or Individual Image Selection
• Customizable Pagination Styles
• Professional Caption Support
• Advanced Animation Settings
• Link Support with Target Options
• Multiple Sorting Options
• Fully Responsive Design
• Security Enhanced

Perfect For:

• Homepage hero sections
• Product showcases
• Event galleries
• Portfolio websites
• Blog featured content
• E-commerce product displays
• Real estate property galleries
• Corporate presentations

Installation

Downloading the Extension

After purchasing the extension, you will receive a download link for the module package.

Installing the Module

1. Log in to your Joomla backend
2. Navigate to Extensions > Manage > Install
3. Click on the "Upload Package File" tab
4. Select the module installation file (mod_fancy_slider_X.x.zip)
5. Click "Upload and Install"
6. Navigate to Extensions > Modules
7. Click "New" and select "Fancy Transition SlideShow"
8. Configure and publish the module

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

System Requirements

• Joomla 4.x, 5.x, or 6.x
• PHP 7.4 or higher
• GD or ImageMagick extension for image processing
• jQuery (included with Joomla)

General Settings

Access module settings by navigating to Extensions > Modules, create or edit a "Fancy Transition SlideShow" module.

Module Dimensions

• Module Width: Width of the slideshow in pixels or percentage (default: 500px)
• Module Height: Height of the slideshow in pixels (default: 300px)

Pagination Settings

• Pagination Type: Choose from Numbered, Squared, Rounded, or None (default: Numbered)
• Pagination Alignment: Left, Center, or Right alignment (default: Right)
• Pagination Background: Background color of pagination dots/numbers (default: #000)
• Active Pagination Background: Background color when pagination item is active (default: #333)
• Pagination Number Color: Color of numbers in numbered pagination (default: #FFF)

Animation Settings

• Navigation Button: Enable/disable previous/next navigation buttons (default: ON)
• Slideshow Effects: Choose from 15+ transition effects (default: Random)
• Number of Slices: Number of slices for slice animations (default: 15)
• Box Columns: Number of columns for box animations (default: 8)
• Box Rows: Number of rows for box animations (default: 4)
• Slide Transition Speed: Animation speed in milliseconds (default: 500, range: 100-5000)
• Pause Time: Time each slide displays in milliseconds (default: 3000, range: 500-30000)
• Pause On Hover: Pause slideshow when mouse hovers over it (default: ON)
• Auto Advance: Automatically advance slides (default: ON)
• Random Start: Start slideshow on a random slide (default: ON)

Slide Settings

Image Source Selection

Image path Selection: Choose how to load images

• Individual Image Path: Manually select specific images with captions and links
• From Folder: Automatically load all images from a folder

Folder-Based Settings

When "From Folder" is selected:

• Image Folder Path: Path to folder containing images (e.g., images/slideshow/)
• Autoresize: Enable/disable automatic image resizing (default: Disable)
• Resize Image By: Height, Width, or Both (default: Height)
• Image Height: Height in pixels (only when resize by Height or Both)
• Image Width: Width in pixels (only when resize by Width or Both)
• Crop Images: Crop images to maintain proportions (default: ON)
• Show Images: Sequential or Random display (default: Sequence)
• Sort Images By: Ascending (A-Z) or Descending (Z-A) (default: Ascending)

Individual Image Settings

When "Individual Image Path" is selected:

• Click "Add" button to add slides
• For each slide:
  • Select an Image: Choose image from media manager
  • Image Caption: Add caption text (optional)
  • URL: Add link URL (optional)
• Same resize options as folder-based

Image Processing

• Resized images are cached in images/fancy_slider/ directory
• Cache is automatically created on first use
• Images are processed using Joomla's native Image class
• Supported formats: JPG, JPEG, PNG, GIF

Caption & Link Settings

Note: Caption and Link settings only work when "Individual Image Path" is selected.

Caption Settings

• Caption Bar: Enable/disable caption display (default: Enable)
• Caption Bar Color: Background color of caption bar (default: #000)
• Caption Text Color: Color of caption text (default: #FFF)
• Select Caption Text Font: User Defined or Google Font (default: User Defined)
• Font: Font family name (e.g., Arial, Open Sans) or Google Font name
• Caption Text Font Size: Font size in pixels (default: 12)
• Caption Text Font Weight: Normal or Bold (default: Bold)
• Caption Opacity: Opacity value 0.0 to 1.0 (default: 0.7)

Link Settings

• Enable Link: Enable/disable links on slides (default: Yes)
• Open in: Same Window or New Tab (default: Same Window)

Using Google Fonts

1. Set "Select Caption Text Font" to "Google Font"
2. Enter Google Font name (e.g., "Open Sans", "Roboto", "Lato")
3. Font will be automatically loaded from Google Fonts
4. Use exact font name as shown on Google Fonts website

Caption Display

• Captions appear at the bottom of slides
• Caption bar overlays the slide image
• Opacity controls transparency of caption bar
• Captions are HTML-escaped for security

Transition Effects

Available Transition Effects

The module includes 15+ professional transition effects:

• Random: Randomly selects an effect for each transition
• Fold: Folds the image like paper
• Fade: Smooth fade transition
• SliceDown: Slices image downward
• SliceDownLeft: Slices down from left
• SliceUp: Slices image upward
• SliceUpLeft: Slices up from left
• SliceUpDown: Slices up and down
• SliceUpDownLeft: Slices up/down from left
• SlideInRight: Slides in from right
• SlideInLeft: Slides in from left
• BoxRandom: Random box pattern
• BoxRain: Rain-like box effect
• BoxRainReverse: Reverse rain effect
• BoxRainGrow: Growing rain effect
• BoxRainGrowReverse: Reverse growing rain

Effect Parameters

For Slice Effects:

• Number of Slices: Controls how many slices the image is divided into (default: 15)
• Higher values = more slices = smoother effect
• Lower values = fewer slices = more dramatic effect

For Box Effects:

• Box Columns: Number of columns in box grid (default: 8)
• Box Rows: Number of rows in box grid (default: 4)
• Higher values = more boxes = smoother effect
• Lower values = fewer boxes = more dramatic effect

Animation Speed

• Slide Transition Speed: How fast the transition animates (100-5000ms)
• Lower values = faster transitions
• Higher values = slower, more dramatic transitions
• Recommended: 300-800ms for most effects

Pause Time

• Pause Time: How long each slide displays (500-30000ms)
• Lower values = faster slideshow
• Higher values = more time to view each slide
• Recommended: 2000-5000ms for most use cases

Features

Core Features

• 15+ Transition Effects: Professional transition effects including Random, Fold, Fade, Slice, Slide, and Box effects
• Flexible Image Sources: Load images from folders or manually select individual images
• Smart Image Processing: Automatic image resizing with caching in images/fancy_slider/ directory
• Customizable Pagination: Multiple pagination styles (Numbered, Squared, Rounded, None) with color customization
• Professional Caption Support: Customizable captions with font selection, colors, sizes, and opacity
• Advanced Animation Settings: Configurable transition speeds, pause times, and interactive options
• Link Support: Optional links on slides with configurable targets
• Multiple Sorting Options: Sort images alphabetically, reverse alphabetically, or randomly

Image Processing Features

• Automatic Resizing: Resize by height, width, or both with configurable dimensions
• Image Caching: Smart caching system for faster repeated loads
• Image Cropping: Optional cropping to maintain proportions
• Format Support: JPG, JPEG, PNG, GIF formats supported
• Secure Processing: Uses Joomla's native Image class with proper validation

Pagination Features

• Multiple Styles: Numbered, Squared, Rounded, or None
• Alignment Options: Left, Center, or Right alignment
• Color Customization: Background, active state, and number colors
• Navigation Controls: Previous/Next buttons with customizable display

Animation Features

• Transition Effects: 15+ professional effects with customizable parameters
• Speed Control: Configurable transition and pause speeds
• Interactive Options: Pause on hover, auto-advance, random start
• Manual Control: Optional manual navigation controls

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: Module class suffix and extra CSS options
• Security Enhanced: Comprehensive security features and validation

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

FAQ

General Questions

Which Joomla versions are supported?

• The module is fully compatible with Joomla 4.x, 5.x, and 6.x

What image formats are supported?

• JPG, JPEG, PNG, GIF formats are supported
• Images are automatically processed using Joomla's native Image class
• Resized images are cached for better performance

How do I create a slideshow module?

• Go to Extensions > Modules > New
• Select "Fancy Transition SlideShow"
• Choose "From Folder" or "Individual Image Path"
• Configure images and settings
• Assign to a module position and publish

Image Source Questions

What's the difference between "From Folder" and "Individual Image Path"?

• From Folder: Automatically loads all images from a folder - quick setup, no captions/links
• Individual Image Path: Manually select images with captions and links - more control

Can I use both folder and individual images together?

• No, you need to choose one method per module instance
• You can create multiple module instances with different configurations

Caption & Link Questions

Can I display captions on images?

• Yes, when using "Individual Image Path" mode, you can add captions to each image
• Configure caption display, colors, fonts, sizes, and opacity in Caption Settings
• Folder-based galleries don't support captions

Can images link to external URLs?

• Yes, when using "Individual Image Path" mode, you can add a link URL to each image
• Set link target to open in same window or new tab
• If no link is provided, images display in slideshow only

Animation Questions

How do I change the transition effect?

• Go to Animation Settings in module configuration
• Select desired effect from "Slideshow Effects" dropdown
• Adjust effect parameters (slices, box columns/rows) if needed
• Configure transition speed and pause time

What's the best pause time setting?

• Recommended: 2000-5000ms (2-5 seconds) for most use cases
• Faster content: 1500-3000ms
• Detailed images: 4000-6000ms
• Adjust based on your content and audience

Technical Questions

How does image caching work?

• Resized images are cached in images/fancy_slider/ directory
• This improves performance by avoiding repeated image processing
• Cache is automatically created when images are first processed
• Cache files are named based on image, dimensions, crop, and quality settings

Can I customize the gallery styling?

• Yes, use Module Class Suffix to add custom CSS classes
• Add Extra CSS in Advanced Settings for custom styling
• Gallery uses standard CSS classes that can be overridden
• Pagination colors can be customized in module settings

What if images don't resize properly?

• Check thumbnail and image width/height settings
• Ensure the cache directory is writable: images/fancy_slider/
• 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

Troubleshooting

Common Issues and Solutions

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

• Verify folder path is correct (for folder-based galleries)
• Check that images exist in the specified folder
• For individual images, verify image paths are correct
• Check file permissions on images directory
• Ensure images are in supported formats (JPG, PNG, GIF)
• Verify image paths don't contain special characters

Image Processing Issues

Images Not Resizing Properly

• Check image width and height settings
• Ensure the cache directory is writable: images/fancy_slider/
• 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
• Check PHP memory limit is sufficient

Cache Directory Issues

• Ensure images/fancy_slider/ directory exists and is writable (755 permissions)
• Check parent images/ directory permissions
• Verify disk space is available
• Check server error logs for permission errors

Slideshow Issues

Slideshow Not Animating

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

Transition Effects Not Working

• Verify effect is selected in module settings
• Check effect parameters (slices, box columns/rows) are set correctly
• Ensure transition speed is not set too low (minimum 100ms)
• Check browser console for JavaScript errors
• Try a different effect to test

Pagination Issues

Pagination Not Displaying

• Check pagination type is not set to "None"
• Verify pagination colors are set correctly
• Check CSS files are loading correctly
• Verify no CSS conflicts with your template
• Check browser console for CSS errors

Caption Issues

Captions Not Displaying

• Ensure "Individual Image Path" is selected (captions only work with individual images)
• Verify "Caption Bar" is enabled
• Check that captions are added to slides
• Verify caption colors are set correctly
• Check CSS files are loading

Performance Issues

Slideshow Loading Slowly

• Reduce image dimensions in resize settings
• Ensure image caching is working (check cache directory)
• Optimize source images before uploading
• Consider using fewer images per slideshow
• Check server resources and PHP memory limit
• Verify images are not too large (optimize before upload)

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/fancy-transition-slideshow