566E
首页 包列表 提交包 常见问题 关于

rollpix/module-image-flip-hover 问题修复 & 功能扩展

解决BUG、新增功能、兼容多环境部署，快速响应你的开发需求

邮箱：yvsm@zunyunkeji.com | QQ：316430983 | 微信：yvsm316

rollpix/module-image-flip-hover

Composer 安装命令：

composer require rollpix/module-image-flip-hover

包简介

Magento 2 module for product image hover effects on PLP. Supports image flip (single alternate image) and gallery slider (navigate all images with arrows, mouse tracking, swipe). Compatible with Luma and Hyvä themes.

关键字：

#image #product #module #gallery #widget #animation #page builder #hover #flip #magento2 #magento 2

README 文档

README

Magento 2.4.x PHP 7.4–8.3 Luma Compatible Hyvä Compatible License MIT

Sponsor: www.rollpix.com

Leer en Español

Overview

Browse product gallery images directly from the product listing page (PLP) without entering the product detail page. Two modes:

  • Flip (classic): shows a single alternate image on hover
  • Slider (v2.0): navigate all gallery images with arrows, swipe, mouse tracking, and click-on-indicator navigation

Compatible with Luma and Hyvä themes.

Table of Contents

Features

Flip Mode

  • Configurable image roles (native or custom) for the hover image
  • "Second Gallery Image" option (no role assignment needed)
  • Fallback role support
  • 8 animation types: Fade, Slide (4 directions), Zoom, Flip Horizontal/Vertical

Slider Mode (v2.0)

  • Full gallery navigation from PLP
  • Navigation: Arrows, Mouse Tracking (desktop), Swipe (mobile), Click on Indicators
  • Indicators: Proportional Bars, Dots, Pills (elongated active dot), Counter (1/5), None
  • Transitions: Slide (carousel), Fade (crossfade), Instant
  • Independent desktop/mobile configuration
  • Optional hover flip (auto-advance to image 2 on hover)
  • Loop navigation and auto-return on mouse leave

Configurable Products

  • Collects images from all children (not just the first)
  • Images per variant limit (e.g., 1 = one photo per color)
  • ConfigurableGallery integration: filters parent images by variant when Rollpix_ConfigurableGallery is installed

General

  • Enable/disable per location (category pages, widgets, search, related, CMS, Page Builder)
  • Lazy loading (images loaded on first interaction)
  • Dynamic content support (AJAX, infinite scroll, sliders)
  • Respects prefers-reduced-motion preference
  • All CSS easily overridable from themes

Technical Requirements

Requirement Version
Module Name rollpix/module-image-flip-hover
Magento 2.4.x
PHP 7.4 - 8.3

Installation

composer require rollpix/module-image-flip-hover:^2.0
bin/magento module:enable Rollpix_ImageFlipHover
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

For Hyvä themes, also enable:

bin/magento module:enable Rollpix_ImageFlipHoverHyvaCompat
bin/magento setup:upgrade

Configuration

Navigate to Stores > Configuration > ROLLPIX > Image Flip Hover.

General Settings

Field Description Default
Enable Activate/deactivate the module Yes
Hover Mode Flip (single alternate image) or Slider (full gallery) Flip
Desktop Only Disable on mobile devices (< 768px) Yes

Flip Mode Settings

Field Description Default
Primary Image Role Image role to show on hover Second Gallery Image
Fallback Image Role Used when primary role not found Second Gallery Image
Animation Type Transition effect Fade
Animation Speed (ms) Animation duration 300

Slider Mode Settings

Field Description Default
Enable Hover Flip Auto-advance to image 2 on hover Yes
Transition Type Slide / Fade / Instant Fade
Transition Speed (ms) Transition duration 250
Max Images Maximum gallery images per product (2-20) 8
Images per Variant For configurables: max images per child. 0 = all 0
Loop Navigation Circular navigation (last → first) No
Return to Main Image Return to image 1 on mouse leave Yes

Desktop Navigation (multiselect): Arrows, Mouse Tracking, Click on Indicators

Mobile Navigation (multiselect): Arrows, Swipe, Click on Indicators

Indicators (per device): Bars, Dots, Pills, Counter, None — with position (top/bottom/below)

Locations

Enable/disable for: Category Pages, Widgets, Search Results, Related/Upsell/Cross-sell, CMS Blocks, Page Builder.

Configurable Products

The slider collects images from all children of a configurable product. Combined with the Images per Variant setting:

Setting Result (3 colors × 7 photos each)
0 (all) Shows up to 8 images (max_images cap)
1 Shows 3 images (first photo of each color)
2 Shows 6 images (first 2 of each color)

ConfigurableGallery Integration

When Rollpix_ConfigurableGallery is installed, the slider reads the associated_attributes column to group parent images by variant. This works when images are uploaded to the configurable parent and associated to colors via ConfigurableGallery's admin UI.

Hyvä Theme Support

The module includes Rollpix_ImageFlipHoverHyvaCompat, a sub-module that:

  • Replaces jQuery/RequireJS JS with vanilla JavaScript
  • Supports all features: flip, slider, all navigation types, all indicators
  • CSS is theme-agnostic (works in both Luma and Hyvä)

Enable with:

bin/magento module:enable Rollpix_ImageFlipHoverHyvaCompat

Note: Disable HyvaCompat when using Luma theme.

Troubleshooting

Flip/slider not showing

  1. Verify the module is enabled and the location is active
  2. Check the product has 2+ images in its gallery
  3. Clear cache: bin/magento cache:flush

Images not loading on hover

  1. Clear static content: bin/magento setup:static-content:deploy -f
  2. Check browser console for JS errors

Slider images cropped or misaligned

  1. Clear var/view_preprocessed/ and redeploy static content
  2. Check for CSS conflicts with your theme

Error after update

rm -rf generated/code/*
bin/magento setup:di:compile
bin/magento cache:flush

Changelog

See CHANGELOG.md for full version history.

License

MIT License

Support

Made with ❤️ by ROLLPIX

rollpix/module-image-flip-hover 适用场景与选型建议

rollpix/module-image-flip-hover 是一款 基于 PHP 开发的 Composer 扩展包，目前已累计 83 次下载、GitHub Stars 达 0， 最近一次更新时间为 2026 年 01 月 17 日， 在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向： 「image」 「product」 「module」 「gallery」 「widget」 「animation」 等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 rollpix/module-image-flip-hover 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 rollpix/module-image-flip-hover 我们能提供哪些服务？
定制开发 / 二次开发

基于 rollpix/module-image-flip-hover 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 rollpix/module-image-flip-hover 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

slavkovrn/yii2-lightbox 1

Yii2 LightBox image galary widget uses Lightbox v2.10.0 by Lokesh Dhakar

slavkovrn/yii2-imagecarousel 5

The Yii2 extension uses jQuery jquery.carousel-1.1.min.js and makes image carousel from php array of structure defined.

rssgen/php-rss-generator 0

Simple RSS generator library for PHP 5.5 or later. clone from Bhaktaraz Bhatta ttps://github.com/bhaktaraz/php-rss-generator

silvercommerce/catalogue-frontend 0

Display your categories and products on front end of your website

slavkovrn/yii2-imagegalary 2

The Yii2 extension uses jQuery PrettyPhoto and OwlCarousel js and makes image galary from php array of structure defined.

awstudio/product-bundle 0

Product catalog for your Symfony2 applications.

统计信息

  • 总下载量： 83
  • 月度下载量： 0
  • 日度下载量： 0
  • 收藏数： 0
  • 点击次数： 48
  • 依赖项目数： 0
  • 推荐数： 1

GitHub 信息

  • Stars： 0
  • Watchers： 0
  • Forks： 0
  • 开发语言： PHP
访问仓库

其他信息

  • 授权协议： MIT
  • 更新时间： 2026-01-17