jQuery Forum

I am using wordpress, and this solution :


<script type="text/javascript">
$(document).ready(function() {
    $('div.slideshow').cycle({
        fx: 'scrollLeft',
        speed:    300,
        timeout:  800
    });


 $("div.slideshow").cycle('pause'); //we pause the animation by default

    $("div.slideshow").mouseover(function(){
      $(this).cycle('resume');
    }).mouseout(function(){
      $(this).cycle('pause');
    });

});
</script>

only  works  on Firefox.
For others browsers, it works only if images have "real links"

Example : This solution works :

<div id="slideshow" class="slideshow" onclick="window.location.href='<?php the_permalink() ?>'">

<img src="http://catalarem.com/image1.jpg" class="first"/>
<img src="http://catalarem.com/image2.jpg"/>
<img src="http://catalarem.com/image3.jpg"/>
<img src="http://catalarem.com/image4.jpg"/>

</div>


This one doesn't works :

<div id="slideshow" class="slideshow" onclick="window.location.href='<?php the_permalink() ?>'">

<img src="<?php echo $image1; ?>" class="first"/>
<img src="<?php echo $image2; ?>"/>
<img src="<?php echo $image3; ?>"/>
<img src="<?php echo $image4; ?>"/>


</div>

catalarem has the right solution, just pause it after starting...

It finally works on Safari, IE7, 8,9, in Firefox, Chrome, Opera 10.5...
and the solution is really "strange" :

Just because of the width="314" height="130"  parameter it now works !


My index.php (with a wordpress loop)

1. <!-- 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 id="slideshow1" style="height:130px"  class="slideshow" onclick="window.location.href='<?php the_permalink() ?>'">
   
   <img src="<?php echo $image2; ?>" width="314" height="130" class="first"/>
   <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 -->

And in my header I have :

1. <script type="text/javascript">
   $(document).ready(function() {
       $('div.slideshow').cycle({
           fx: 'scrollLeft',
           speed:    300,
           timeout:  800,
       });
   
   
    $("div.slideshow").cycle('pause'); //we pause the animation by default
   
       $("div.slideshow").mouseover(function(){
         $(this).cycle('resume');
       }).mouseout(function(){
         $(this).cycle('pause');
       });
   
   });
   </script>
   

You can see the final result here : http://primitive-animation.com/site/films (if you can't access to the web Site, it's because it's not finished yet !)