|
|
Line 18: |
Line 18: |
| =iGEM2010= | | =iGEM2010= |
| =iGEM2011= | | =iGEM2011= |
- | =iGEM2012=
| |
- | <html>
| |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></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>
| |
- |
| |
- | <style type="text/css">
| |
- | /*--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--*/
| |
- | </style>
| |
- | <div id="slideshow"> <!--???-->
| |
- | <div class="textboxes" id="main_view"> <!--???-->
| |
- | <div class="window"> <!--???-->
| |
- | <div class="image_reel"> <!--Slideshow Pics go here - 760x280px -->
| |
- | <a href="http://2012hs.igem.org/Main_Page"><img src="http://igem.org/wiki/images/e/ef/IMG_2647-slideshow.png" alt="" /></a>
| |
- | <a href="http://2012.igem.org/Main_Page"><img src="http://igem.org/wiki/images/6/67/Slideshow_Europe1.jpg" alt="" /></a>
| |
- | <a href="http://2012hs.igem.org/Main_Page"><img src="http://igem.org/wiki/images/1/12/IMG_1944-slideshow.png" alt="" /></a>
| |
- | <a href="http://2012.igem.org/Main_Page"><img src="http://igem.org/wiki/images/2/24/Slideshow_biobrick.jpg" alt="" /></a>
| |
- | <a href="http://2012hs.igem.org/Main_Page"><img src="http://igem.org/wiki/images/f/ff/CIDEB-slideshow.png" alt="" /></a>
| |
- | <a href="http://2012.igem.org/Main_Page"><img src="http://igem.org/wiki/images/e/e2/IGEM_0442.png" alt="" /></a>
| |
- | <a href="http://2012hs.igem.org/Main_Page"><img src="http://igem.org/wiki/images/4/41/IMG_2419-slideshow.png" alt="" /></a>
| |
- | <a href="http://2012.igem.org/Main_Page"><img src="http://igem.org/wiki/images/f/fa/DSC_3023-slideshow.png" alt="" /></a>
| |
- | <a href="http://2012.igem.org/Main_Page"><img src="http://igem.org/wiki/images/0/02/Slideshow_Asia3.jpg" alt="" /></a>
| |
- | </div>
| |
- | </div>
| |
- | <div class="paging">
| |
- | <a href="#" rel="1">1</a>
| |
- | <a href="#" rel="2">2</a>
| |
- | <a href="#" rel="3">3</a>
| |
- | <a href="#" rel="4">4</a>
| |
- | <a href="#" rel="5">5</a>
| |
- | <a href="#" rel="6">6</a>
| |
- | <a href="#" rel="7">7</a>
| |
- | <a href="#" rel="8">8</a>
| |
- | <a href="#" rel="9">9</a>
| |
- | </div>
| |
- | <div class="pause"><a href="#">II</a></div>
| |
- | </div>
| |
- | </div>
| |
- | </html>
| |