Toweringmedia Extension Docs

User Tools

Site Tools

You are here: start » magento2 » extensions » magento-2-product-image-gallery
magento2:extensions:magento-2-product-image-gallery

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

magento2:extensions:magento-2-product-image-gallery [2026/08/20 23:53] – created - external edit 127.0.0.1magento2:extensions:magento-2-product-image-gallery [2026/10/15 07:57] (current) – swatwik
Line 1: Line 1:
 ====== Magento 2 Product Image Gallery User Guide ====== ====== Magento 2 Product Image Gallery User Guide ======
- 
-===== Related overview ===== 
- 
-For a shopper-friendly overview of features and setup, see the [[https://toweringmedia.com/magento-2-product-image-gallery-user-guide|Magento 2 Product Image Gallery User Guide - Zoom & Fullscreen]] on the storefront. This wiki page remains the full technical documentation. 
  
 ===== Extension context ===== ===== Extension context =====
  
-This is a Toweringmedia Magento 2 extension guide for the current admin extension catalog.+Towering Media Magento 2 Product Image Gallery extension user guide.
  
 ===== Product page ===== ===== Product page =====
  
-  * [[https://toweringmedia.com/magento-2-product-image-gallery|Magento 2 Product Image Gallery]] (SKU ''module-product-image-gallery'')+  * [[https://toweringmedia.com/magento-2-product-image-gallery|Magento 2 Product Image Gallery]]
  
-===== Overview =====+===== Extension overview =====
  
-This extension replaces the default Magento product image gallery with a Magic Zoom-style gallery built on Alpine.js. It provides hover zoom on desktop with a configurable zoom ratio, and is designed to work on both standard Magento and Hyvä storefronts. Magento product video is supported alongside images.+Magento 2 Product Image Gallery helps shoppers take a closer look at your products. It replaces the standard gallery on Hyvä product pages, so shoppers can zoom in, view other angles and open photos in a larger viewer. 
 + 
 +The gallery uses Alpine.js and gives you a Magic Zoom-style experience without the Magic Zoom JavaScript library. You can manage the gallery and viewing controls from Magento admin.
  
 ===== What this extension does ===== ===== What this extension does =====
  
-  * Magic Zoom-style product image gallery. +  * Let shoppers zoom in on product details with a magnifying lens, inner zoom or a zoom window. 
-  * Desktop hover zoom with a configurable zoom ratio. +  * Open product photos in a larger viewer with a blurred background, a title and simple navigation. 
-  * Alpine.js implementation suitable for Hyvä storefronts. +  * Use thumbnails to move between photos. The fullscreen viewer supports carousel and stacked thumbnail layouts. 
-  * Works alongside Magento product video.+  * Show YouTube and Vimeo videos alongside product photos. 
 +  * Offer keyboard navigation and configurable pinch zoom in the fullscreen viewer. 
 +  * Adjust zoom strength, image switching, thumbnail position, hints and image transitions to suit your store.
  
-===== Requirements =====+===== Installation =====
  
-  * Magento 2.4.x (Open Source or Adobe Commerce). +Please refer to the installation guide in the following article:
-  * PHP: ^8.1 || ^8.2 || ^8.3 || ^8.4 (as declared by the published package). +
-  * A current Toweringmedia license and Composer credentials for ''https://composer.toweringmedia.com/''. +
-  * Uses Magento's Catalog and Product Video modules, which are part of core Magento.+
  
-===== Installation =====+  * [[https://toweringmedia.com/installation|Towering Media Installation Guide]]
  
-Install and validate in a staging environment before production rollout.+===== Admin configuration =====
  
-<code bash> +Go to Stores → Configuration → Towering Media → Product Image Gallery. If you manage more than one store view, choose the one you want to update from the Scope selector.
-cd /path/to/magento +
-composer require toweringmedia/module-product-image-gallery+
  
-bin/magento module:enable Toweringmedia_ProductImageGallery +{{:magento2:extensions:01-pmg-config-general.png?400|}}
-bin/magento setup:upgrade +
-bin/magento setup:di:compile +
-bin/magento setup:static-content:deploy -f +
-bin/magento cache:flush +
-</code>+
  
-Currently published versions at the time of writing:+==== General ====
  
-  * ''toweringmedia/module-product-image-gallery'' — 1.0.13+**Enable Gallery:** Choose Yes to turn on the extension’s gallery. Choose No to use the native Magento product gallery template.
  
-Toweringmedia packages are served from the licensed Composer repository ''https://composer.toweringmedia.com/''. If Composer reports that the package could not be found, your credentials are missing or the license does not cover this package yet. Retrieve your keys from **My Account** on toweringmedia.com, or contact [[mailto:support@toweringmedia.com|support@toweringmedia.com]].+==== Desktop Zoom ====
  
-General installation notes that apply to every Toweringmedia extension are in the [[https://toweringmedia.com/installation|installation guide]].+**Enable Hover Zoom:** Choose Yes to let shoppers zoom in by hovering over a product photo on desktop. A lens marks the area being enlarged, and a preview appears beside the image.
  
-===== Configuration =====+**Zoom Magnification:** Enter a value from 1.0 to 10.0 to set the zoom strength. A higher number gives a closer view. The example shown uses 2.4. Enable Hover Zoom must be set to Yes for this setting to work.
  
-  * Stores > Configuration > Towering Media > **Product Image Gallery** (config section ''toweringmedia_product_image_gallery''). +==== Fullscreen Viewer ====
-  * Groups: ''general'' (enable) and ''desktop_zoom'' (enable hover zoom, zoom ratio).+
  
-===== Basic usage and what to expect =====+{{:magento2:extensions:02-pmg-config-fullscreen.png?400|}}
  
-  - Enable the gallery, flush cache, and redeploy static content, then open a product with several images. +  * **Enable Fullscreen:** Choose Yes to let shoppers open the larger viewer by clicking the image or expand button. They can also press Enter or Space when the image control has keyboard focus. Choose No to turn off these opening actions. 
-  - Confirm thumbnails, the main image, hover zoom, and any product video all behave correctly on desktop and mobile.+  * **Show Main Image Arrows:** Show previous and next arrows over the main image. These appear when the product has more than one gallery item. 
 +  * **Keyboard Navigation:** Let shoppers use the arrow keys to change images and Escape to close the fullscreen viewer. 
 +  * **Touch Swipe:** Let shoppers swipe left or right on the main image to change slides. 
 +  * **Show Thumbnails:** Show a row of thumbnails below the main image when there is more than one gallery item. 
 +  * **Show Fullscreen Title:** Show the product title or image caption below the photo in fullscreen mode.
  
-===== Notes and limitations =====+When you have finished, click Save Config.
  
-  * This module replaces storefront gallery markup, so a static content deploy and cache flush are required after install and after theme changes.+===== Frontend features =====
  
-===== Validation checklist =====+==== Product image gallery ====
  
-  * ''bin/magento module:status'' shows the module(s) as enabled. +The main photo sits beside the product details, with thumbnails below it. Shoppers can use the arrows to browse the photos or click the expand icon in the bottom-right corner to open the larger viewer.
-  * Extension configuration saves without errors in Admin. +
-  * The admin screens listed above are reachable and load without error. +
-  * Expected storefront/admin behavior is present after a cache flush. +
-  * No critical PHP/JS errors appear in ''var/log/'' during the primary test flow.+
  
-===== Troubleshooting =====+{{:magento2:extensions:01-product-gallery.png?400|}}
  
-  * **Composer cannot find the package**: confirm the ''https://composer.toweringmedia.com/'' repository and your credentials are present in ''auth.json'', and that your license covers this package. +==== Hover zoom ====
-  * **Feature not visible**: verify module status, flush cache, and redeploy static content. +
-  * **Admin setting not applying**: clear cache and confirm the config scope (default / website / store view). +
-  * **Unexpected behavior**: retest with only the required related modules enabled.+
  
-===== Support =====+Moving the pointer over the photo brings up a zoom preview beside it. The highlighted area shows which part of the photo is being enlarged, making details such as fabric, stitching and fastenings easier to see.
  
-  * [[mailto:support@toweringmedia.com|support@toweringmedia.com]] +{{:magento2:extensions:02-hover-zoom.png?400|}} 
-  * [[https://toweringmedia.com/magento-maintenance-support|Magento maintenance and support]]+ 
 +==== Thumbnail navigation ==== 
 + 
 +Click a thumbnail to see that photo in the main gallery. In this example, the selected thumbnail has a blue border. Shoppers can move between front, back and close-up views without leaving the page. 
 + 
 +{{:magento2:extensions:03-thumbnail.png?400|}} 
 + 
 +==== Fullscreen viewer ==== 
 + 
 +Click the image or expand icon to open the larger viewer. The photo sits in the centre, with a blurred version behind it and the product title below. Click the close icon in the top-right corner to return to the product page. 
 + 
 +{{:magento2:extensions:04-fullscreen.png?400|}} 
 + 
 +==== Browse images in fullscreen ==== 
 + 
 +Use the left and right arrows to browse the other photos without closing the viewer. Shoppers can check each angle at the larger size, then return to the product page when they are done. 
 + 
 +{{:magento2:extensions:05-fullscreen-next.png?400|}} 
 + 
 +===== Validation checklist ===== 
 + 
 +  * Open a product page and check that the main photo and thumbnails load. 
 +  * Click each thumbnail and make sure the main photo changes. 
 +  * On a product with several photos, test both navigation arrows. 
 +  * On desktop, hover over the photo and check that the zoom preview follows the selected area. 
 +  * Open the fullscreen viewer, browse the photos and close it. 
 +  * If Show Fullscreen Title is enabled, check the title below the photo. 
 +  * Test the arrow keys, Escape and mobile swiping with their settings enabled. 
 +  * After saving settings, check the product page in the store view you updated. 
 + 
 +===== Troubleshooting ===== 
 + 
 +  * **Gallery is not showing:** Make sure Enable Gallery is set to Yes in the correct store view, then clear Magento cache. 
 +  * **Hover zoom is not working:** Set Enable Hover Zoom to Yes and test with a mouse on desktop. 
 +  * **The zoomed photo looks blurry:** Try a higher-resolution source image or lower the Zoom Magnification value. 
 +  * **The larger viewer will not open:** Check that Enable Fullscreen is set to Yes. 
 +  * **Arrows or thumbnails are missing:** Check their settings and make sure the product has more than one gallery image. 
 +  * **Keys or swiping do not respond:** Enable Keyboard Navigation or Touch Swipe. Test the arrow keys and Escape with the fullscreen viewer open. 
 +  * **Saved changes are not showing:** Check the store view, click Save Config, clear Magento cache and reload the product page.
  
 ===== Related Magento 2 docs ===== ===== Related Magento 2 docs =====
Line 92: Line 116:
   * [[magento2:extensions:start|Magento 2 extension index]]   * [[magento2:extensions:start|Magento 2 extension index]]
   * [[start|Global docs home]]   * [[start|Global docs home]]
- 
magento2/extensions/magento-2-product-image-gallery.txt · Last modified: by swatwik