VirtueMart Forum

VirtueMart Dev/Coding Central: VM1 (old version) => Development Projects, Modifications, Hacks & Tweaks. VM1.1 => Topic started by: Skatebail on August 20, 2010, 21:07:41 pm

Title: Opera & IE jQzoom implementation problem
Post by: Skatebail on August 20, 2010, 21:07:41 pm
Hi everyone! 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.
Code: [Select]
    <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.'"'); ?>
    </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.

Code: [Select]
   
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 a s if the Large image is taking up all the space. I'm tottaly 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' 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.

[attachment cleanup by admin]
Title: Re: Opera & IE jQzoom implementation problem
Post by: fashionno1 on March 25, 2013, 00:42:35 am
Hi Skatebail,

If you already solved this problem, could you let me know how to fix it?

I have same problem.

Thx