jQuery Cycle Plugin - Erreur

Ceci est ma première question, donc je vais essayer d'être aussi descriptif que possible ... J'utilise le jQuery Cycle Plugin avec Joomla. Il explose complètement dans IE7. Bien qu'il semble fonctionner parfaitement dans Chrome, j'ai remarqué l'erreur suivante lors de l'inspection de la console. Le diaporama semble fonctionner dans Chrome 17.0.963.56, Firefox 9.0.1 et Safari 5.1.3. Je ne l'ai pas testé dans IE8 +, car je n'ai pas un ordinateur Windows facilement accessible pour moi. J'appelle le diaporama avec un fichier js externe dans l'en-tête comme si ...jQuery Cycle Plugin - Erreur

<head> 
     <script type="text/javascript" src="js/jquery.min.js" /></script> 
     <script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
     <script type="text/javascript" src="js/init.js"></script> 
</head>

est ici init.js:

$(document).ready(function() { 

    $('#slideshow').cycle({ 
     fx:  'fade', 
     speed:  '900', 
     timeout: 4000, 
     pause:  1, 
     pager:  '#nav', 
     slideExpr: 'div.slide', 
     next:  '#forward', 
     prev:  '#backward', 
    }); 

    $('#slideshow').hover(function() { 
     $("#backward").fadeIn(400); 
     $("#forward").fadeIn(400); 
    }, 
     function() { 
     $("#backward").fadeOut(300); 
     $("#forward").fadeOut(300); 
    }); 

    $('#imax').before('<ul id="nav_imax">').cycle({ 
     fx:  'scrollHorz', 
     speed:  '1000', 
     timeout: 5000, 
     pause:  1, 
     pager:  '#nav_imax', 
     slideExpr: 'div.slide', 

     // callback fn that creates a thumbnail to use as pager anchor 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>'; 
     }, 

    }); 

});

Et enfin, voici le balisage. Les divs "moduletable" et "custom" sont générés par le CMS. Cependant, mon slideExpr devrait contourner ceux qui devraient cibler divs avec la classe "slide".

<div id="slideshow"> 
    <div id="nav"></div> 
    <a id="backward">Backward</a> 
    <a id="forward">Forward</a> 
    <div class="moduletable"> 
     <div class="custom"> 
      <div class="slide"><a href="#"><img src="01.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="02.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="03.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="04.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="05.jpg" width="860" height="400" border="0" /></a></div> 
      <div class="slide"><a href="#"><img src="06.jpg" width="860" height="400" border="0" /></a></div> 
     </div> 
    </div> 
</div>

J'espère avoir couvert tout. S'il y a d'autres informations utiles que je peux fournir, s'il vous plaît faites le moi savoir. Je vous remercie!

MISE À JOUR: Je n'ai pas inclus initialement le fait que j'utilise un autre diaporama avec l'ID "imax" et d'autres paramètres sur une autre page. Comme ceux-ci n'étaient pas sur la même page, je ne l'ai pas inclus. Cependant, quand je commente la fonction $ ('# imax'), les erreurs disparaissent dans Chrome, FF, etc. Le diaporama ne fonctionne toujours pas dans IE7 cependant ...

Donc je pense que c'est en fait deux problèmes ...

est ici un lien de test: http://jsfiddle.net/V6EeS/3/

Source

2012-02-21 Patrick Appelman

DonT charge jquery d'un autre serveur. Assurez-vous que jquery est chargé en premier par le téléchargement/copie coad et mis dans un fichier sur votre serveur – ggzone

@ggzone Ce n'est pas le problème. jQuery est en cours de chargement en premier. Cependant, j'ai ajusté mon balisage pour appeler une version hébergée locale de jQuery et je reçois toujours les mêmes erreurs. Des pensées? –

hm peut-être que vous utilisez des versions incompatibles ou l'un des fichiers js sont incorrects ou manquants. Comme c'est un plugin très commun je ne pense pas qu'il y ait une erreur à la volée. – ggzone

Je compris la question IE7. L'option du dernier paramètre ne doit pas avoir de virgule (,). Je ne sais pas pourquoi Chrome me donne toujours l'erreur, mais au moins le diaporama fonctionne indépendamment dans chaque navigateur.

$(document).ready(function() { 

    $('#slideshow').cycle({ 
     fx:  'fade', 
     speed:  '900', 
     timeout: 4000, 
     pause:  1, 
     pager:  '#nav', 
     slideExpr: 'div.slide', 
     next:  '#forward', 
     prev:  '#backward' // Comma has been removed 
    }); 

    $('#slideshow').hover(function() { 
     $("#backward").fadeIn(400); 
     $("#forward").fadeIn(400); 
    }, 
     function() { 
     $("#backward").fadeOut(300); 
     $("#forward").fadeOut(300); 
    }); 

    $('#imax').before('<ul id="nav_imax">').cycle({ 
     fx:  'scrollHorz', 
     speed:  '1000', 
     timeout: 5000, 
     pause:  1, 
     pager:  '#nav_imax', 
     slideExpr: 'div.slide', 

     // callback fn that creates a thumbnail to use as pager anchor 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>'; 
     } // Comma has been removed 

    }); 

});

Voici le lien de travail: http://jsfiddle.net/V6EeS/4/

Source

2012-02-21 22:36:27

jQuery Cycle Plugin - Erreur

Répondre

Questions connexes