"
Team:WashU StLouis/CSS
From 2014.igem.org
(Difference between revisions)
| Line 265: | Line 265: | ||
.annItem ul, .annItem li {padding: 0px; margin: 0px;} | .annItem ul, .annItem li {padding: 0px; margin: 0px;} | ||
.annItem li {list-style: none; margin: 5px} | .annItem li {list-style: none; margin: 5px} | ||
| + | </style> | ||
| + | </html> | ||
| + | |||
| + | |||
| + | /* | ||
| + | Thanks to 2013 WLC-Milwaukee for their slideshow code | ||
| + | */ | ||
| + | |||
| + | <HTML xmlns="http://www.w3.org/1999/xhtml"> | ||
| + | <HEAD> | ||
| + | |||
| + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | ||
| + | |||
| + | <script type="text/javascript" src="http://linacabal.com/juan/ddaccordion.js"> | ||
| + | |||
| + | /*********************************************** | ||
| + | * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) | ||
| + | * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts | ||
| + | * This notice must stay intact for legal use | ||
| + | ***********************************************/ | ||
| + | |||
| + | </script> | ||
| + | <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> | ||
| - | |||
/*--Slideshow Begins Here--*/ | /*--Slideshow Begins Here--*/ | ||
#slideshow { | #slideshow { | ||
| Line 342: | Line 426: | ||
/*--Slideshow Ends Here--*/ | /*--Slideshow Ends Here--*/ | ||
| - | |||
| - | + | </HTML> | |
| - | + | ||
| - | </ | + | |
Revision as of 19:46, 19 July 2014
/*
Thanks to 2013 WLC-Milwaukee for their slideshow code
- /
/*--Slideshow Begins Here--*/ #slideshow { display: block; vertical-align: middle; position: relative; } /*--Main Container--*/ #main_view { margin-left:auto; margin-right:auto; position: relative; height:300px; width: 780px; } .window { height:280px; width: 760px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: absolute; display: block; top:50%; left:50%; margin: -140px 0 0 -380px; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;} .paging { position: absolute; bottom: 10px; right: 50px; width: 300px; height:47px; z-index: 100; /*--Assures the paging stays on the top layer--*/ text-align: right; line-height: 40px; font-weight: bold; background: url(paging_bg2.png) no-repeat; display: none; /*--Hidden by default, will be later shown with jQuery--*/ } .paging a { padding: 5px; text-decoration: none; color: #fff; text-shadow: #333 1px 1px 1px; } .pause { position: absolute; bottom: 10px; right: 20px; width: 25px; height:47px; z-index: 200; /*--Assures the paging stays on the top layer--*/ text-align: center; line-height: 40px; font-weight: bold; display: block; /*--Hidden by default, will be later shown with jQuery--*/ } .pause a { padding: 5px; text-decoration: none; letter-spacing:1px; font-weight: thick; color: #f0f0f0; text-shadow: #333 1px 1px 1px; border: 2px solid #ccc; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a.active { font-weight: bold; border: 2px solid #fff; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} /*--Slideshow Ends Here--*/
