Jqzoom implémentation à Joomla Opera IE problème

Question

J'ai implémenté le plugin jQzoom dans mon site basé sur Joomla. Il fonctionne très bien sur tous les navigateurs sauf IE et Opera, les deux versions les plus récentes. Il semble que la position de la souris ne soit pas correcte. Bien que j'ai testé la même mise en page et les mêmes options sur un site non joomla, tout allait bien, donc je ne sais vraiment pas. Voici la façon dont j'utilise Jqzoom: L'image principale du produit sur la gauche et des images supplémentaires à gauche, ils résident tous dans un conteneur 500px qui est à l'intérieur d'un conteneur 700px, le 200px restant est une position: menu fixe.

<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> 

Maintenant, voici comment j'appelle le Jqzoom et le script qui permute entre les images supplémentaires.

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 et IE n'afficher la boîte de pop-up zoom correctement, il apparaît toujours à la droite de l'image même si je mets à gauche, en bas fonctionne bien. Il semble que la grande image occupe tout l'espace. Je suis totalement confus.

Je sais que toute l'idée de ce zoom est de charger une petite image en utilisant img et de diriger le zoom vers la grande image avec une ancre. Ce que j'ai fait, c'est que je n'ai pas la possibilité de charger des images de taille moyenne dans Virtuemart. C'est pourquoi je charge la grande image puis la redimensionne avec jQuery, puis j'attribue la src de l'img à la href de a et c'est comme ça travaux.

Il charge le script correctement mais dans Opera et IE le script est toujours en cours d'exécution même si la souris quitte l'image. Vous pouvez le voir sur l'un des écrans d'impression et la position de la souris n'est pas correcte. Je pensais que c'était peut-être à cause du redimensionnement de l'image, mais le chargement d'une image plus petite ne m'appartient nulle part, le zoom fonctionne toujours en dehors de l'image et montre la couleur blanche autour de l'image.

J'espère que n'importe qui pourrait au moins me diriger vers une solution. J'ai passé les 2 derniers jours à googler le pouvoir et je n'ai trouvé personne avec le même problème. Ce n'est pas un travail commercial, c'est mon propre projet ... J'espère pouvoir trouver une solution avec votre aide.

Answer 1

Vous savez quoi? J'ai abandonné l'idée de réparer le jqzoom et j'ai décidé d'écrire un zoom jquery moi-même ici, il fonctionne parfaitement dans tous les navigateurs et sur un site joomla. J'ai écrit en quelques heures et je travaille sur la mise en œuvre de plus de fonctions, donc si quelqu'un en a besoin, n'hésitez pas à utiliser ce script en entrée. Ce que j'ai fait est fondamentalement ceci: J'ai une image, la grande, la redimensionne avec jquery aux dimensions requises. Près de moi j'ai une position: div absolu qui contient l'image en taille réelle. Simple et simple. Le truc le plus difficile était d'obtenir l'image agrandie montrant l'emplacement exact de la souris. La formule est - (quantité de "px" de gauche/haut au zoom div + coordonnées de la souris * 2) + la moitié de la largeur du div zoom /la taille. J'ai multiplié les coordonnées de la souris parce que l'image zoom est exactement deux fois la petite. Mais il semble aussi fonctionner avec d'autres dimensions. Voici le 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}); 

    }); 
    });