Question

I’ve implemented the jQzoom plugin in my Joomla based website. It works great on all browsers but IE and Opera, both latest versions. It seems that it’s not getting the mouse position correctly. Although I’ve tested the same layout and options on a non joomla site, everything was fine, so I really don’t know. Here’s the way I use Jqzoom:
The main product image on the left and additional images to it’s left, they all reside in a 500px container which is inside a 700px container, the remaining 200px is a position:fixed menu.

<div id="targetDiv" style="float:left;min-width:350px;min-height:499px;max-width:350px;max-height:499px;margin-bottom:10px;margin-right:20px;">
<a href="" class="zoom">
<?php echo ps_product::image_tag( $product_full_image, 'class="productImage" alt="'.$product_name.'" title="'.$product_name.'"', 0 ); ?>
</a>
</div>
<div id="addimg" style="height:499px;width:45px;float:left;margin:0px;">
<?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?>
</div>

Now this is how I’m calling the Jqzoom and the script that switches between additional images.

jQuery(document).ready(function($) {
    $(document).ready(function() {
        var url = $('.zoom img').attr('src');
        $('a.zoom').attr('href', url);
        $('.zoom').jqzoom();
        $('#addimg a').wrap('<div class="addimg" />');
        $('img.productImage').attr({'width':'350', 'height':'499'});
    });
});

function showDiv(objectID,imgName) {
    var theElementStyle = document.getElementById(objectID);
    theElementStyle.innerHTML = "`<a class='zoom' href='"+imgName+"'><img src='"+imgName+"' border='0' width='350' height='499'></a>`";
    jQuery(document).ready(function($) {
        $(document).ready(function() {
            $('.zoom').jqzoom();
        });
    });
}

Opera and IE won’t display the zoom popup box correctly it always pops up to the right of the image even if I set it to the left, bottom works though. It looks as if the Large image is taking up all the space. I’m totally confused.

I know that the whole idea of that zoom is to load a small image using img
and to point the zoom to the BIG image with an anchor. What I did is that I don’t have the ability to load medium size images in Virtuemart..that’s why I am loading the big image then resize it with jQuery, then I am assigning the img’s src to the a’s href and that’s how it works.

It loads the script correctly but in Opera and IE the script is still running even if the mouse leaves the image. You can see it on one of the print screens and it’s not getting the mouse position correctly. I thought that it might be because of the image resizing, but loading a smaller image get’s me nowhere, the zoom still works outside of the image and shows the white color around the image.

I hope that anyone could at least point me to a solution. I’ve spent the last 2 days power googling and I haven’t found anyone with the same problem. This is not a commercial job, this is my own project…Hope I can find a solution with your help.

Answer 1

You know what? I gave up on the idea of fixing the jqzoom and decided to write a jquery zoom myself here it is, it works flawlessly in every browser and on a joomla website. I wrote in a few hours and working on implementing more functions, so if anyone needs it, feel free to use this script as a starter. What I did is basically this:
I have one picture, the big one, resize it with jquery to needed dimensions.
Near it I have a position:absolute div that contains the full-size picture in it. Plain and simple. The harder stuff was to get the zoomed picture show the exact location the mouse is pointing to.The formula is – (amount of “px” from left/top to the zoom div + mouse coordinates * 2) + half of the zoom div width/height. I multiplied the mouse coordinates because the zoom picture is exactly two times the small one. But it seems to work with other dimensions too. Here’s the code:

$(document).ready(function(){
var marginLeft = $('#pop img').offset().left;
var marginTop = $('#pop img').offset().top;
var windowHalf = $('#pop').width() /2;
var windowHalfV = $('#pop').height() /2;
 $("#test").mousemove(function(e){
var x = (marginLeft - (e.pageX - this.offsetLeft) * 2)+windowHalf;
var y = (marginTop -(e.pageY - this.offsetTop)*2)+ windowHalfV;
var one = $('#pop img').offset();
  $('#log').html(x +', '+ y);
  $('#log2').html(one.left+', '+ one.top);
  $('#pop img').offset({top: y, left: x});   

   });
  });