root / htmltest / sites / all / themes / bluemasters / js / bluemasters.js @ 6c38d829
1 | 85ad3d82 | Assos Assos | 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 | }); |