If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

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

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

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

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:

    VirtueMart. How to manage Zoom1

    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:

    VirtueMart. How to manage Zoom2

    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:

    VirtueMart. How to manage Zoom3

Feel free to check the detailed video tutorial below:

VirtueMart 3.x. How to manage product images zoom (jqzoom)
 
Live Chat
We help you to choose the right product or assist you with your product.