Difference between revisions of "Template:Team:WLC-Milwaukee2"
Mwmortensen (Talk | contribs) |
Mwmortensen (Talk | contribs) |
||
(7 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | //Show the paging and activate its first link | ||
+ | $(".paging").show(); | ||
+ | $(".paging a:first").addClass("active"); | ||
+ | |||
+ | //Get size of the image, how many images there are, then determin the size of the image reel. | ||
+ | var imageWidth = $(".window").width(); | ||
+ | var imageSum = $(".image_reel img").size(); | ||
+ | var imageReelWidth = imageWidth * imageSum; | ||
+ | |||
+ | //Adjust the image reel to its new size | ||
+ | $(".image_reel").css({'width' : imageReelWidth}); | ||
+ | |||
+ | //Paging and Slider Function | ||
+ | rotate = function(){ | ||
+ | var triggerID = $active.attr("rel") - 1; //Get number of times to slide | ||
+ | var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide | ||
+ | $(".paging a").removeClass('active'); //Remove all active class | ||
+ | $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) | ||
+ | |||
+ | //Slider Animation | ||
+ | $(".image_reel").animate({ | ||
+ | left: -image_reelPosition | ||
+ | }, 500 ); | ||
+ | }; | ||
+ | |||
+ | //Rotation and Timing Event | ||
+ | rotateSwitch = function(){ | ||
+ | play = setInterval(function(){ //Set timer - this will repeat itself every 7 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 | ||
+ | }, 6000); //Timer speed in milliseconds (6 seconds) | ||
+ | }; | ||
+ | |||
+ | rotateSwitch(); //Run function on launch | ||
+ | |||
+ | //On Hover | ||
+ | //$(".image_reel a").hover(function() { | ||
+ | //clearInterval(play); //Stop the rotation | ||
+ | //}, function() { | ||
+ | //rotateSwitch(); //Resume rotation timer | ||
+ | //}); | ||
+ | |||
+ | //On Click | ||
+ | $(".pause a").click(function() { | ||
+ | clearInterval(play); //Stop the rotation | ||
+ | }); | ||
+ | |||
+ | |||
+ | //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 | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
/*-- Note: ", .firstHeading" was added to the non-display section below for what should be obvious reasons; it adds the ugly giant "what's this page called again" header section --*/ | /*-- Note: ", .firstHeading" was added to the non-display section below for what should be obvious reasons; it adds the ugly giant "what's this page called again" header section --*/ | ||
Line 81: | Line 147: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/*--Slideshow Begins Here--*/ | /*--Slideshow Begins Here--*/ | ||
#slideshow { | #slideshow { | ||
Line 137: | Line 158: | ||
margin-right:auto; | margin-right:auto; | ||
position: relative; | position: relative; | ||
− | height:300px; width: | + | height:300px; width: 870px; |
} | } | ||
.window { | .window { | ||
− | height: | + | height:300px; width: 870px; |
overflow: hidden; /*--Hides anything outside of the set width/height--*/ | overflow: hidden; /*--Hides anything outside of the set width/height--*/ | ||
position: absolute; | position: absolute; | ||
Line 155: | Line 176: | ||
.paging { | .paging { | ||
position: absolute; | position: absolute; | ||
− | bottom: 10px; right: | + | bottom: 10px; right: 0px; |
− | width: 300px; height: | + | width: 300px; height:0px; |
z-index: 100; /*--Assures the paging stays on the top layer--*/ | z-index: 100; /*--Assures the paging stays on the top layer--*/ | ||
text-align: right; | text-align: right; | ||
− | line-height: | + | line-height: 0px; |
font-weight: bold; | font-weight: bold; | ||
background: url(paging_bg2.png) no-repeat; | background: url(paging_bg2.png) no-repeat; | ||
Line 171: | Line 192: | ||
.pause { | .pause { | ||
position: absolute; | position: absolute; | ||
− | bottom: 10px; right: | + | bottom: 10px; right: -30px; |
− | width: 25px; height: | + | width: 25px; height:0px; |
z-index: 200; /*--Assures the paging stays on the top layer--*/ | z-index: 200; /*--Assures the paging stays on the top layer--*/ | ||
text-align: center; | text-align: center; | ||
− | line-height: | + | line-height: 0px; |
font-weight: bold; | font-weight: bold; | ||
display: block; /*--Hidden by default, will be later shown with jQuery--*/ | display: block; /*--Hidden by default, will be later shown with jQuery--*/ |
Latest revision as of 07:23, 18 September 2015