Responsive Nivo Slider

Introduction

Responsive Nivo Slider is a Joomla module that enables users to create a responsive slideshow with various transition effects. This documentation covers the installation, configuration, and usage of the Responsive Nivo Slider 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: ResponsiveNivoSlider_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the ResponsiveNivoSlider_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_rnivo_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_rnivo_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 Responsive Nivo Slider in the list.

General Settings

• Slideshow Width: Enter the width of the module (default is 100%).
• Slideshow Height: Enter the height of the module in pixels (default is 300).

Pagination Settings

• Pagination: Select whether to enable or disable pagination.
  • Options are: OFF or ON.
• Pagination Type: Choose the type of pagination.
  • Options are: Thumbnails or Buttons.

Animation Settings

• Navigation Button: Select whether to enable or disable the navigation button.
  • Options are: OFF or ON.
• Slideshow Effects: Choose the effects for the slideshow.
  • Options include: Random, Fold, Fade, SliceDown, SliceDownLeft, SliceUp, SliceUpLeft, SliceUpDown, SliceUpDownLeft, SlideInRight, SlideInLeft, BoxRandom, BoxRain, BoxRainReverse, BoxRainGrow, BoxRainGrowReverse.
• Number of Slices: Enter the number of slices for 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: OFF or ON.
• Auto Advance: Select whether to auto advance the slideshow.
  • Options are: OFF or ON.
• Random Start: Select whether to start the slideshow randomly.
  • Options are: OFF or ON.

Slide Settings

• Source: 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 (default is images/test/).
• Show Images: Select whether to show images randomly or sequentially.
  • Options are: Random or Sequence.
• Sort Images By: Select the order to sort the images.
  • Options are: Ascending (A-Z, 0-9) or Descending (Z-A, 9-0).
• Autoresize: Select whether to enable auto-resizing of images.
  • Options are: Disable or Enable.
• Resize Image By: Choose to resize images by height, width, or both.
  • Options are: Height, Width, or Both.
• Image Height: Enter the height of the image in pixels.
• Image Width: Enter the width of the image in pixels.

Caption Settings

• 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 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 Caption Text Font: If Select Caption Text Font is set to User Defined, enter the font here.
• 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

• Enable Link: Select whether to enable links on images.

  • Options are: Yes or No.

• Open in: Specify whether to open links 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 Responsive Nivo Slider 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 random, fold, fade, slide, box animations, and more.
• Customizable Dimensions: Set the width and height of the module to fit your template.
• Pagination Options: Enable or disable pagination and choose between thumbnails and buttons.
• 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 Sorting: Auto-resize and sort 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 Slideshow Width and Slideshow Height under General Settings.

• How do I enable navigation buttons?

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

• How do I load images from a folder?

  • Set the Source 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 Folder Path 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.