PHPackages rollpix/module-product-gallery - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. rollpix/module-product-gallery ActiveMagento2-module[Image & Media](/categories/media) rollpix/module-product-gallery ============================== Modern editorial-style product gallery for Magento 2 with vertical, grid, fashion and slider layouts, hover zoom, lightbox, sticky panel, thumbnail navigation, shimmer loading, fade-in animations, image counter, mobile carousel, and video support (MP4, YouTube, Vimeo) on product pages and category listings 1.7.7(2mo ago)288↓50%1MITJavaScriptPHP ~8.1.0||~8.2.0||~8.3.0||~8.4.0 Since Jan 26Pushed 2mo agoCompare [ Source](https://github.com/ROLLPIX/M2-ProductGalleryStyle)[ Packagist](https://packagist.org/packages/rollpix/module-product-gallery)[ Docs](https://github.com/ROLLPIX/M2-ProductGalleryStyle)[ RSS](/packages/rollpix-module-product-gallery/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (4)Versions (22)Used By (0) Rollpix Product Gallery for Magento 2 ===================================== [](#rollpix-product-gallery-for-magento-2) [Version en espanol](README_ES.md) SPONSOR: [ROLLPIX](https://www.rollpix.com) A modern, editorial-style product gallery module for Magento 2 that replaces the default Fotorama gallery. Features four layout modes (vertical, grid, fashion, slider), five zoom types (hover, click, lightbox, modal, disabled), thumbnail navigation with sliding highlight and overlay option, scroll focus effects, inline accordion tabs, shimmer loading, fade-in animations, mobile-first carousel experience, and full video support (MP4, YouTube, Vimeo) on both product pages and category listings. [![Magento 2](https://camo.githubusercontent.com/bb85729732f2535b005cc4132429576a167a0f22a062967024b08eec53b3f5a4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6167656e746f2d322e342e372d2d322e342e382d6f72616e67652e737667)](https://camo.githubusercontent.com/bb85729732f2535b005cc4132429576a167a0f22a062967024b08eec53b3f5a4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6167656e746f2d322e342e372d2d322e342e382d6f72616e67652e737667)[![PHP](https://camo.githubusercontent.com/6d92b55b38bd0abf68aa878efb9188d71104c1214a7428c6f1f6b0879a5190eb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e312d2d382e342d626c75652e737667)](https://camo.githubusercontent.com/6d92b55b38bd0abf68aa878efb9188d71104c1214a7428c6f1f6b0879a5190eb/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e312d2d382e342d626c75652e737667)[![License](https://camo.githubusercontent.com/784362b26e4b3546254f1893e778ba64616e362bd6ac791991d2c9e880a3a64e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e2e737667)](https://camo.githubusercontent.com/784362b26e4b3546254f1893e778ba64616e362bd6ac791991d2c9e880a3a64e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e2e737667) Features -------- [](#features) ### Layout Modes [](#layout-modes) - **Vertical**: Images stacked in a single column, product info on the side - **Grid**: Multi-column image grid (2 or 3 columns) with product info sidebar - **Fashion**: Alternating 1-2 image pattern (1 full-width, 2 half-width, repeat) - **Slider**: Single image at a time with configurable transitions, arrows, dots, keyboard, and mousewheel navigation - **Configurable Position**: Gallery on left or right side - **Flexible Column Ratios**: 20/80 through 80/20 in 5% increments (13 options) - **Adjustable Image Gap**: Configure spacing between images (0-40px) ### Slider Options [](#slider-options) - **Transition Effects**: Fade (cross-fade), Slide (directional), Zoom-fade (zoom out + fade) - **Slide Direction**: Horizontal or Vertical - **Navigation Arrows**: Prev/next buttons with Luma-compatible styling - **Dot Indicators**: Clickable dot navigation below the slider - **Mousewheel Navigation**: Scroll wheel to switch slides (configurable) - **Keyboard Support**: Arrow keys to navigate ### Thumbnail Navigation (Slider Layout) [](#thumbnail-navigation-slider-layout) - **Positions**: Left, Right, or Below the slider image - **Display Styles**: Outside (alongside image) or Overlay (floating inside image with blur background) - **Thumbnail Shape**: Square (cropped) or Preserve aspect ratio - **Sliding Highlight**: Animated border indicator that slides between thumbnails on change (Fotorama-style) - **Overlay Arrow Fix**: Slider arrows automatically shift inward when overlay thumbnails are active ### Zoom Options [](#zoom-options) - **Hover Magnifier**: Zoom on mouse hover with lens indicator and magnified view (right side or inside image) - **Click Zoom**: Click to zoom into the image in-place, click again to reset - **Lightbox**: Full-screen image viewing with GLightbox navigation, touch, and keyboard support - **Modal Zoom**: Full-screen overlay with all product images stacked vertically; clicking image N scrolls to that image. Includes a bouncing scroll indicator that auto-hides after 3 seconds or on scroll. Close via X button, overlay click, or Escape key - **Configurable Zoom Level**: 2x to 10x magnification (hover and click modes) - **Disabled Option**: Turn off zoom entirely ### Inline Accordion Tabs [](#inline-accordion-tabs) - Move product detail tabs (Description, Additional Info, Reviews) inside the product info column as collapsible accordion sections - Description truncation with gradient fade and "Read more" link (configurable max height) - Desktop only: on mobile, original Magento tabs are restored ### Effects & Animations [](#effects--animations) - **Shimmer Loading**: Animated shimmer placeholder while images load, with smooth fade-in on completion. Includes JS timeout fallback (4s) and CSS animation fallback (5s) - **Fade-in on Scroll**: Subtle opacity + slide-up animation when images enter the viewport (alternative to shimmer) - **Scroll Focus**: Highlights the image closest to the viewport center while fading and/or blurring images that scroll away. Options: Fade, Blur, Both, or Disabled. Only for stack layouts (Vertical, Grid, Fashion). Handles tall/portrait images that span the entire viewport - **Image Counter**: Fixed position indicator showing current/total image count (slider layout) ### Sticky Panel [](#sticky-panel) - **Two Sticky Modes**: - **Frame Mode**: Info panel scrolls inside a fixed-height container - **Natural Scroll Mode**: Info panel stays fixed at the top while images scroll - **Configurable Offset**: Adjust top offset for sites with fixed headers - **Toggle On/Off**: Enable or disable sticky behavior ### Mobile Experience [](#mobile-experience) - **Swipeable Carousel**: Touch-friendly image carousel with overlay dot indicators - **Sticky Carousel**: Image stays fixed at top while product info scrolls over it - **Dynamic Slide Height**: Wrapper adapts to each slide's image height (no blank space) - **Vertical Stack Option**: Alternative stack layout for mobile ### Video Support (Product Page) [](#video-support-product-page) - **MP4 Local Videos**: HTML5 `` playback for locally hosted MP4 files assigned as product images - **YouTube & Vimeo**: Embedded inline iframes with facade thumbnail + play button (lazy-loaded) - **Player Size**: Choose between 16:9 video proportion or matching the product image dimensions - **Object Fit**: Cover (crop to fill) or Contain (show full video with letterbox) - **Autoplay / Loop / Muted / Controls**: All configurable separately - **IntersectionObserver**: Videos autoplay when visible, pause when scrolled out of view - **postMessage API**: Clean play/pause control for YouTube and Vimeo iframes ### Video Support (Category Listing) [](#video-support-category-listing) - **Video on Listing Cards**: Replace product image with video on category and search results pages - **MP4, YouTube & Vimeo**: All providers supported, auto-detected from Magento media gallery - **Player Size**: Match image dimensions (uses Magento's container) or standalone 16:9 proportion - **Video Fit**: Cover or Contain inside the listing card - **Play/Stop Button**: Optional overlay control button on listing videos - **Shimmer for All Images**: Animated shimmer loading placeholder for all listing images (not just videos) - **Batch Loading**: Video data loaded per-collection (one query per page, not per product) ### Performance [](#performance) - **Lazy Loading**: Native lazy loading for images; IntersectionObserver for videos - **Lightweight**: No heavy dependencies, GLightbox is only ~2KB gzipped - **CSS Variables**: Dynamic styling without page reload - **requestAnimationFrame**: Smooth scroll-based interactions Requirements ------------ [](#requirements) RequirementVersionMagento2.4.7 - 2.4.8PHP8.1 - 8.4ThemeLuma or Luma-based themesInstallation ------------ [](#installation) ### Via Composer (Recommended) [](#via-composer-recommended) ``` composer require rollpix/module-product-gallery bin/magento module:enable Rollpix_ProductGallery bin/magento setup:upgrade bin/magento setup:di:compile bin/magento setup:static-content:deploy -f bin/magento cache:flush ``` ### Manual Installation [](#manual-installation) 1. Create the directory structure: ``` mkdir -p app/code/Rollpix/ProductGallery ``` 2. Download and extract the module files to `app/code/Rollpix/ProductGallery/` 3. Enable the module: ``` bin/magento module:enable Rollpix_ProductGallery bin/magento setup:upgrade bin/magento setup:di:compile bin/magento setup:static-content:deploy -f bin/magento cache:flush ``` Configuration ------------- [](#configuration) Navigate to **Stores > Configuration > Rollpix > Product Gallery** ### Layout Settings [](#layout-settings) OptionDescriptionDefaultLayout TypeVertical, Grid, Fashion, or SliderVerticalGallery PositionLeft or RightLeftColumn Ratio40/60, 50/50, or 60/40 (vertical mode)50/50Grid Ratio20/80 through 80/20 in 5% increments (grid/fashion/slider)70/30Image Columns in Grid2 or 3 columns (grid mode)2Gap Between ImagesSpacing in pixels (0-40)20pxSlider DirectionHorizontal or Vertical (slider mode)HorizontalSlider TransitionFade, Slide, or Zoom-fade (slider mode)FadeNavigation ArrowsShow prev/next buttons (slider mode)YesDot IndicatorsShow dot navigation (slider mode)YesMousewheel NavigationScroll to switch slides (slider mode)YesThumbnail NavigationLeft, Right, Bottom, or Disabled (slider mode)DisabledThumbnail Display StyleOutside or Overlay (slider mode)OutsideThumbnail ShapeSquare (cropped) or Preserve aspect ratio (slider mode)Square### Zoom Settings [](#zoom-settings) OptionDescriptionDefaultZoom TypeHover Magnifier, Click Zoom, Lightbox, Modal Zoom, or DisabledHoverZoom LevelMagnification level 2x-10x (hover and click modes)3xZoom Window PositionRight Side or Inside Image (hover mode)Right### Effects & Animations [](#effects--animations-1) OptionDescriptionDefaultShimmer LoadingAnimated placeholder while images loadNoFade-in on ScrollOpacity + slide-up animation on viewport entry (requires shimmer off)NoScroll Focus EffectFade, Blur, Both, or Disabled. Highlights centered image (stack layouts only)DisabledImage CounterPosition indicator for slider layoutNo### Product Tabs [](#product-tabs) OptionDescriptionDefaultInline Accordion TabsMove tabs inside product info as collapsible accordionNoDescription Max HeightMax height before "Read more" link (0 to disable)0### Sticky Panel Settings [](#sticky-panel-settings) OptionDescriptionDefaultEnable StickyKeep product info fixed while scrollingYesSticky ModeFrame (scrollable panel) or Natural Scroll (fixed at top)Natural ScrollTop OffsetDistance from top in pixels20px### Video Settings (Product Page) [](#video-settings-product-page) OptionDescriptionDefaultEnable VideoEnable video playback on product pagesYesAutoplayAutoplay video when page loadsYesLoopLoop video continuouslyYesMutedMute video by defaultYesShow ControlsShow native video controlsNoPlayer SizeVideo proportion (16:9) or Match image dimensionsVideo (16:9)Object FitCover (crop to fill) or Contain (show full video)CoverLazy LoadLoad video only when visibleYes### Video Settings (Category Listing) [](#video-settings-category-listing) OptionDescriptionDefaultEnable Listing VideoShow videos on category/search listing pagesYesListing AutoplayAutoplay videos in listing cardsYesShow Play/Stop ButtonOverlay play/stop control buttonYesPlayer SizeMatch image dimensions or Video proportion (16:9)Match imageVideo FitCover (crop to fill) or Contain (show full video)Cover### Mobile Settings [](#mobile-settings) OptionDescriptionDefaultMobile BehaviorVertical Stack or Swipeable CarouselCarouselScreenshots ----------- [](#screenshots) ### Desktop - Vertical Layout (50/50) [](#desktop---vertical-layout-5050) ``` +---------------------------------------------+ | +-------------+ +---------------------+ | | | | | Product Title | | | | Image 1 | | $99.00 | | | | | | | | | +-------------+ | [Add to Cart] | | | | | | | +-------------+ | Description... | | | | | | | | | | Image 2 | | (Sticky Panel) | | | | | | | | | +-------------+ +---------------------+ | | | | +-------------+ | | | Image 3 | | | +-------------+ | +---------------------------------------------+ ``` ### Desktop - Grid Layout (70/30, 2 columns) [](#desktop---grid-layout-7030-2-columns) ``` +----------------------------------+--------------+ | +----------+ +----------+ | | | | Img 1 | | Img 2 | | Product | | +----------+ +----------+ | $99.00 | | +----------+ +----------+ | | | | Img 3 | | Img 4 | | [Add to | | +----------+ +----------+ | Cart] | | +----------+ | | | | Img 5 | | (Sticky) | | +----------+ | | | 70% | 30% | +----------------------------------+--------------+ ``` ### Desktop - Fashion Layout [](#desktop---fashion-layout) ``` +----------------------------------+--------------+ | +---------------------------+ | | | | Image 1 (full) | | Product | | +---------------------------+ | $99.00 | | +------------+ +------------+ | | | | Img 2 | | Img 3 | | [Add to | | +------------+ +------------+ | Cart] | | +---------------------------+ | | | | Image 4 (full) | | (Sticky) | | +---------------------------+ | | +----------------------------------+--------------+ ``` ### Desktop - Slider Layout with Thumbnails [](#desktop---slider-layout-with-thumbnails) ``` +----------------------------------+--------------+ | +--+ +----------------------+ | | | |T1| | | | Product | | +--+ | < Image 2 > | | $99.00 | | |T2| | | | | | +--+ | | | [Add to | | |T3| +----------------------+ | Cart] | | +--+ o * o o o | | +----------------------------------+--------------+ ``` ### Modal Zoom (full-screen stack) [](#modal-zoom-full-screen-stack) ``` +---------------------------------------------+ | [X] | | | | +-------------------------+ | | | Image 1 | | | +-------------------------+ | | +-------------------------+ | | | Image 2 | | | +-------------------------+ | | +-------------------------+ | | | Image 3 | | | +-------------------------+ | | | | v Scroll para ver mas | +---------------------------------------------+ ``` ### Mobile Carousel (Sticky) [](#mobile-carousel-sticky) ``` +---------------+ | |