Étrangeté DOM avec cycle jQuery

Question

J'obtiens dynamiquement des images de répertoires pour certains diaporamas dans un site WordPress que je suis en train de créer. Parfois, ils apparaissent sur les pages, parfois ils ne le font pas. En regardant cela, je suis sûr que j'ai besoin d'un certain type de préchargement pour initialiser mes images dans le DOM avant que le plugin de cycle fasse ce qu'il fait, mais je ne sais pas où coder le code pertinent. Mon code est le suivant:

<?php 
     function show_gallery($path){ 
      if($path == ""){ 
       return; 
      } 
      // Fix the path to be usable 
      $path = "wp-content/themes/mytheme" . "$path"; 

      // Ignore files/paths that aren't usable 
      $img_list = array_diff(scandir($path), array('.', '..', '.DS_Store')); 
      $imgcount = count($img_list); 
      if($imgcount > 1){ 
       echo "<div id=\"overlay-prev\"><img src='/wp-content/themes/grisedale/assets/gallery/prev.png' class='prev'></div>"; 
       echo "<div id=\"overlay-next\"><img src='/wp-content/themes/grisedale/assets/gallery/next.png' class='next'></div>"; 
      } else { 
       echo ""; 
      } 
      echo "<div id=\"current-image\">"; 
      // Spit out the images to be controlled by cycle 
      foreach ($img_list as $img){ 
       echo "<img class='gallery-images' src='../../../$path$img'>\n"; 
      } 
      echo "</div>"; 
     } 
    ?> 
    <script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#current-image').cycle({ 
      fx: 'fade', 
      speed: 'fast', 
      timeout: 0, 
      prev: '#overlay-prev', 
      next: '#overlay-next', 
      containerResize: true 
     }); 
    }); 
    </script> 

Honnêtement, les images sont petites et il y avait une sorte de test de bon sens que je pouvais faire avec PHP qui probablement suffire. En tout cas, j'ai juste besoin que les images se chargent de manière prévisible dans n'importe quelle page qui a une galerie sans avoir à faire trois ou quatre rechargements pour les voir. À votre santé.

Answer 1

MISE À JOUR

Alors, le truc avec le plugin cycle jQuery est de définir une largeur et la hauteur de vos images. Je définissais une largeur, et apparemment pour la plupart des navigateurs cela ne suffit pas. Je définis également une hauteur minimale et maintenant tout fonctionne comme prévu.