Sliding Youtube Gallery

Introduction

Sliding Youtube Gallery is a Joomla module that displays beautiful sliding image galleries with YouTube video popup integration. This documentation covers the installation, configuration, and usage of the Sliding Youtube Gallery module.

The module allows you to create responsive image sliders that open videos in an elegant Fancybox popup when clicked. Perfect for showcasing video content, portfolios, product galleries, and media collections.

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 of 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: SlidingYoutubeGallery_UNZIP.zip

Unzipping the Package

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

• Folder Joomla 4, 5 & 6: This extension is compatible with Joomla 4.x, 5.x, and 6.x. In this folder, you will find the installation file named mod_sliding_gallery_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 4, 5 & 6: 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.

After successful installation:

• Go to Content > Site Modules
• You will find Sliding Youtube Gallery listed. Click on it to configure.

Note: This module supports Joomla 4, 5, and 6 only. Support for Joomla 3.x has been discontinued.

General Settings

After installation, go to Content > Site Modules and open Sliding Youtube Gallery. You will find the following options in the General Settings.

Slider Dimensions

• Height of Slider: You can mention the height of the slider in pixels (px). For example, 150. Don't add "px" into the field.
• Width of Each Slide: Mention the width of each slide. Example: 180. Please don't add "px" to the field. All images will be resized to this width for consistent display.

Slider Effects

• Effect: Option to choose how images slide:
  • Horizontal: Images slide from left to right
  • Vertical: Images slide from top to bottom
  • None: Static grid display without sliding effects

Slide Configuration

• Max Slides: Option to set the maximum number of slides to show on page load. This is typically used for desktop displays.
• Min Slides: Option to show the minimum number of slides for mobile devices. This ensures proper display on smaller screens.
• Move Slides: The number of slides you want to move at a time when navigating. This value must be greater than Min Slides and less than Max Slides.

Auto Slide Settings

• Auto Slide: Set it to "Enabled" if you want the slides to move automatically. Set to "Disabled" for manual navigation only.
• Speed of Slide: Set the speed of the slide transition in milliseconds (1s = 1000ms). Example: 500, which means 500 milliseconds.
• Pause Time: The halt time between the movement of two slides when auto slide is enabled. Example: 3000 (3 seconds).
• Enable Ticker: Set to "Enabled" if you want the images to slide in continuous ticker mode without any pause. Navigation and pagination don't show in this mode.

Navigation and Controls

• Controls: It has 4 different options:
  • None: No navigation or pagination controls
  • Navigation: Shows previous/next arrow buttons on the left and right sides
  • Pager: Shows pagination dots at the bottom
  • Both: Shows both navigation arrows and pagination dots
• Controls Color: Option to select the color of the navigation controls and pagination dots.

Image Settings

• Grey Scale: Set it to "Enabled" if you want the images to automatically display in greyscale on initial page load. Images will show full color on hover.
• Show Images: Option to show the images randomly or sequentially (in the order they were added).
• Image Border Color: Select the border color of the images/thumbnails.

Video Popup Settings

• Popup Video Width: Mention the maximum width of the YouTube video popup. Don't mention "px" to the field. Example: 800.
• Popup Video Height: Mention the maximum height of the popup. Don't mention "px". Example: 600.

Slides

In the Slides tab, you can add any number of slides, add or edit them. You can also drag and sort the slides to reorder them.

Adding Slides

Click on the Add button (+) to add a new slide. Each slide has the following fields:

• Select an Image: Click to select the image which you would like to appear in the slide. The image will be automatically resized to match the slide width you specified in General Settings. Images are cached for optimal performance.
• Youtube Link: Add the YouTube URL (or Vimeo, or any video URL) which you want to appear inside the popup when clicking the image. Examples:
  • https://www.youtube.com/watch?v=VIDEO_ID
  • https://youtu.be/VIDEO_ID
  • https://vimeo.com/VIDEO_ID
• Alt Text: Add the alternative text to the image for better SEO results and accessibility. This text will be used as the image's alt attribute.
• Status: Option to show or hide the slide in the frontend. Set to "Enabled" to display the slide, or "Disabled" to hide it temporarily without deleting.

Managing Slides

• Reordering: Drag and drop slides to reorder them. The order in the backend determines the display order in the frontend (unless "Show Images" is set to "Random").
• Editing: Click on any slide to edit its settings.
• Deleting: Click the delete button (trash icon) to remove a slide.
• Adding Multiple Slides: Click the "Add" button multiple times to add several slides at once.

Note: Images are automatically resized and optimized when displayed. The resized images are cached in the /images/mod_sliding_gallery/ folder for faster loading on subsequent page loads.

Advanced

In the Advanced settings, you can find additional customization options.

Module Class Suffix

• Module Class Suffix: Add a suffix class to the module to add extra CSS and customize the module. This allows you to apply custom styling to this specific module instance.
• Example: If you enter "custom-gallery" as the module suffix, the module wrapper will have the class "jx-sliding-gallery custom-gallery", allowing you to target it with custom CSS.

Additional CSS

• Add Extra CSS: You can add extra CSS directly by adding it into this field. This CSS will be added inline to the page and can be used to override default styles or add custom animations.
• CSS Tips: Use this field to:
  • Override slider styles
  • Customize navigation button appearance
  • Add hover effects
  • Adjust spacing and margins
  • Target specific slides

Image Resizing

The module automatically resizes images using Joomla's native Image class. Images are resized to match the slide width you specified and cached for optimal performance. No additional configuration is needed for image resizing.

Cache Location: Resized images are stored in /images/mod_sliding_gallery/ folder. You can clear this cache by deleting the folder contents if needed.

Features

Once configured, the Sliding Youtube Gallery module will automatically display your image gallery with video popup functionality. No additional steps are required beyond configuration.

Key Features

• Responsive Design: The slider adapts to all screen sizes, ensuring perfect display on desktops, tablets, and mobile devices.
• Multiple Display Modes: Choose from horizontal, vertical, or static grid display modes.
• Video Popup Integration: Click on any thumbnail to open videos in an elegant Fancybox popup overlay.
• Automatic Image Resizing: Images are automatically resized and optimized for fast loading and consistent display.
• Navigation Controls: Previous/next arrows positioned on the left and right sides of the slider.
• Pagination Dots: Visual indicators showing the current slide position.
• Auto Slide: Enable automatic sliding with customizable speed and pause time.
• Ticker Mode: Continuous sliding without pause for dynamic displays.
• Greyscale Effect: Display images in greyscale by default, with full color on hover.
• Random or Sequential Display: Show images in order or randomly.
• Customizable Colors: Set colors for navigation controls, pagination, and image borders.
• Multiple Instances: Deploy multiple galleries on a single page.

FAQ

• How do I change the slider dimensions?

  • Adjust the Height of Slider and Width of Each Slide settings under General Settings. Enter values in pixels without the "px" suffix.

• Can I use videos other than YouTube?

  • Yes, the module supports YouTube, Vimeo, and other video platforms that work with Fancybox. Simply paste the video URL in the "Youtube Link" field.

• How do I enable automatic sliding?

  • Set Auto Slide to "Enabled" under General Settings. You can then adjust the Speed of Slide and Pause Time to control the timing.

• What is Ticker Mode?

  • Ticker Mode provides continuous, uninterrupted sliding without pause. Enable it by setting Enable Ticker to "Enabled". Navigation and pagination are hidden in ticker mode.

• How do I customize the navigation controls?

  • Use the Controls setting to choose between Navigation, Pager, Both, or None. Set the Controls Color to change the color of navigation arrows and pagination dots.

• Are images automatically resized?

  • Yes, images are automatically resized to match the slide width you specified. Resized images are cached for optimal performance.

• Can I add multiple galleries on one page?

  • Yes, you can create multiple module instances and assign them to different positions or menu items. Each instance can have its own configuration.

Troubleshooting

• Gallery Not Displaying: Ensure the module is assigned to a visible template position and published. Verify the settings are configured correctly and that you have added at least one slide with Status set to "Enabled".
• Images Not Resizing: Check that the Width of Each Slide is set correctly. Clear the image cache by deleting the /images/mod_sliding_gallery/ folder contents. Ensure the folder has write permissions.
• Video Popup Not Working: Verify that the video URL is correct and accessible. Check browser console for JavaScript errors. Ensure Fancybox JavaScript files are loading correctly.
• Navigation Controls Not Visible: Check that Controls is not set to "None". Verify the Controls Color is not the same as the background color. On mobile devices (screens smaller than 768px), navigation controls are automatically hidden for better usability.
• Slides Not Moving: If auto slide is enabled, check the Speed of Slide and Pause Time settings. Ensure Auto Slide is set to "Enabled".
• Styling Issues: Review the Additional CSS field for any conflicts. Check browser developer tools for CSS overrides. Clear browser cache and Joomla cache after making changes.
• Module Not Visible on Page: If you are using Firefox or Google Chrome, right-click on your website and click on "View Page Source". In the source code, search for text like "sliding-gallery" or "jx-slider". If you don't find the text, then it's confirmed that the module isn't activated on the page.
• Changes Not Reflecting: If Joomla cache is activated, try to clear it once after you make changes to the module parameter settings. Go to System > Clear Cache.
• Adding Module Inside Article: To add this module inside an article, go through the URL: https://docs.joomla.org/How_do_you_put_a_module_inside_an_article?