README

Magento 2 Product Gallery Extension: Zoom, Lightbox and Thumbnail Layouts (Hyva + Luma)

Replace the default Magento product gallery with a fully configurable one. Panth Product Gallery adds horizontal, vertical, and grid thumbnail layouts, inner zoom on hover, a fullscreen lightbox, touch swipe navigation, and keyboard controls to the product detail page. Native templates for Hyva (Alpine.js) and Luma are both included.

Product page: kishansavaliya.com/magento-2-productgallery.html

Quick Answer

What is Panth Product Gallery? It is a Magento 2 product gallery extension that replaces the default product image gallery on the product detail page with a configurable gallery offering three thumbnail layouts, inner zoom, a fullscreen lightbox, and touch swipe navigation.

What does it add to my store?

• A choice of three thumbnail layouts: horizontal (strip below the main image), vertical (side rail), or grid (all images visible at once).
• Inner zoom on hover so shoppers can examine product details without leaving the page.
• A fullscreen lightbox with keyboard navigation (arrow keys, Escape), image counter, and touch support.
• Swipe and arrow navigation so visitors can browse images on any device.
• Optional alt text integration with Panth Advanced SEO for automatic image alt text.

Which themes are supported? Both Hyva (Alpine.js, no jQuery) and Luma. The correct template is picked automatically based on the active theme.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.

Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to M2 migrations, and Adobe Commerce Cloud.

Kishan Savaliya Top Rated Plus on Upwork 100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist

Panth Infotech Agency Magento Development Team Custom Modules • Theme Design • Migrations Performance • SEO • Adobe Commerce Cloud

Visit our website: kishansavaliya.com  |  Get a quote: kishansavaliya.com/get-quote

Table of Contents

• Who Is It For
• Key Features
• Compatibility
• Installation
• Configuration
• How It Works
• FAQ
• Support
• About Panth Infotech
• Quick Links

Who Is It For

• Fashion, furniture, and home goods stores where shoppers need to see multiple images and zoom in on details before buying.
• Stores on Hyva that want a gallery built with Alpine.js and no jQuery dependency.
• Merchants frustrated with the default gallery who want real layout choices without custom coding.
• Stores where mobile traffic is high and touch swipe between images matters.
• Anyone using Panth Advanced SEO who wants automatic image alt text applied to every gallery image.

Key Features

Configurable Thumbnail Layouts

• Horizontal layout strips thumbnails below the main image (classic style).
• Vertical layout places thumbnails on a side rail on desktop, collapsing to a horizontal strip on mobile.
• Grid layout shows all images at once in a multi-column grid, similar to Amazon or Etsy.
• Automatic theme detection via Panth_Core serves the right template for Hyva or Luma.

Image Zoom

• Inner zoom on hover magnifies the image in place with no overlay, configurable zoom level.
• Large image preloading starts on first hover so zoom quality is immediate.

Fullscreen Lightbox

• Click to open the full-resolution image in a modal.
• Image counter shows the current position ("1 / 5") inside the lightbox.
• Keyboard navigation with arrow keys to move between images and Escape to close.
• Touch swipe inside the lightbox for mobile visitors.

Navigation Controls

• Prev/next arrows on the main image for quick browsing.
• Touch swipe navigation on the main image area on mobile devices.
• Infinite loop option so the gallery wraps from the last image back to the first.

SEO and Accessibility

• Proper alt and title attributes on every image.
• Optional integration with Panth Advanced SEO for template-based image alt text with per-image position suffixes.
• Semantic HTML with correct image attributes.

Built to Last

• Plugin-based gallery replacement via an afterToHtml plugin, so no layout XML overrides are needed.
• Observer for product collections to include media gallery data when the module is active.
• Admin configuration scoped per store view.
• Translation ready, all labels use Magento's __() function.
• Widget support to embed the gallery on any CMS page or block.

Compatibility

Requirement	Versions Supported
Magento Open Source	2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce	2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce Cloud	2.4.4 to 2.4.8
PHP	8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme	1.3+ (native Alpine.js support)
Luma Theme	Native support
Required Dependency	mage2kishan/module-core (free)
Optional Dependency	mage2kishan/module-advanced-seo (for auto alt text)

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-productgallery
bin/magento module:enable Panth_Core Panth_ProductGallery
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release from Packagist or from the product page.
2. Extract it to app/code/Panth/ProductGallery/ in your Magento install.
3. Make sure Panth_Core is installed too (required dependency).
4. Run the commands above starting from bin/magento module:enable.

Verify Installation

bin/magento module:status Panth_ProductGallery
# Expected: Module is enabled

After install, open:

Admin → Stores → Configuration → Panth Extensions → Product Gallery

Configuration

Go to Stores → Configuration → Panth Extensions → Product Gallery.

Setting	Group	Default	Description
Enable Module	General Settings	Yes	Master toggle. Disable to fall back to the default Magento gallery.
Thumbnail Layout	Gallery Layout	Horizontal	Choose Horizontal, Vertical, or Grid.
Enable Zoom	Zoom	Yes	Enable inner zoom on hover over the main gallery image.
Enable Lightbox	Lightbox	Yes	Enable the fullscreen lightbox when clicking gallery images.
Show Image Counter	Lightbox	Yes	Show "1 / 5" image counter inside the lightbox (only when lightbox is enabled).
Keyboard Navigation	Lightbox	Yes	Enable arrow key and Escape navigation inside the lightbox (only when lightbox is enabled).
Show Navigation Arrows	Navigation	Yes	Show prev/next arrows on the main image.
Enable Swipe	Navigation	Yes	Enable touch swipe navigation on mobile devices.
Infinite Loop	Navigation	No	Loop back to the first image after the last one.

Gallery colors and border radius are controlled via CSS variables in the theme config file rather than admin settings.

How It Works

1. When the module is enabled, an afterToHtml plugin intercepts the default gallery block output and replaces it with the Panth gallery template.
2. The module auto-detects the active theme through Panth_Core\Helper\Theme and serves the Alpine.js template for Hyva or the vanilla JS template for Luma.
3. The gallery reads layout, zoom, lightbox, and navigation settings from admin configuration and applies them at render time.
4. An observer on product collection load ensures that media gallery data is included whenever the module is active.
5. If Panth Advanced SEO is installed, the gallery reads its generated alt text for each image automatically.

FAQ

Does this replace the default Magento product gallery?

Yes. When the module is enabled, the default gallery.phtml output is replaced via an afterToHtml plugin. Disable the module from admin config to fall back to the Magento default.

Does it work on Hyva themes?

Yes. Panth Product Gallery ships a native Alpine.js template for Hyva with no jQuery, Knockout, or RequireJS. The module detects the active theme and serves the correct template for you.

Which thumbnail layouts are available?

Three: horizontal (strip below the main image), vertical (side rail on desktop), and grid (all images displayed at once). You pick the layout in admin configuration.

Does zoom work on mobile?

Inner zoom works on touch devices. Touch swipe navigation between images is also supported both in the main gallery and inside the lightbox.

Can I use the lightbox with keyboard navigation?

Yes. The lightbox supports arrow keys to move between images and Escape to close. This can be turned on or off in admin configuration.

Does it require Panth Advanced SEO?

No. The Advanced SEO integration is a soft dependency, meaning it works if Advanced SEO is installed, but the gallery runs fine without it. The integration just improves alt text quality.

Can I embed the gallery in a CMS page?

Yes. The module includes a widget definition so you can insert the gallery into any CMS page or block through the Magento widget system.

Does it work with multi-store setups?

Yes. All admin configuration settings are scoped per store view, following Magento's standard scope order.

Is it translation ready?

Yes. Every user-facing label uses Magento's __() function, so you can translate from a theme or language pack.

Support

Channel	Contact
Product Page	kishansavaliya.com/magento-2-productgallery.html
Email	kishansavaliyakb@gmail.com
Website	kishansavaliya.com
WhatsApp	+91 84012 70422
GitHub Issues	github.com/mage2sk/module-productgallery/issues
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech

Response time: 1-2 business days.

Need Custom Magento Development?

Looking for custom gallery layouts, PDP redesigns, Hyva migration, or performance optimization? Get a free quote in 24 hours:

     

About Panth Infotech

Built and maintained by Kishan Savaliya (kishansavaliya.com), a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.

Panth Infotech is a Magento 2 development agency that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.

Quick Links

Resource	Link
Product Page	magento-2-productgallery.html
Packagist	mage2kishan/module-productgallery
GitHub	mage2sk/module-productgallery
Website	kishansavaliya.com
Free Quote	kishansavaliya.com/get-quote
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech
Email	kishansavaliyakb@gmail.com
WhatsApp	+91 84012 70422

Ready to upgrade your Magento 2 product gallery?

SEO Keywords: magento 2 product gallery, magento 2 product gallery extension, magento 2 image zoom, magento 2 lightbox, magento 2 thumbnail layout, magento 2 gallery extension, hyva product gallery, hyva gallery alpine js, luma product gallery, magento 2 fullscreen lightbox, magento 2 inner zoom, magento 2 product image zoom, magento 2 gallery zoom, magento 2 gallery widget, magento 2 product page gallery, magento 2 PDP gallery, magento 2 responsive gallery, magento 2 mobile gallery, magento 2 product image slider, magento 2 horizontal thumbnail gallery, magento 2 vertical thumbnail gallery, magento 2 grid gallery, magento 2 swipe gallery, magento 2 keyboard gallery navigation, magento 2 image alt text, panth product gallery, panth infotech, mage2kishan product gallery, hire magento developer, top rated plus upwork, kishan savaliya magento, magento 2.4.8 gallery, php 8.4 magento gallery module, custom magento development