Zoom images on VirtueMart products

Having a good zoom efect on Virtuemart products page details can be easy.
This solution is based on Dynamic Drive Image Power Zoomer v1.1, based on jQuery, and was tested on VirtualMart 2.

The first step is to download the ddpowerzoomer.js file from the Image Power Zoomer v1.1.
Place this file on your VirtueMart template Javascript folder, usually /templates/VM_TEMPLATE/js, where VM_TEMPLATE is your current VirtueMart template.
Open the file and find the init:function. Inside it, find the first div, it should be the first line, and add z-index:100000 to its style, so that it looks like this:

    var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;z-index:100000;" />')
      .append('<div style="position:relative;left:0;top:0;" />')
      .appendTo(document.body) //create magnifier container and add to doc

This will force the zoomed image div container to be above the Joomla! Modal SqueezeBox, that you can find in then /media/system/js/modal.js file. That is the file loaded by Joomla!, which is non readable by humans, at it’s side there is modal-uncompressed.js, the human readable version.
The SqueezeBox is responsible for making the screen dark and showing the large picture. Since the SqueezeBox sets its z-index to a high value, 65000+, we need to force the zoomed image to be above it, that’s why we’ve set the z-index to 100000.

Next open the VirtueMart template index.php file, located on /templates/VM_TEMPLATE/index.php, and right before closing the head tag, place the following code:

<!-- Zoom Component -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

if (null != SqueezeBox) {
    function applyZoomEffect() {
      jQuery(document).ready(function($){ //initialize power zoomer on DOM load
        $.getScript("<?php echo $template_path ?>/js/ddpowerzoomer.js", function(data, textStatus, jqxhr) {
          var $imgref=$('#sbox-content > img');      
          options = {powerrange:[2,5], magnifiersize:[150,150]};
        options.largeimagesrc = $imgref.attr('src');
          ddpowerzoomer.setupimage($, $imgref, options)
<!-- End Zoom Component -->

Note that the jQuery loaded is the current stable, 1.7.2. Your template may already load a previous version of jQuery, they should not get in conflict.

Now run your online store and click on an image product, it should have a zoom option

Here’s some explanation on how all this works.
The product large image is dynamically created when the user clicks on the product thumbnail, though a CSS event.
That’s why we have to override the update event of the SqueezeBox, which is responsible for showing the large image.
When the SqueezeBox shows the large image, it will call the applyZoomEffect function that we have defined.
This function will load the ddpowerzoomer.js script file and after it loaded, it will find the large image div container, set the zoom options (check the Image Power Zoomer options) and finally it will set up the zoom for the large image.