jQuery image crossfader problem
- by Dr Casper Black
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"> </a>
<a href="#" rel="2" title="image 2"> </a>
<a href="#" rel="3" title="image 3"> </a>
<a href="#" rel="4" title="image 4"> </a>
</div>
plz help.
