product_gallery

Provides field formatter for image and media fields with customizable functionality for creating an interactive product gallery with features such as main image display, thumbnail arrangement, zoom effects, hover magnification, and more.

Features

Image Style Configuration

Customize image styles for different devices:

• Large Devices: Select an image style optimized for large screens such as desktops.
• Medium Devices: Choose a style for medium-sized devices like tablets or small laptops.
• Small Devices: Define an image style for mobile devices or smaller screens.
• Thumbnail Image Style: Apply a style to the thumbnails used in the gallery.

Thumbnail Styling

Advanced thumbnail settings:

• Thumbnail Border Style: Choose between round or square borders for the thumbnails.
• Allow Thumbnail Overlap: Enable overlapping of adjacent thumbnails for a more dynamic gallery layout.
• Thumbnail Overlap Threshold: Set the minimum number of thumbnails required before the overlap effect is applied.

Zoom & Magnifier Effects

Interactive zoom and magnification features:

• Mouse Wheel Zoom: Allow users to zoom in and out on product images using the mouse wheel.
• Magnifier Tool: Show a magnifier icon when hovering over an image, providing a close-up view of the product.
• Default Zoom Scale: Set the initial zoom scale when the image is loaded (e.g., 2x for zoomed-in view).

Custom Layout and Classes

Flexible layout customization:

• Image Class: Add a custom CSS class to the product image for advanced styling.
• Image Wrapper Class: Assign a custom CSS class to the image container for more control over layout.
• Container Width: Define the maximum width of the image container. Choose from pixels (px), em, rem, or percentage (%) as units of measurement.

Thumbnail Dimensions & Border Color

Customize the appearance of thumbnails:

• Thumbnail Width: Set the width of the thumbnails (ranging from 20px to 140px).
• Thumbnail Border Color: Define the color of the thumbnail borders. You can use hex, RGB, HSL, or named CSS colors (e.g., #007bff for blue).

Additional Settings

Other important settings for a refined gallery experience:

• Enable Zoom on Mouse Wheel: Allow zooming in and out using the mouse wheel for better product inspection.
• Thumbnail Overlap Threshold: Set the number of thumbnails needed to apply the overlap effect between thumbnails.

Installation
1. Download and install the module in the usual way. Like all Drupal modules, it can be installed via Composer using the following command:
composer require drupal/product_gallery
Visit https://www.drupal.org/node/1897420 for further information.
2. Navigate to the Drupal admin interface and enable the "Product Gallery" module.

Support
For any assistance, bug reports, issues, or feature requests, please visit the module's issue queue on Drupal.org:
https://www.drupal.org/project/issues/product_gallery