root / htmltest / sites / all / themes / bluemasters / js / bluemasters.js @ 6c38d829
1 |
jQuery(document).ready(function($) { |
---|---|
2 |
|
3 |
//Set Default State of each portfolio piece
|
4 |
$(".paging").show(); |
5 |
$(".paging a:first").addClass("active"); |
6 |
|
7 |
//Get size of images, how many there are, then determin the size of the image reel.
|
8 |
var imageWidth = $(".window").width(); |
9 |
var imageSum = $(".image_reel img").size(); |
10 |
var imageReelWidth = imageWidth * imageSum;
|
11 |
|
12 |
//Adjust the image reel to its new size
|
13 |
$(".image_reel").css({'width' : imageReelWidth}); |
14 |
|
15 |
//Paging + Slider Function
|
16 |
rotate = function(){ |
17 |
var triggerID = $active.attr("rel") - 1; //Get number of times to slide |
18 |
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide |
19 |
|
20 |
$(".paging a").removeClass('active'); //Remove all active class |
21 |
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) |
22 |
|
23 |
$(".desc").stop(true,true).slideUp('slow'); |
24 |
|
25 |
$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); |
26 |
|
27 |
//Slider Animation
|
28 |
$(".image_reel").animate({ |
29 |
left: -image_reelPosition
|
30 |
}, 500 );
|
31 |
|
32 |
|
33 |
}; |
34 |
|
35 |
//Rotation + Timing Event
|
36 |
rotateSwitch = function(){ |
37 |
$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); |
38 |
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds |
39 |
$active = $('.paging a.active').next(); |
40 |
if ( $active.length === 0) { //If paging reaches the end... |
41 |
$active = $('.paging a:first'); //go back to first |
42 |
} |
43 |
rotate(); //Trigger the paging and slider function
|
44 |
}, 10000); //Timer speed in milliseconds (3 seconds) |
45 |
|
46 |
}; |
47 |
|
48 |
rotateSwitch(); //Run function on launch
|
49 |
|
50 |
//On Click
|
51 |
$(".paging a").click(function() { |
52 |
$active = $(this); //Activate the clicked paging |
53 |
//Reset Timer
|
54 |
clearInterval(play); //Stop the rotation
|
55 |
rotate(); //Trigger rotation immediately
|
56 |
rotateSwitch(); // Resume rotation
|
57 |
return false; //Prevent browser jump to link anchor |
58 |
}); |
59 |
|
60 |
}); |