{"id":47230,"date":"2015-04-17T06:58:37","date_gmt":"2015-04-17T10:58:37","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=47230"},"modified":"2015-04-17T06:58:37","modified_gmt":"2015-04-17T10:58:37","slug":"virtuemart-3-x-how-to-manage-product-images-zoom-jqzoom","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/virtuemart-3-x-how-to-manage-product-images-zoom-jqzoom.html","title":{"rendered":"VirtueMart 3.x. How to manage product images zoom (jqzoom)"},"content":{"rendered":"

This tutorial shows how to manage Zoom<\/strong> in VirtueMart 3.x.<\/p>\r\nVirtueMart 3.x. How to manage product images zoom (jqzoom)<\/a>\r\n\r\n

JQZoom is a Javascript image magnifier created using the popular jQuery javascript framework which allows you to apply a magnification to highly detailed images.<\/p>\r\n

In order to manage Zoom, you should perform the following:<\/p>\r\n\r\n

    \r\n

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

  2. \r\n

    Navigate to line 688<\/strong> in jqzoom-core.js <\/strong>to locate the JQZoom plugin default settings<\/strong> which are as follows:<\/p>\r\n\r\n\"VirtueMart.<\/a>\r\n\r\n

    – zoomType:<\/strong> Default: standard<\/strong>. The other option values are ‘reverse’<\/strong>,’drag’<\/strong>,‘innerzoom’<\/strong>.<\/p>\r\n

    – zoomWidth:<\/strong> Default: 300<\/strong>. The popup window width showing the zoomed area.<\/p> \r\n

    – zoomHeight:<\/strong> Default: 300<\/strong>. The popup window height showing the zoomed area.<\/p>\r\n

    – xOffset:<\/strong> Default: 10<\/strong>. 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”<\/strong>.<\/p>\r\n

    – yOffset:<\/strong> Default: 0<\/strong>. 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”<\/strong>.<\/p>\r\n

    – position:<\/strong> Default: right<\/strong>. The popup window position. Admitted values: ‘right’<\/strong>, ‘left’<\/strong>, ‘top’<\/strong>,‘bottom’<\/strong>.<\/p>\r\n

    – preloadImages:<\/strong> Default: true<\/strong>. If set to true, jqzoom will preload large images<\/strong>.<\/p>\r\n

    – preloadText:<\/strong> Default: Loading zoom<\/strong>. The text to show while preloading images<\/strong>.<\/p>\r\n

    – title<\/strong>: Default: true<\/strong>. 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.<\/p>\r\n

    – lens<\/strong>: Default: true<\/strong>. If set to false, the small lens over the image won’t show<\/strong>.<\/p>\r\n

    – imageOpacity:<\/strong> Default: 0.4<\/strong>. Sets the image opacity when the ‘zoomType’ option is set to ‘reverse’<\/strong>.<\/p>\r\n

    – showEffect<\/strong>: Default: show<\/strong>. The effect used to display the popup window. Options available: ‘show’, ‘fadein’<\/strong>.<\/p>\r\n

    – hideEffect<\/strong>: Default: hide<\/strong>. The effect used to display the popup window. Options available: ‘hide’, ‘fadeout’<\/strong>.<\/p>\r\n

    – fadeinSpeed<\/strong>: Default: slow<\/strong>. Changes fade in speed in case the showEffect option is set to ‘fadein’<\/strong>. Options: ‘fast’, ‘slow’, any numberic value<\/strong>.<\/p>\r\n

    – fadeoutSpeed:<\/strong> Default: 2000<\/strong>. Changes fade out speed in case the hideEffect option is set to ‘fadeout’<\/strong>. Options: ‘fast’, ‘slow’, any numeric value<\/strong>.<\/p><\/li>\r\n

  3. \r\n

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

  4. \r\n

    Locate the piece of code for JQZoom on line 34<\/strong> which is as follows:<\/p>\r\n\r\n\"VirtueMart.<\/a>\r\n

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

  5. \r\n

    In case you would like to change the JQZoom option which is not mentioned in the default_images.php file<\/strong> on line 34, please copy-paste<\/strong> 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<\/strong>) and click File-Save in Adobe Dreamweaver to save the changes to the file.<\/p><\/li>\r\n

  6. \r\n

    In order to disable the JQZoom<\/strong> from the product page, comment the following piece of code in templates\\theme***\\html\\com_virtuemart\\productdetails\\default_images.php file, line 34<\/strong> using \/*….*\/<\/strong> tags:<\/p>\r\n\r\n\"VirtueMart.<\/a>\r\n<\/li>\r\n<\/ol>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nVirtueMart 3.x. How to manage product images zoom (jqzoom)<\/a>","protected":false},"excerpt":{"rendered":"

    This tutorial shows how to manage Zoom in VirtueMart 3.x.<\/p>\n","protected":false},"author":62,"featured_media":47235,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[733],"tags":[1939,2404,1536],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/47230"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=47230"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/47230\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/47235"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=47230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=47230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=47230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}