Sliding YouTube Gallery 1.7 is a responsive video carousel and grid module for Joomla 5. It presents local thumbnail images and opens their YouTube videos in a built-in responsive popup.

Version 1.7 is a complete rebuild using the Joomla service-provider and dispatcher architecture, Web Asset Manager, native JavaScript, and module-scoped CSS. It does not load jQuery, bxSlider, Fancybox, Font Awesome, or the former grayscale plugin.

Highlights

• Horizontal carousel, vertical carousel, and responsive grid
• Separate desktop, tablet, and mobile visible-video counts
• Arrows, pagination dots, pointer drag, touch swipe, and keyboard navigation
• Autoplay, continuous ticker, looping, and pause controls
• Responsive YouTube popup with privacy-enhanced mode
• Thumbnail fit, grayscale, height, spacing, border, radius, and accent controls
• Accessible labels, visible focus, lazy loading, and reduced-motion support
• Compatibility handling for existing repeatable slides and legacy settings

Requirements

• Joomla 5
• PHP 8.1 or later recommended
• Thumbnail images stored in Joomla Media
• Valid YouTube video URLs

Install

1. Download mod_sliding_gallery_1.7.zip.
2. Open System > Install > Extensions.
3. Upload and install the ZIP package.
4. Open Content > Site Modules and select New.
5. Choose Sliding YouTube Gallery.
6. Add at least one published video under Videos.
7. Choose a layout and review the responsive settings.
8. Select a module position and menu assignment, publish, and save.

Quick setup

For a standard gallery, use Horizontal carousel, 4 / 2 / 1 visible videos, 180px thumbnail height, Arrows and dots, Privacy-Enhanced Mode enabled, and Play Video When Opened enabled.

After upgrading or replacing assets, clear Joomla cache and perform a browser hard refresh.

The Videos tab contains the repeatable Gallery Videos field (slides). Use Add, Remove, and drag controls to manage the sequence.

Fields for every video

• Thumbnail (imgname) — required local image displayed in the gallery.
• YouTube URL (imglink) — required video link. Supported formats include youtube.com/watch?v=..., youtu.be/..., youtube.com/shorts/..., and YouTube embed URLs.
• Video Title (title) — shown over the thumbnail and in the popup header. If empty, the module uses Alt Text or a generated video label.
• Thumbnail Alt Text (imgalt) — accessible description of the thumbnail. Describe meaningful visual content rather than writing “image of”.
• Status (imgstatus) — Show includes the video; Hide keeps the row configured but removes it from the frontend.

The module validates the YouTube host and 11-character video ID. Invalid URLs and rows without a thumbnail are skipped safely.

• Gallery Layout (effect) — default: Horizontal carousel.
  • Horizontal carousel moves videos left and right.
  • Vertical carousel stacks and moves videos up and down.
  • Responsive grid displays all videos in an auto-fitting grid without carousel motion.
• Visible Videos — Desktop (per_desktop) — 1 to 8, default 4. Used when the module is at least 980px wide.
• Visible Videos — Tablet (per_tablet) — 1 to 5, default 2. Used between mobile and desktop widths.
• Visible Videos — Mobile (per_mobile) — 1 to 2, default 1. Used below 640px.
• Thumbnail Height (slide_height) — 100 to 600px, default 180.
• Gap Between Videos (gap) — 0 to 48px, default 16.

The visible-video fields apply to carousel layouts. Sizing is based on the module container, so a gallery in a narrow sidebar can adapt even on a wide browser window.

• Autoplay Gallery (auto) — automatically advances the carousel. Default: Yes.
• Time Between Slides (pausetime) — autoplay delay from 1000 to 60000ms. Default: 4000.
• Transition Duration (speed) — animation duration from 100 to 3000ms. Default: 500.
• Pause on Hover or Focus (pause_on_hover) — pauses while a pointer is over the gallery or an element inside has keyboard focus. Default: Yes.
• Loop Gallery (loop) — wraps from the final carousel position to the first and vice versa. Default: Yes.
• Continuous Ticker (tickerEnable) — advances with linear continuous-style movement in horizontal or vertical mode. Default: No.

Autoplay does not run in Grid layout, when only one carousel position exists, or when the visitor has enabled reduced motion. It also pauses while the browser tab is hidden.

• Carousel Controls (controls) — None, Previous / next arrows, Pagination dots, or Arrows and dots. Default: Arrows and dots.
• Control and Play Colour (navigation) — accent used by arrows, active pagination, play buttons, and focus details. Default: #2563eb.

Visitor controls

• Click or tap previous and next arrows.
• Select a pagination dot to move directly to a carousel position.
• Swipe on touch screens or drag with a pointer.
• Use Left/Right or Up/Down keyboard arrows while focus is inside the carousel viewport.

Arrow controls use 44 × 44px touch targets. On small screens, horizontal arrows overlay the thumbnail edges so they do not reduce the available slide width.

• Image Fit (image_fit) — Crop to fill uses cover and may crop image edges; Show complete image uses contain and may leave empty space. Default: Crop to fill.
• Greyscale Until Hover (greyscale) — starts thumbnails in grayscale and restores full colour on pointer hover or keyboard focus. Default: No.
• Thumbnail Border Colour (img_border_color) — default: #e2e8f0.
• Corner Radius (radius) — 0 to 40px, default 16. Use 0 for square corners.

The module also adds a readable title gradient, centered play control, subtle shadow, hover feedback, and visible keyboard focus. Use source thumbnails with similar aspect ratios for the most consistent result.

• Maximum Popup Width (videoWidth) — 320 to 1920px, default 960. The popup still shrinks to fit tablets and phones.
• YouTube Privacy-Enhanced Mode (privacy_mode) — loads the player from youtube-nocookie.com. Default: Yes.
• Play Video When Opened (autoplay_video) — requests playback after a visitor deliberately opens the popup. Default: Yes.

The iframe is created only when a video is opened, reducing initial page work and avoiding a YouTube request for every gallery item. The player uses a responsive 16:9 frame and supports fullscreen.

Popup controls

• Use the labelled close button.
• Click or tap the dark backdrop.
• Press Escape.
• After closing, keyboard focus returns to the thumbnail that opened the video.

• Module Class Suffix (moduleclass_sfx) — appends a custom class to the gallery root for template-specific styling.
• Alternative Layout (layout) — selects a Joomla module layout override supplied by the active template.
• Additional CSS (extraCSS) — optional CSS loaded with this module. Scope selectors to the generated ID to prevent rules affecting another gallery.

Scoped CSS example

#jx-syg-123 .jx-syg__video { box-shadow: none; }

Replace 123 with the module ID shown in the frontend markup. The module strips style tags, JavaScript URLs, CSS expressions, and imports, but administrators should still add only trusted CSS.

Template override

Copy modules/mod_sliding_gallery/tmpl/default.php to templates/YOUR_TEMPLATE/html/mod_sliding_gallery/default.php. Preserve the data-jx-syg attributes and control hooks so the JavaScript continues to initialize correctly.

Version 1.7 replaces the legacy jQuery, bxSlider, Fancybox, Font Awesome, and grayscale implementation. Back up the site, install the 1.7 ZIP using Joomla’s extension installer, clear caches, then open and save each existing module instance.

Compatibility handling

• Existing slides0, slides1, and similar repeatable slide rows are read without re-entry.
• Legacy effect=none is mapped to the Responsive grid layout.
• max_slide and min_slide provide fallbacks for desktop and tablet visible counts.
• Legacy height, autoplay, pause, speed, ticker, controls, grayscale, navigation colour, border colour, popup width, and random/sequence values are recognized where relevant.

Obsolete slide-width, move-count, Timthumb-labelled resizing, Fancybox sizing, external-library, and dead bootstrap parameters are intentionally removed. Review the new Layout, Playback, Appearance, and Video Popup tabs after upgrading.

Homepage video rail

Horizontal carousel, 4 / 2 / 1 visible videos, 180px height, arrows and dots, autoplay enabled, and a 4500ms delay.

Sidebar playlist

Vertical carousel, 2 / 1 / 1 visible videos, autoplay disabled, arrows enabled, and compact thumbnail height.

Video library

Responsive grid, 220–260px thumbnail height, contain fit for mixed artwork, and no carousel controls.

Cinematic ticker

Horizontal carousel, Continuous Ticker enabled, dark thumbnail artwork, grayscale enabled, and a strong red or blue accent.

Accessibility checklist

• Write meaningful Thumbnail Alt Text for every video.
• Give every video a concise, unique title.
• Choose accent and border colours with sufficient contrast.
• Keep controls visible when visitors need manual navigation.
• Do not depend on autoplay to expose essential content.
• Test the carousel and popup with keyboard only.
• Test at mobile, tablet, and desktop widths before publishing.

• No gallery appears

  • Confirm the module is published and assigned to the current menu item and a visible position. Add at least one row with Thumbnail, a valid YouTube URL, and Status set to Show.

• A video row is skipped

  • Check that the thumbnail is selected and the URL uses a supported YouTube, youtu.be, Shorts, or embed format with a valid video ID.

• The popup is black or playback is unavailable

  • Confirm the video owner allows embedding, the video is public, and browser privacy or content-security settings do not block YouTube. Try opening the same embed URL directly.

• Autoplay does not start

  • Check Autoplay Gallery, Pause on Hover or Focus, browser-tab visibility, and the operating system’s reduced-motion preference. Grid layout does not autoplay.

• The gallery shows fewer videos than configured

  • The count follows the module container width, not only the browser width, and never exceeds the number of published videos.

• Old styling or scripts remain

  • Clear Joomla cache, CDN/proxy cache, and browser cache. Confirm the loaded asset URLs end with sliding-gallery.css?1.7.0 and sliding-gallery.js?1.7.0.

• Custom CSS affects other modules

  • Scope every selector to the generated module ID, such as #jx-syg-123.

• Does version 1.7 require jQuery?

  • No. The carousel and popup use native JavaScript.

• Can I use Vimeo or another video provider?

  • No. Version 1.7 validates YouTube URLs and builds a YouTube embed. Use a YouTube, youtu.be, Shorts, or YouTube embed URL.

• Can several galleries appear on one page?

  • Yes. Each instance has its own module ID, settings, controls, carousel state, and popup.

• Are YouTube players loaded immediately?

  • No. Thumbnails render first and the iframe is created only after a visitor opens a video.

• Does the module work on touch devices?

  • Yes. It supports responsive sizing, touch swipe, pointer drag, and 44px controls.

• Where can I get help?

  • Visit support.joomlax.com. Include the Joomla and PHP versions, module settings, page URL, and browser-console errors.