Cycle plugin - How to activate the slideshow effect faster.
Hello I have a little problem with the slideshow, the scrollLeft effect is activated on rollover, but, it is quite slow, and it give me the sensation that the slideshow begins with the "pause".
Here we can see the same effect, but really faster :
HTML Version
I just want to make the same think, but I don't now how to make that !
And finally, my code :
The header :
- <script type="text/javascript" src="js/jquery.cycle.all.2.74.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<style type="text/css">
.slideshow { height: 130px; width: 314px; background: url('images/thumb2.png') }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('div.slideshow').cycle({
fx: 'scrollLeft',
speed: 400,
timeout: 800,
start: 0,
interval: false,
animIn: -200,
delay: -3000,
easing: 'easeOutExpo',
requeueTimeout: 250,
});
$("div.slideshow").cycle('pause'); //we pause the animation by default
$("div.slideshow").mouseover(function(){
$(this).cycle('resume');
}).mouseout(function(){
$(this).cycle('pause');
});
});
</script>
The index.php :
-
<?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 p75GetThumbnail($post->ID, null, null); ?>" 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 du slideshow pour chaque article fin -->
Thank you in advance.