jQuery Thumbnail Scroller 1.7 is a responsive image gallery for Joomla 4, 5, and 6, rebuilt with native JavaScript. The established product name remains for continuity, but the module does not load jQuery, jQuery UI, Fancybox, or an easing plug-in.

Create horizontal or vertical galleries from an image folder or individually managed items. Visitors can browse using arrow controls, mouse wheel, pointer drag, touch swipe, or keyboard, then inspect the original image in the included accessible lightbox.

Highlights

• Clean Strip, Caption Cards, Filmstrip, and Editorial layouts
• Light, Dark, Soft Sand, Ink, and Forest themes
• Horizontal and vertical orientations
• Responsive thumbnail sizing and native scroll snapping
• Autoplay, looping, item/page steps, edge hints, and position counter
• Zoom, Fade, Slide Up, or no lightbox effect
• Keyboard support, focus management, semantic labels, and reduced-motion support

Requirements

• Joomla 4, 5, or 6
• PHP 8.1 or later recommended
• Local gallery images stored under the Joomla site root

Install

1. Download mod_thumbnail_scroller_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 jQuery Thumbnail Scroller.
6. Select an Image Source and complete its related settings.
7. Choose a module position, menu assignment, and status, then save.

Fast folder gallery

1. Upload images to a folder such as images/portfolio.
2. Set Image Source to From Folder.
3. Enter images/portfolio in Image Folder Path.
4. Choose a layout and publish the module.

After upgrading or changing scripts, clear Joomla cache and perform a browser hard refresh.

Folder mode creates a gallery automatically from supported images in one local directory.

• Image Source (image_source) — choose From Folder or Custom Items. Default: From Folder.
• Image Folder Path (folder_path) — site-root-relative path shown in folder mode. Default: images/woo. Example: images/portfolio. Do not enter an external URL.
• Captions from Filenames (folder_captions) — converts filenames into readable captions. Default: Yes. For example, 01_mountain-lake.jpg becomes “Mountain Lake”.
• Sort Order (sort_order) — Filename A → Z, Filename Z → A, or Random. Default: Filename A → Z.
• Image Limit (image_limit) — maximum number of images to render, from 0 to 100. Default: 0, which shows all discovered images.

Supported formats are JPG/JPEG, PNG, GIF, WebP, and AVIF. Folder mode is best for quickly maintained galleries whose title and caption can come from the filename.

Set Image Source to Custom Items to display the repeatable Gallery Items field (items). Add, remove, and reorder rows to control the gallery sequence.

Fields in every gallery item

• Image (image) — required main image. It is used in the lightbox and as the thumbnail when no separate thumbnail is supplied.
• Custom Thumbnail (thumbnail) — optional smaller or differently cropped preview image.
• Title (title) — short item heading used in visible captions and the lightbox caption.
• Caption (caption) — optional supporting description.
• Alternative Text (alt) — accessible description of the image. Describe meaningful content instead of repeating “image of”.
• Optional Link (link) — local or external destination. When the lightbox is disabled, clicking the item follows this link.

Use custom items for product galleries, portfolios, campaigns, or any gallery requiring dedicated thumbnails, hand-written captions, accessibility text, links, and an exact sequence.

• Gallery Layout (layout_style) — default: Clean Strip.
  • Clean Strip (clean) — image-first rail with compact caption treatment.
  • Caption Cards (cards) — catalogue-style cards with text below the image.
  • Filmstrip (filmstrip) — cinematic presentation with reel-inspired details.
  • Editorial (editorial) — varied visual rhythm for story-led imagery.
• Theme (theme) — Light, Dark, Soft Sand, Ink, or Forest. Default: Light. Themes set the rail surface, text, border, and control colours.
• Orientation (orientation) — Horizontal or Vertical. Default: Horizontal. Navigation keys and wheel behaviour follow the selected axis.
• Accent Colour (accent_color) — accepts a Joomla colour value, including RGBA. Default: #4f46e5. Used for active and progress details.

Layout, theme, and orientation can be combined freely. Verify the selected module position has enough height when using Vertical orientation.

• Thumbnail Width (px) (thumb_width) — desktop item width from 80 to 640. Default: 220.
• Thumbnail Height (px) (thumb_height) — image height from 60 to 640. Default: 150.
• Mobile Thumbnail Width (px) (mobile_thumb_width) — item width at the module’s mobile breakpoint, from 80 to 480. Default: 170.
• Gap (px) (gap) — spacing between items from 0 to 60. Default: 14.
• Corner Radius (px) (radius) — item and image rounding from 0 to 50. Default: 14; use 0 for square corners.
• Image Fit (object_fit) — Cover fills the frame and may crop edges; Contain shows the complete image and may leave empty space. Default: Cover.

For consistent rails, use source images with similar aspect ratios. Thumbnail dimensions affect generated previews; clear images/thumbnail_scroller/cache if old generated dimensions persist.

• Show Captions (show_captions) — shows item titles/captions according to the chosen layout. Default: Yes.
• Show Position Counter (show_counter) — displays the current position and total, for example 2 / 12. Default: Yes.
• Edge Fade Hint (edge_fade) — adds a subtle visual cue that more content is available beyond the visible edge. Default: Yes.

These options only control visible presentation. Accessible names and gallery semantics remain available to assistive technology where applicable.

• Previous / Next Arrows (show_arrows) — displays rail navigation buttons. Default: Yes.
• Arrow Scroll Step (scroll_step) — One Item advances to the next item; Visible Page advances approximately one viewport. Default: One Item.
• Mouse Wheel Navigation (mouse_wheel) — maps wheel input to the rail axis. Default: Yes. The page keeps scrolling when the rail has reached its boundary.
• Drag / Touch Swipe (drag_scroll) — enables pointer dragging and touch swiping. Default: Yes. A normal click still opens the item; movement is treated as a drag.
• Keyboard Navigation (keyboard) — enables Left/Right keys for horizontal rails, Up/Down for vertical rails, plus Home and End. Default: Yes.
• Loop Navigation (loop) — returns to the opposite end when navigation passes the first or last item. Default: Yes.

• Autoplay (autoplay) — automatically advances the gallery. Default: No.
• Autoplay Delay (ms) (autoplay_delay) — time between advances, from 1500 to 60000 milliseconds. Default: 3500. This field appears only when Autoplay is enabled.
• Pause on Hover / Focus (pause_on_hover) — pauses while a pointer is over the module or an element inside it has keyboard focus. Default: Yes. This field appears only when Autoplay is enabled.
• Respect Reduced Motion (respect_reduced_motion) — honours the visitor’s prefers-reduced-motion setting by disabling autoplay and smooth animated movement. Default: Yes.

For readable galleries, keep the delay long enough for captions to be understood. Reduced-motion support should normally remain enabled.

• Enable Lightbox (lightbox) — opens the full image when a thumbnail is clicked. Default: Yes. Disable it when custom items should behave as links.
• Opening Effect (lightbox_effect) — Zoom, Fade, Slide Up, or None. Default: Zoom. Shown only when the lightbox is enabled.
• Overlay Colour (overlay_color) — colour and opacity behind the viewer. Default: rgba(3, 7, 18, 0.94).
• Lightbox Caption (show_lightbox_caption) — displays the title and caption beneath the full image. Default: Yes.
• Download Button (show_download) — provides a direct download action for the current original image. Default: No.

The viewer includes previous/next controls, image counter, backdrop and Escape closing, Left/Right keyboard navigation, focus trapping, and focus restoration. When lightbox is disabled, a custom item’s Optional Link becomes its click destination.

• Module Class Suffix (moduleclass_sfx) — appends a custom class suffix for template-specific styling.
• Additional CSS (extra_css) — raw CSS loaded for this module instance. Scope every selector with #jx-ts-{moduleId} to prevent styles leaking into another gallery. Example: #jx-ts-123 .jx-ts__item { border-width: 2px; }.
• Alternative Layout (layout) — selects a Joomla module layout override supplied by the active site template.

Template override

Copy modules/mod_thumbnail_scroller/tmpl/default.php to templates/YOUR_TEMPLATE/html/mod_thumbnail_scroller/default.php, edit the copy, and select it using Alternative Layout when required. Keep data attributes and accessible controls intact so JavaScript behaviour continues to work.

Version 1.7 replaces the legacy jQuery scroller and Fancybox implementation. Back up the site before upgrading, install the package using Joomla’s extension installer, then open and save every existing module instance.

Automatically remapped parameters

• folder or filePath → folder_path (Image Folder Path)
• checker → image_source (Image Source)
• img_th_height → thumb_height (Thumbnail Height)
• autoscroll → autoplay (Autoplay)
• autoScrollingDelay → autoplay_delay (Autoplay Delay)

Legacy easing, acceleration, jQuery-loading, Fancybox, and old scroll geometry options have no direct equivalent. The new module uses native scrolling, scroll snapping, and its own accessible lightbox. Review layout, thumbnail width, mobile width, controls, and lightbox settings after upgrading.

Portfolio rail

Folder source, Clean Strip, Light theme, horizontal orientation, 220 × 150 thumbnails, captions and lightbox enabled.

Product cards

Custom Items, Caption Cards, Soft Sand theme, dedicated product thumbnails, hand-written alt text, and links. Disable the lightbox when cards should open product pages.

Cinematic gallery

Folder source, Filmstrip layout, Ink theme, wide thumbnails, dark overlay, position counter, drag, and keyboard navigation.

Vertical sidebar showcase

Custom Items, Vertical orientation, contain fit, one-item arrow step, wheel navigation, and autoplay disabled. Ensure the template position provides a suitable fixed or minimum height.

Accessibility checklist

• Write meaningful Alternative Text for custom items.
• Keep Keyboard Navigation and Respect Reduced Motion enabled.
• Use sufficient contrast for Accent Colour and Overlay Colour.
• Do not place essential information only in captions that are hidden.
• Test at keyboard-only and mobile widths before publishing.

• No images appear

  • Confirm the selected source is correct. In folder mode, check that the site-relative path exists and contains JPG/JPEG, PNG, GIF, WebP, or AVIF files. In custom mode, ensure each row has its required Image.

• Clicking a thumbnail does nothing

  • Confirm Enable Lightbox is on, or add an Optional Link when it is off. Clear Joomla/browser caches so the current 1.7 assets load, and check the browser console for blocked or stale scripts.

• Thumbnails use old dimensions

  • Delete generated files under images/thumbnail_scroller/cache and reload the page.

• Wheel does not move the rail

  • Enable Mouse Wheel Navigation. Wheel input intentionally returns to normal page scrolling at the start and end of the rail.

• Autoplay does not start

  • Check Autoplay, Pause on Hover / Focus, browser-tab visibility, and the operating system’s reduced-motion preference.

• Vertical gallery is too short or clipped

  • Give the module position enough height and check template overflow rules.

• Custom CSS affects other modules

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

• Does version 1.7 load jQuery?

  • No. The product name is retained for continuity only; the gallery and lightbox use native JavaScript.

• Can several scrollers appear on one page?

  • Yes. Every instance has its own settings, controls, and generated module ID.

• Can thumbnails open links instead of the lightbox?

  • Yes. Use Custom Items, add Optional Links, and disable Enable Lightbox.

• Can the gallery use external image URLs?

  • The built-in media and folder workflows are intended for local Joomla media. Store images locally for predictable thumbnails, permissions, and performance.

• Does it work on touch devices?

  • Yes. It supports native scrolling, pointer drag, and touch swipe with responsive thumbnail sizing.

• Where can I get help?

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