Forum d'entraide PHPFrance

Bonjour,
Grâce aux champs personnalisés worpdress je me suis dis que j'allais faire un affichage non pas d'une miniature par article mais de plusieurs, et qu'au survol de la souris on passerait aux images suivantes, alors voilà j'ai utilisé le Cycle plugin pour Jquery, ça fonctionne certes, mais -et cela doit être un problème très bête-, j'ai un problème de ciblage car toutes les miniatures défilent d'un coup au lieu de défiler de manière indépendante au survol de la souris.

Voir le problème : >>> http://primitive-animation.com/site/films <<<

Pour l'instant chaque div à la même "class="slideshow" et c'est surement de la d'où vient le problème :

Le header :

Code : PHP - Sélectionner

<script type="text/javascript">

      $(document).ready(function() {

      $('.slideshow').cycle( {
          fx: 'scrollLeft',
          easing: 'easeOutExpo',
          speed:    400,
          timeout:  1500
      });

      $('.slideshow').cycle('pause');
      $('.suivant').mouseover(function() {
          $('.slideshow').cycle('resume', true);
      });
      $('.suivant').mouseout(function() {
          $('.slideshow').cycle('pause');
      });
      });
      </script>

L'index :

<!-- Génération de la miniature pour chaque article début -->

      <?php $image2 = get_post_meta($post->ID, 'miniature2', true); ?>
      <?php $image3 = get_post_meta($post->ID, 'miniature3', true); ?>
      <?php $image4 = get_post_meta($post->ID, 'miniature4', true); ?>
       
      <a href="<?php the_permalink() ?>" onclick="<?php the_permalink() ?>">
      <div class="suivant" style="height:130px; width:314px; position:absolute; z-index:89; background:transparent;  filter:alpha(opacity=10);-moz-opacity:.10;opacity:.10; cursor:pointer" ></div>

      <div class="slideshow" >

      <img src="<?php echo p75GetThumbnail($post->ID, null, null); ?>" width="314" height="130" />
      <img src="<?php echo $image2; ?>" width="314" height="130"/>
      <img src="<?php echo $image3; ?>" width="314" height="130"/>
      <img src="<?php echo $image4; ?>" width="314" height="130"/>

      </div>
      </a>
 <!-- Génération de la miniature pour chaque article fin -->

Je me suis dis que j'allais changer $('.suivant') par $('#suivant') ou d'essayer d'avoir un id dynamique avec la propriété wordpress : <?php $postid = get_the_ID(); ?> afin de générer une id différente pour chaque slideshow,
mais rien ne marche, soit tout bouge ensemble, soit y'a que la première image qui bouge. Merci de votre aide d'avance, j'aimerai finir ça au plus vite !

Je n'ai pas vraiment de réponse, mais une piste à tester:
au lieu de donner une classe "suivant" et "slideshow" à tout tes divs, tu te débrouille pour leurs mettre un id du styleoù tu fais varier ID selon l'entrée.
ensuite ton javascript ressemblera à cela: J'espère que tu auras saisis l'idée Car le code est fait de tête est contient donc surement des fautes
Bon courage!