VirtueMart 3.x. How to manage product images zoom (jqzoom)

This tutorial shows how to manage Zoom in VirtueMart 3.x.

JQZoom is a Javascript image magnifier created using the popular jQuery javascript framework which allows you to apply a magnification to highly detailed images.

In order to manage Zoom, you should perform the following:

1. Locate the JQZoom core file jqzoom-core.js in templates\theme***\js\vm directory via FTP and open it using Adobe Dreamweaver or any other php/html editor like Wordpad, Notepad, Notepad ++, etc.

2. Navigate to line 688 in jqzoom-core.js to locate the JQZoom plugin default settings which are as follows:

   

   – zoomType: Default: standard. The other option values are ‘reverse’,’drag’,‘innerzoom’.

   – zoomWidth: Default: 300. The popup window width showing the zoomed area.

   – zoomHeight: Default: 300. The popup window height showing the zoomed area.

   – xOffset: Default: 10. The popup window x offset from the small image . Always positive to move the popup window more on the right if position is ‘right’ or more on the left if position is “left”.

   – yOffset: Default: 0. The popup window y offset from the small image. Always positive to move the popup window more on the top if position is “top” or more on the bottom if position is “bottom”.

   – position: Default: right. The popup window position. Admitted values: ‘right’, ‘left’, ‘top’,‘bottom’.

   – preloadImages: Default: true. If set to true, jqzoom will preload large images.

   – preloadText: Default: Loading zoom. The text to show while preloading images.

   – title: Default: true. Shows a small title over the zoomed window, it can be the anchor title and if not specified, it will get the small image title.

   – lens: Default: true. If set to false, the small lens over the image won’t show.

   – imageOpacity: Default: 0.4. Sets the image opacity when the ‘zoomType’ option is set to ‘reverse’.

   – showEffect: Default: show. The effect used to display the popup window. Options available: ‘show’, ‘fadein’.

   – hideEffect: Default: hide. The effect used to display the popup window. Options available: ‘hide’, ‘fadeout’.

   – fadeinSpeed: Default: slow. Changes fade in speed in case the showEffect option is set to ‘fadein’. Options: ‘fast’, ‘slow’, any numberic value.

   – fadeoutSpeed: Default: 2000. Changes fade out speed in case the hideEffect option is set to ‘fadeout’. Options: ‘fast’, ‘slow’, any numeric value.

3. In order to change the JQZoom options on the template product page, you should open the default_images.php file located in templates\theme***\html\com_virtuemart\productdetails directory on FTP with Adobe Dreamweaver or any other php/html editor like Wordpad, Notepad, Notepad ++, etc.

4. Locate the piece of code for JQZoom on line 34 which is as follows:

   

   In order to change the zoomType option , replace zoomType:”innerzoom” with zoomType: “drag” or zoomType:”standard” line of code depending on your needs (see point 2 of this tutorial for the default and other options available).

5. In case you would like to change the JQZoom option which is not mentioned in the default_images.php file on line 34, please copy-paste the default line of code for the certain option from templates\theme***\js\vm\jqzoom-core.js file, line 688 to templates\theme***\html\com_virtuemart\productdetails\default_images.php file, line 34, change the option value to the option value you prefer, removing the quotation marks (i.e. showEffect: ‘show’ should be copied and added to the default_images.php file as showEffect: show) and click File-Save in Adobe Dreamweaver to save the changes to the file.

6. In order to disable the JQZoom from the product page, comment the following piece of code in templates\theme***\html\com_virtuemart\productdetails\default_images.php file, line 34 using /*….*/ tags:

   

Feel free to check the detailed video tutorial below: