jQuery Thumbnail Scroller - JoomlaX Documentation

Version: 1.5

Introduction

jQuery Thumbnail Scroller is a Joomla module that allows you to display thumbnails in a horizontal scrolling format on your Joomla website. This documentation covers the installation, configuration, and usage of the jQuery Thumbnail Scroller 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: jQueryThumbnailScroller_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the jQueryThumbnailScroller_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_thumbnail_scroller_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_thumbnail_scroller_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 jQuery Thumbnail Scroller in the list.

General Settings

Scroller Width: Enter the width of the thumbnail scroller in pixels (default is 300).
Scroller Height: Enter the height of the thumbnail scroller in pixels (default is 150).
Scrolling Type: Select the type of scrolling for the thumbnail images.
- Options are: Hover Precise, Click Buttons, Hover Accelerate.
Scrolling Effect: Select the easing effect for the scroller. This parameter works only when Scrolling Type is set to Hover Precise.
- Options include: linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.
Easing Amount: Enter the easing amount of scrolling (default is 800).
Acceleration Amount: Enter the acceleration amount of the scroller (default is 2).
Scrolling Speed: Enter the scrolling speed of the scroller in milliseconds (default is 600).
Scroll Center Space: Enter the value in pixels. 0 being the absolute center of the scroller (default is 0).
AutoScroll: Select whether you want to enable or disable the autoscroll feature.
- Options are: Enable or Disable.
Auto Scrolling Amount: Enter the amount of auto-scrolling loops (default is 0, which equals no auto-scrolling). This parameter is shown only if AutoScroll is enabled.
Auto Scrolling Speed: Enter the initial auto-scrolling speed in milliseconds (default is 8000). This parameter is shown only if AutoScroll is enabled.
Auto Scrolling Easing: Select the easing effect for the initial auto-scrolling. This parameter is shown only if AutoScroll is enabled.
- Options include: linear, swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.
Auto Scrolling Delay: Enter the initial auto-scrolling delay for each loop in milliseconds (default is 2500).

FancyBox Settings

Opening Speed: Enter the opening speed of the image in a FancyBox in milliseconds (default is 500).
Closing Speed: Enter the closing speed of the image in a FancyBox in milliseconds (default is 500).
Background Color: Select the background color of the screen when the images are opened in a FancyBox (default is #000).
Opening and Closing Effect: Select the opening and closing effect of the FancyBox.
- Options are: None, Elastic, Fade.
FancyBox Border Width: Enter the width of the FancyBox border in pixels (default is 5). Enter 0 if you don't want a FancyBox border.
Show Close Button: Select whether you want to show the close button.
- Options are: Yes or No.

Image Settings

Image Folder Path: Enter the image folder path. This option works only when Image Path Selection is set to From Folder.

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 jQuery Thumbnail Scroller will display the thumbnails based on your settings, providing a dynamic and visually appealing scrolling effect.

Features

Multiple Scrolling Types: Choose from hover precise, click buttons, or hover accelerate scrolling types.
Customizable Dimensions: Set the width and height of the scroller to fit your template.
Scrolling Effects: Select from various easing effects for smooth transitions.
Auto Scroll: Enable or disable auto-scrolling with configurable speed and delay.
FancyBox Integration: Open images in a FancyBox with customizable opening and closing speeds, effects, and background colors.
Advanced Customization: Add module class suffixes and custom CSS for further styling.
Flexible Image Source: Load images from a specified folder path.

FAQ

How do I change the scrolling type?
- Adjust the Scrolling Type setting under General Settings.
Can I set custom dimensions for the scroller?
- Yes, set the Scroller Width and Scroller Height under General Settings.
How do I enable auto-scrolling?
- Set the AutoScroll option to Enable under General Settings.
How do I load images from a specific folder?
- Enter the folder path in the Image Folder Path under Image Settings.
How do I configure the FancyBox settings?
- Adjust the settings under FancyBox Settings to customize the opening speed, closing speed, background color, and effects.
- Scroller Not Displaying: Ensure the module is assigned to a visible template position and published. Verify the Image Folder Path and Scrolling Type settings.
- Images Not Displaying Correctly: Check the Image Folder Path and ensure the images are correctly placed in the specified folder.
- FancyBox Issues: Verify the FancyBox Settings and adjust the opening and closing speeds, background color, and effects as needed.

Troubleshooting

Scroller Not Displaying: Ensure the module is assigned to a visible template position and published. Verify the Image Folder Path and Scrolling Type settings.
Images Not Displaying Correctly: Check the Image Folder Path and ensure the images are correctly placed in the specified folder.
FancyBox Issues: Verify the FancyBox Settings and adjust the opening and closing speeds, background color, and effects as needed.