jQuery image crossfader problem

Question

Hey!,

I have a image switcher fadein/out (it will crossfade iamges - auto(1 - x) ) and a pager but i cant manage to make the image rotation listen the click action on pager, when clicked on pager the image will NOT jup tu the specific img.

The problem is in the rotate function the triggerID will hold the "rel" num of the current pager-element which is the equivalent to the image "list" num, so when clicked on the pager, the triggerID will show the rel number that was clicked... can i use that to display the image

Here is the code for JQ:

$(".paging a:first").addClass("active");

//Rotation
rotate = function(){
 var triggerID = $active.attr("rel"); //Get number of times to images

 $(".paging a").removeClass('active'); //Remove all active class
 $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)


 //CrossFade Animation
 var $activeImg = $('.image_reel img.active');
 if ( $activeImg.length == 0 ) $activeImg = $('.image_reel img:last');

 var $next =  $activeImg.next().length ? $activeImg.next() : $('.image_reel img:first');

 $activeImg.addClass('last-active');

 $next.css({opacity: 0.0})
  .addClass('active')
  .animate({opacity: 1.0}, 500, function() {
   $activeImg.removeClass('active last-active');
  });
}; 

//Rotation  and Timing Event
rotateSwitch = function(){
 play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
  $active = $('.paging a.active').next(); //Move to the next paging

  if ( $active.length === 0) { //If paging reaches the end...
   $active = $('.paging a:first'); //go back to first

  }

  rotate(); //Trigger the paging and slider function
 }, 3000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch



//On Click
$(".paging a").click(function() {
 $active = $(this); //Activate the clicked paging
 //Reset Timer
 clearInterval(play); //Stop the rotation
 rotate(); //Trigger rotation immediately
 rotateSwitch(); // Resume rotation timer
 return false; //Prevent browser jump to link anchor
});

The HTML code:

<div class="image_reel">
    <img src="images/slideshow/img1.jpg" alt="image 1" class="active">
    <img src="images/slideshow/img2.jpg" alt="image 2">
    <img src="images/slideshow/img3.jpg" alt="image 3">
    <img src="images/slideshow/img4.jpg" alt="image 4">
</div>

<div class="paging">
  <a href="#" rel="1" title="image 1">&nbsp;</a>
  <a href="#" rel="2" title="image 2">&nbsp;</a>
  <a href="#" rel="3" title="image 3">&nbsp;</a>
  <a href="#" rel="4" title="image 4">&nbsp;</a>
</div>

plz help.

Answer 1

I think the issue is where it's selecting $next in the rotate function. It's basically cycling through the images and ignoring the triggerID that corresponds the user's selection. So, the first time the user clicks on one of the pages, it will get out of sync.

I was able to fix it by replacing this line:

var $next =  $activeImg.next().length ? $activeImg.next() : $('.image_reel img:first');

with these two:

// get the corresponding image index from the triggerID (0-based!)
var imgIndex = parseInt(triggerID)-1;
// use the ":nth" selector to get the correct image
var $next = $('.image_reel img:nth(' + imgIndex + ')');

The image and user selected paging will now stay in sync.