|
|
| 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> | + | <script language="JavaScript1.1"> |
| | + | <!-- |
| | | | |
| - | <script type="text/javascript">
| + | /* |
| | + | JavaScript Image slideshow: |
| | + | By JavaScript Kit (www.javascriptkit.com) |
| | + | Over 200+ free JavaScript here! |
| | + | */ |
| | | | |
| - | /***
| + | var slideimages=new Array() |
| - | Simple jQuery Slideshow Script
| + | var slidelinks=new Array() |
| - | 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 :)
| + | function slideshowimages(){ |
| - | ***/
| + | for (i=0;i<slideshowimages.arguments.length;i++){ |
| - | | + | slideimages[i]=new Image() |
| - | function slideSwitch() { | + | slideimages[i].src=slideshowimages.arguments[i] |
| - | var $active = $('#slideshow DIV.active');
| + | |
| - | | + | |
| - | 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()
| + | |
| - | : $('#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');
| + | |
| - | | + | |
| - | $next.css({opacity: 0.0})
| + | |
| - | .addClass('active')
| + | |
| - | .animate({opacity: 1.0}, 1000, function() {
| + | |
| - | $active.removeClass('active last-active');
| + | |
| - | });
| + | |
| | } | | } |
| - |
| |
| - | $(function() {
| |
| - | setInterval( "slideSwitch()", 5000 );
| |
| - | });
| |
| - |
| |
| - | </script>
| |
| - |
| |
| - | <style type="text/css">
| |
| - |
| |
| - | /*** set the width and height to match your images **/
| |
| - |
| |
| - | #slideshow {
| |
| - | height:371px;
| |
| | } | | } |
| | | | |
| - | #slideshow DIV {
| + | function slideshowlinks(){ |
| - | top:0;
| + | for (i=0;i<slideshowlinks.arguments.length;i++) |
| - | left:0;
| + | slidelinks[i]=slideshowlinks.arguments[i] |
| - | z-index:8;
| + | |
| - | opacity:0.0;
| + | |
| - | height: 371px;
| + | |
| - | background-color: #FFF;
| + | |
| | } | | } |
| | | | |
| - | #slideshow DIV.active {
| + | function gotoshow(){ |
| - | z-index:10;
| + | if (!window.winslide||winslide.closed) |
| - | opacity:1.0;
| + | winslide=window.open(slidelinks[whichlink]) |
| | + | else |
| | + | winslide.location=slidelinks[whichlink] |
| | + | winslide.focus() |
| | } | | } |
| | | | |
| - | #slideshow DIV.last-active {
| + | //--> |
| - | z-index:9;
| + | </script> |
| - | }
| + | |
| - | | + | |
| - | #slideshow DIV IMG {
| + | |
| - | height: 371px;
| + | |
| - | display: block;
| + | |
| - | border: 0;
| + | |
| - | margin-bottom: 10px;
| + | |
| - | }
| + | |
| | | | |
| | </style> | | </style> |
"
