I have a Jquery Cycle slideshow that has a click function to animate a pager navigation. this works if the slideshow is manual. I now want the slideshow to run automatically and the pager navigation to animate with the change of the slideshow image. This is the code that works with a manual click but now that i have set the slideshow to run automatically this code wont get actioned. What do i need to change to get the event to occur
<script type="text/javascript">
//<![CDATA]
$(function(){
// nav animation2
$('#nav_move').css({
width: 16,
height: 16
});
$('#navi a').click(function() {
var offset = $(this).offset();
var offsetbody= $('#nav').offset();
//find the offset of the wrapping div
$('#nav_move').animate({
width: $(this).width()+7,
height: 16,
left: (offset.left-offsetbody.left-1.2)
});
return false;
});
});
//]]>
</script>
This is the code for the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Michael Horsfall" />
<title>Client Slideshow</title>
<script src="modules/mod_clients_slideshow/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="modules/mod_clients_slideshow/js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="modules/mod_clients_slideshow/js/preloadCssImages.jQuery_v5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.preloadCssImages();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: '<?php echo $effectFx; ?>',
speed: <?php echo $speed; ?>,
timeout: 1000,
nowrap: 0,
fit: 1,
pause: 2,
pager: '#navi'
});
$('#nav .next a').click(function(){
var nextClick = $('#navi a.activeSlide').next('a');
$(nextClick).click();
return false;
})
// back arrow
$('#nav .prev a').click(function(){
var prevClick = $('#navi a.activeSlide').prev('a');
$(prevClick).click();
return false;
})
});
</script>
<script type="text/javascript">
//<![CDATA]
$(function(){
// nav animation2
$('#nav_move').css({
width: 16,
height: 16
});
$('#navi a').click(function() {
var offset = $(this).offset();
var offsetbody= $('#nav').offset();
//find the offset of the wrapping div
$('#nav_move').animate({
width: $(this).width()+7,
height: 16,
left: (offset.left-offsetbody.left-1.2)
});
return false;
});
});
//]]>
</script>
<link rel="stylesheet" href="modules/mod_clients_slideshow/css/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<h1>
<?php
try {
// Styling for images
echo "<div id=\"myslides\">";
$files = new DirectoryIterator($imageFolder);
$i=0;
$files_array = array();
foreach ($files as $fileinfo){
if ($fileinfo->isFile()){
$files_array[$i++]=$fileinfo->getFileName();
}
}
asort($files_array);
foreach ( $files_array as $file ) {
$path = $imageFolder . "/" . $file;
$fileBaseName=basename($path,".jpg");
$trimmed=substr($fileBaseName,2);
echo "<img src=\"" . $path . "\" alt=\"" . $trimmed . "\" />";
}
echo "</div>";
}
catch(Exception $e) {
echo 'No images found for this slideshow.<br />';
}
?>
</h1>
</div>
<div id="nav" class="nav">
<span id="nav_move"></span>
<div id="navi" class="navi">
</div>
</div>
</body>
</html>
The cycle plugin has options allowing you to set callbacks – onPagerEvent and onPrevNextEvent. I would use these callbacks to do the additional animations.
cycle options: http://jquery.malsup.com/cycle/options.html