Team:Copenhagen/Header

From 2012.igem.org

(Difference between revisions)
Line 23: Line 23:
#graa {background-color:#999999;}
#graa {background-color:#999999;}
-
 
+
<script type="text/javascript" src="https://2012.igem.org/Template:Team:Copenhagen2012"></script>
-
#slideshow {
+
<script type="text/javascript">
-
    position:relative;
+
-
    height:350px;
+
-
}
+
-
#slideshow IMG {
+
/***
-
     position:absolute;
+
     Simple jQuery Slideshow Script
-
     top:0;
+
     Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
-
    left:0;
+
***/
-
    z-index:8;
+
-
}
+
-
 
+
-
#slideshow IMG.active {
+
-
    z-index:10;
+
-
}
+
-
 
+
-
#slideshow IMG.last-active {
+
-
    z-index:9;
+
-
}
+
function slideSwitch() {
function slideSwitch() {
-
     var $active = $('#slideshow IMG.active');
+
     var $active = $('#slideshow DIV.active');
-
     if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
+
     if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
 +
    // use this to pull the divs in the order they appear in the markup
     var $next =  $active.next().length ? $active.next()
     var $next =  $active.next().length ? $active.next()
-
         : $('#slideshow IMG:first');
+
         : $('#slideshow DIV:first');
 +
 
 +
    // uncomment below to pull the divs randomly
 +
    // var $sibs  = $active.siblings();
 +
    // var rndNum = Math.floor(Math.random() * $sibs.length );
 +
    // var $next  = $( $sibs[ rndNum ] );
 +
 
     $active.addClass('last-active');
     $active.addClass('last-active');
Line 65: Line 59:
     setInterval( "slideSwitch()", 5000 );
     setInterval( "slideSwitch()", 5000 );
});
});
 +
 +
</script>
 +
 +
<style type="text/css">
 +
 +
/*** set the width and height to match your images **/
 +
 +
#slideshow {
 +
    position:relative;
 +
    height:400px;
 +
}
 +
 +
#slideshow DIV {
 +
    position:absolute;
 +
    top:0;
 +
    left:0;
 +
    z-index:8;
 +
    opacity:0.0;
 +
    height: 400px;
 +
    background-color: #FFF;
 +
}
 +
 +
#slideshow DIV.active {
 +
    z-index:10;
 +
    opacity:1.0;
 +
}
 +
 +
#slideshow DIV.last-active {
 +
    z-index:9;
 +
}
 +
 +
#slideshow DIV IMG {
 +
    height: 350px;
 +
    display: block;
 +
    border: 0;
 +
    margin-bottom: 10px;
 +
}
</style>
</style>

Revision as of 14:33, 30 July 2012

Retrieved from "http://2012.igem.org/Team:Copenhagen/Header"