jQuery Cycle plugin IE6/7 questions

Question

J'ai mis en place un diaporama en utilisant le plugin Cycle, qui fonctionne dans tous les navigateurs sauf IE6 & 7, où les images apparaissent juste dans une liste, et la division #page_copy ne se cache pas . J'ai passé le code toute la journée sans aucune chance, et je ne sais pas exactement comment ou ce que je devrais rechercher.

Quelle serait la meilleure façon de résoudre ce problème? Je sais que la div #page_copy se cache lorsque je retire le reste du code, et je l'ai essayé l'inverse (qui avait sans résultat)

<script type="text/javascript" charset="utf-8"> 
     jQuery.fn.fadeToggle = function(speed, easing, callback) { 
      return this.animate({opacity: 'toggle'}, speed, easing, callback); 
     }; 


     $(document).ready(function() { 
      $('#page_copy').hide(); 
      $('a#info_close_button').click(function() { 
       $('#page_copy').fadeOut(200); 
       return false; 
      }); 
      $('a#info_button').click(function() { 
       $('#page_copy').fadeToggle(200); 
       return false; 
      }); 
     }); 


     $(window).load(function() { 
      // vertically center single image 
      var $image_cnt = $("#images > img").size(); 
      if($image_cnt < 2) { 
       var $single_img = $("#images").children(':first-child'); 
       var h = $single_img.height(); 
       $single_img.css({ 
        marginTop: (620 - h)/2, 
       }); 
       $(".next").css("display","none"); 
       $(".prev").css("display","none"); 
      } 
     }); 


     // wait until images have loaded before starting cycle 
     $(window).load(function() { 
      // front image rotator 
      $('#images').cycle({ 
       fx: 'fade', 
       speed: 300, 
       next: '.next', 
       prev: '.prev', 
       containerResize: 0, 
       timeout: 0, 
       delay: -2000, 
       before: onBefore 
      }); 

     }); 

     // hide all but the first image when page loads 
     $(document).ready(function() { 
      $('#images img:gt(0)').hide(); 
     }); 

     // callback fired when each slide transition begins 
     function onBefore(curr,next,opts) { 
      var $slide = $(next); 
      var w = $slide.width(); 
      var h = $slide.height(); 
      $slide.css({ 
       marginTop: (620 - h)/2, 
       marginLeft: (650 - w)/2 
      }); 
     }; 
    </script> 

Answer 1

Je ne comprends pas vraiment pourquoi vous avez plusieurs $(document).ready et $(window).load ..

Peut-être que vous devriez simplement essayer de tout placer dans un seul bloc $(document).ready.

De plus, déplacez la définition de function onBefore(...) au tout début de la balise <script>. Directement avant le code jQuery.fn.fadeToggle.

Essayez de supprimer aussi la virgule non nécessaire à la fin de ce morceau de code

$single_img.css({ 
    marginTop: (620 - h)/2, //<---- remove comma 
}); 

Et aussi supprimer ce point-virgule inutile

function onBefore(curr,next,opts) {...}; //<--- unneeded