Le zoom Jquery ne fonctionnera pas [fermé]
-
13-12-2019 - |
Question
j'essaie d'implémenter Jquery Zoom sur mon site Web piloté par Joomla sur les images du catalogue.Je n'arrive pas à faire fonctionner ce truc, alors quelqu'un peut-il m'aider à résoudre ce problème ?
J'ai ajouté ces scripts dans l'en-tête :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script src="http://www.myurl.mk/templates/beez_20/javascript/jquery.zoom.js"></script>
voici l'erreur que cela donne :
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'
(anonymous function)
voici un lien vers un exemple de mon site
voici mon code :
<script>
$(document).ready(function(){
$('#ex1').zoom({url: '<?php echo $this->item->imageXLarge; ?>'});
});
</script>
<div class="itemImageBlock" style="float:none;">
<span class="itemImage" id="ex1">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
</span>
La solution
J'ai vu votre page et j'ai constaté que vous chargez un fichier jQuery après des fichiers dépendants.Il y a beaucoup d'erreur dans la console.Le premier est JQuery non défini.Déplacez votre fichier jQuery avant tous les autres fichiers de script.
Après avoir déplacé JQuery sur le dessus, votre site a l'air bien.J'ai joint un instantané comme demandé.
Autres conseils
Sur votre page d'exemple, vous importez ks2.js avant jquery.js.
Cela devrait être le premier élément après votre <head>
étiqueter:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>