WordPress 图片悬停放大插件 WP Image Zoom

WP Image Zoom是一款 WordPress 网站图片放大插件，当鼠标放到图片上面时，插件会在图像上创建放大镜功能，让访客看到图片放到后的细节。插件还支持 WooCommerce产品图片放大，功能很全面。

有好多人需要类似“某宝”的宝贝图片那样的鼠标悬停图片放大效果，用这个插件就能实现了。

1、WP Image Zoom插件安装

进入 WordPress后台 > 插件 > 安装插件，搜索“WP Image Zoom”，安装并启用。

如果网站在国内，下载过程可能会不顺利。建议直接从 WordPress官网下载，用 FTP软件上传到插件目录，再启用。

2、 WP Image Zoom插件特色

淡入淡出效果：放大的部分将优雅地淡入或淡出。
配置：控制变焦镜头大小、边框颜色、边框大小、阴影、圆角等。
与 WooCommerce 配合：一键启用所有产品图像的缩放。
适用于页面和帖子：在帖子/页面的编辑器中，一个按钮就能在任何图像上应用缩放效果。

3、WP Image Zoom插件设置

先看到下面两个选项卡：

• General Settings 不需要改动。
• Zoom settings：缩放设置。

第一步选择镜片形状，一共 4 种变焦类型：内变焦、圆形镜头、方形镜头和外变焦（带变焦窗口）。

电商网站普遍性的使用最后一种，也就是下图的镜片。

第二步查看图片放大效果，直到满意为止。

第三步设置放大镜的各种属性参数，如下图所示。

• 缓动效果的数字越大，放大镜中的图片移动越慢；反之数字越小，移动越快。
• 镜片颜色、边框厚度、边框颜色、淡入淡出时间、色调颜色及不透明度。
• 缩放窗口的尺寸、参数等。

第四步保存后才能生效。

4、如何在各种页面编辑器中生效

WP Image Zoom 设置好之后在未安装 WooCommerce插件时也可以生效，只需要添加一个 CSS类即可。以下是几款常见页面编辑器的添加方法：

• Gutenberg：点击图片，在右侧工具区域的区块 > 高级 > 高级CSS类，添加 zoooom 即可。
• WPBakery：版本不同设置方法也不同。点击图片，在single image settings > image size，输入 large，下面的 inamge style 选择 WP image zoom pro，或者在single image settings > General > Extra class name 输入 zoooom
• Elementor：点击图片，在左侧的 advacned（高级）> element sytle > CSS classes，输入 zoooom
• Beaver Builder：点击图片，在 photo > advacned（高级）> CSS，输入 zoooom
• Divi Builder：点击图片，在 image module settings > custom CSS > CSS class， 输入 zoooom
• Avada Fusion Page Builder：点击图片，在 style > CSS Classes，输入 zoooom

有了这款 WP Image Zoom插件，你的 WordPress 图片就可以任意放大了，效果还很炫酷。