VirtueMart 3.x. 如何管理产品图像缩放(jqzoom)

本教程展示了如何管理 Zoom in VirtueMart 3.x.

JQZoom is a Javascript 使用流行的jQuery创建的图像放大镜 javascript framework 它能让你放大高细节的图像.

为了管理Zoom，您应该执行以下操作:

1. Locate the JQZoom core file jqzoom-core.js in 模板主题* * * \ \ js \ vm directory via FTP 并使用adobedreamweaver或任何其他php/打开它html editor 比如写字板、记事本、notepad++等.

2. Navigate to line 688 in jqzoom-core.js to locate the JQZoom plugin default settings 具体如下:

   

   – zoomType: Default: standard. 其他选项值为 ‘reverse’,’drag’,‘innerzoom’.

   – zoomWidth: Default: 300. 显示缩放区域的弹出窗口宽度.

   – zoomHeight: Default: 300. 显示缩放区域的弹出窗口高度.

   – xOffset: Default: 10. 弹出窗口与小图像的x偏移量 . 如果位置为“右”，则将弹出窗口向右移动;如果位置为“左”，则将弹出窗口向左移动。.

   – yOffset: Default: 0. 弹出窗口y从小图像偏移. 如果位置为" top "则将弹出窗口向顶部移动更多如果位置为" bottom "则将弹出窗口向底部移动更多.

   – position: Default: right. 弹出窗口的位置. Admitted values: ‘right’, ‘left’, ‘top’,‘bottom’.

   – preloadImages: Default: true. If set to true, jqzoom 会预加载大图片吗.

   – preloadText: Default: Loading zoom. 在预加载图像时显示的文本.

   – title: Default: true. 在缩放窗口上方显示一个小标题, 它可以是锚标题，如果没有指定, 它将获得小图像标题.

   – lens: Default: true. 如果设置为false，图像上方的小镜头将不会显示.

   – imageOpacity: Default: 0.4. 设置图像的不透明度 当“缩放类型”选项设置为“反向”时.

   – showEffect: Default: show. 用于显示弹出窗口的效果. Options available: ‘show’, ‘fadein’.

   – hideEffect: Default: hide. 用于显示弹出窗口的效果. Options available: ‘hide’, ‘fadeout’.

   – fadeinSpeed: Default: slow. 变化在速度上逐渐消失 如果showeeffect选项设置为' fadein '. Options: ' fast '， ' slow '，任何数值.

   – fadeoutSpeed: Default: 2000. 改变淡出速度 如果隐藏效果选项被设置为“淡出”. Options: ' fast '， ' slow '，任何数值.

3. In order to change the JQZoom options 在模板产品页面上，您应该打开 default_images.php file located in templates\theme***\html\ com_virtuemart \ productdetails directory on FTP 与Adobe Dreamweaver或任何其他php/html editor 比如写字板、记事本、notepad++等.

4. Locate the piece of code for JQZoom on line 34 具体如下:

   

   来更改缩放类型选项 ，将zoomType: " innerzoom "替换为zoomType: " drag "或zoomType: " standard " 代码行取决于您的需要(请参阅本教程的第2点，了解默认值和其他可用选项).

5. 如果你愿意的话 change the JQZoom 选项，default_images中没有提到.php file on line 34, please copy-paste 模板\theme***\js\vm\jqzoom-core.. Js文件，第688行到templates\theme***\html\ com_virtuemart \ productdetails \ default_images.php file, line 34, 将选项值更改为您喜欢的选项值, 去掉引号(i.e. showeeffect: ' show '应该复制并添加到default_images中.php文件如下所示)，然后在adobedreamweaver中单击“文件-保存”，将更改保存到文件中.

6. In order to disable the JQZoom 在产品页面中，将下面的代码段注释到 templates\theme***\html\ com_virtuemart \ productdetails \ default_images.php file, line 34 using /*….*/ tags:

   

请随时查看下面的详细视频教程: