PrestaShop 1.6.x. How to manage “TM产品变焦” 模块

Our 支持 team is ready to present you a new tutorial that will show you how is it easy for you to work with “TM产品变焦” 模块 在我们的 PrestaShop模板.

“TM产品变焦” allows you to choose among the three available options (窗口/镜头/内心的) for image zoom with the advanced 插件 settings and is available in 时尚, 电子产品, Spare Parts, Furniture, One Product themes.

1. 的 模块 has been installed simultaneously with template so the standard product zoom effect 自动禁用.

   的 standard effect can be enabled back manually (if needed) in the 首选项 > 产品 > 启用 Jq变焦 而不是 Fancybox on the product page section.

   

2. 为了管理 TM产品变焦 settings on the 配置 page, navigate to 管理面板 > 模块 > 模块 > and enter TM产品变焦 去搜索. 点击 配置 button

   

3. By default the 配置 page shows the 简化一组选项:

   

   • 生活模式 – 模块 是开/关.

   • Fancybox – whether to show the enlarged image in the Fancybox 在点击.

   • 将图像更改为 徘徊 – switch the main image on 缩略图 徘徊 (by default is set to switch 在点击).

   • 响应 – allows to the use adaptive functionality for 插件 display on the mobile devices.

   • 变焦类型 – choose the type of the enlarged image display mode

     • 窗口 – the enlarged image shows up next to the main image in one of the available (16) positions

     • 镜头 – the image is zoomed in the 镜头 container, on top of it

       的 mobile devices (< 768) have “镜头” mode activated instantly.

     • 内心的 – the image is zoomed inside of the main image container, fully covering it.

   • 扩展设置 – enables advanced settings for the experienced users. You can see the link to the 官方文档 for more details next to it.

4. 在第二部分 模块 配置 page you can set up 扩展 模块 配置:

   

   1. 滚动放大 – zoom ratio change on the mousewheel scroll (available for all types).

   2. 光标 – cursor type on the magnified image 徘徊. 的 following options are available: default, cursor, crosshair (available for all types).

   3. 缩放设置 – available for all types, if the ‘滚动放大’ is enabled.

      • 缩放级别 – the zoom level on the initial 徘徊

      • 最小缩放级别 -最小缩放级别

      • 最大变焦级别 -最大缩放级别

      • 滚动缩放增量 – magnifying scroll increment

   4. 宽松 – the magnified image appearance effect (available for all types).

      • 变焦 宽松 -打开/关闭的效果

      • 宽松 量 -延时值

   5. 图像淡入淡出 – main image blur outside the 徘徊 area (the 镜头) – available for 窗口, 镜头.

   6. Magnified image 窗口 settings -适用于视窗:

      • 放大窗口宽度-窗口宽度，单位为px

      • 缩放窗口高度 -窗口高度，单位为px

      • 缩放窗口偏移量X - - - - - -窗口 offset on the X axis

      • 缩放窗口偏移量Y - - - - - -窗口 offset on the Y axis

      • 缩放窗口位置 - - - - - -窗口 position choice relatively to the main image (the positions available are presented on the image below this field)

      • 缩放窗口Bg颜色 - - - - - -窗口 background image (for transparent images only)

      • 放大窗口淡入 – the effect of slowing the 窗口 appearance

      • 放大窗口淡出 – the effect of slowing the 窗口 disappearance

      • 边界大小 - - - - - -窗口 border width in px

      • 边框颜色 -窗口边框颜色

      请, notice that only integer numbers are allowed:

      

   7. 变焦镜头 – zoom 镜头 (available for 窗口, 镜头).

      

      • 变焦镜头 ——开/关

      • 透镜的形状 -透镜型. It can take the following values: circular/rounded or squared/rectangular

      • 镜头颜色 -镜头内层 background color

      • 镜头不透明度 -镜头内层 background 不透明度

      • 镜头的大小 -镜头尺寸，单位为px

      • 镜头淡入 – the speed of 镜头 appearance effect

      • 镜头淡出 – the speed of 镜头 disappearance effect

      • 镜头边界 -镜头边框宽度

      • 镜片边缘颜色 -镜片边缘颜色

      • 包含镜头变焦 – the restriction of the 镜头 overflow outwards the main image container

   8. 色彩 – the shade effect on the area outside the 镜头 (available for 窗口).

      

      • 色彩 -打开/关闭的效果

      • 色的颜色 -镜头外区域 background

      • 色不透明 -镜头外区域 不透明度

      • 色彩淡入 – the appearance effect speed

      • 色彩淡出 – the disappearance effect speed

      If you switch the zoom type, advanced options set is changed accordingly to show only the available parameters for the type selected.

      Be careful when editing the extended settings. If the settings are set incorrectly, the effect can be ugly.

5. 请, do not forget to Save your updates and Refresh the site to be able to the changes at the site 前端.

   

Now you’ve got the hang of “TM产品变焦” 模块!

Feel free to check the detailed video tutorial below: