|
|
Line 3: |
Line 3: |
| <table id="graa" cellpadding=10px><td width="660px" height="100%" valign="top" ><p align="justify"><h2 padding-left="10px">iGEM 2012: Copenhagen</h2> | | <table id="graa" cellpadding=10px><td width="660px" height="100%" valign="top" ><p align="justify"><h2 padding-left="10px">iGEM 2012: Copenhagen</h2> |
| | | |
- | <!----------------------------------------------> | + | <div class="slider-wrapper theme-default"> |
- | <!-- START OF CODE FOR LAMELLA-SLIDESHOW --> | + | <div class="ribbon"></div> |
- | <!----------------------------------------------> | + | <div id="slider" class="nivoSlider"> |
| + | <img src=" " /> |
| + | <img src=" " /> |
| + | <img src=" " /> |
| + | <img src=" " /> |
| + | <img src=" " /> |
| + | <img src=" " /> |
| + | </div> |
| + | </div> |
| | | |
- | <!-- START OF MESSAGE-STYLE CONFIGURATION --> | + | <script type="text/javascript"> |
- | <style> | + | $(window).load(function() { |
| + | $('#slider').nivoSlider(); |
| + | }); |
| + | </script> |
| + | <br> |
| | | |
- | /* Set the border and shadow around the slideshow */
| + | <div id="fb-root"></div> |
- | .borderandshadowstyle {
| + | <script>(function(d, s, id) { |
- | /* shadow for Firefox */
| + | var js, fjs = d.getElementsByTagName(s)[0]; |
- | -moz-box-shadow: 5px 5px 8px #818181;
| + | if (d.getElementById(id)) {return;} |
- | | + | js = d.createElement(s); js.id = id; |
- | /* shadow for Safari and Chrome */
| + | js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; |
- | -webkit-box-shadow: 5px 5px 8px #818181;
| + | fjs.parentNode.insertBefore(js, fjs); |
- | | + | }(document, 'script', 'facebook-jssdk'));</script> |
- | /* shadow for Opera */
| + | |
- | box-shadow: 5px 5px 5px #818181;
| + | |
- | | + | |
- | /* border for all browsers */
| + | |
- | border-style:solid;
| + | |
- | border-width:1px;
| + | |
- | border-color:white;
| + | |
- | }
| + | |
- | | + | |
- | /* Set the attributes of the messagebox */
| + | |
- | .messageboxstyle {
| + | |
- | background-color:black;
| + | |
- | opacity:0.5; /* Set the opacity for Firefox, Opera and Chrome (value may range from 0 - 1) */
| + | |
- | filter:alpha(opacity=50); /* Set the opacity for Internet Explorer (value may range from 1 - 100) */
| + | |
- | padding:3px;
| + | |
- | }
| + | |
- | | + | |
- | /* Set the position of the messagebox */
| + | |
- | .messagealignstyle {
| + | |
- | vertical-align:bottom; /* Set the vertical position (top or middle or bottom) */
| + | |
- | text-align:center; /* Set the gorizontal position (left or center or right) */
| + | |
- | }
| + | |
- | | + | |
- | /* Set the font-attributes */
| + | |
- | a.messagefontstyle {
| + | |
- | font-family:Arial;
| + | |
- | font-size:8pt;
| + | |
- | color:white;
| + | |
- | text-decoration:none;
| + | |
- | }
| + | |
- | | + | |
- | </style> | + | |
- | <!-- END OF MESSAGE-STYLE CONFIGURATION -->
| + | |
- | | + | |
- | <script> | + | |
- | <!-- Beginning of JavaScript -
| + | |
- | | + | |
- | // CREDITS:
| + | |
- | // Slideshow with with lamellar effect
| + | |
- | // by Peter Gehrig
| + | |
- | // Copyright (c) 2010 Peter Gehrig. All rights reserved.
| + | |
- | // Permission given to use the script provided that this notice remains as is.
| + | |
- | // Additional scripts can be found at http://www.fabulant.com
| + | |
- | | + | |
- | // IMPORTANT:
| + | |
- | // If you add this script to a script-library or script-archive
| + | |
- | // you have to add a link to http://www.fabulant.com on the webpage
| + | |
- | // where this script will be running.
| + | |
- | | + | |
- | // CONFIGURATION:
| + | |
- | // Go to http://www.fabulant.com and get the original code
| + | |
- | // with step-by-step instructions and copy-and-paste installation.
| + | |
- | | + | |
- | var picture= [
| + | |
- | | + | |
- | /////////////////////////////////////////////////////////////////////////
| + | |
- | // START OF SCRIPT-CONFIGURATION
| + | |
- | /////////////////////////////////////////////////////////////////////////
| + | |
- | | + | |
- | // Configure the URL (path) of the pictures, the corresponding messages and links below
| + | |
- | // Add as many pictures a you like.
| + | |
- | // You may embed simple HTML-Tags into the message
| + | |
- | {
| + | |
- | src : "https://static.igem.org/mediawiki/2012/9/95/Cop_slide1.jpg", // The URL (path) of picture
| + | |
- | mes : "The Biocenter at KU.", // The message (comment), in this sample with embedded HTML-tag
| + | |
- | url : "#" // The link (where you go when you click on the message)
| + | |
- | }, // Comma required
| + | |
- | | + | |
- | { | + | |
- | src : "https://static.igem.org/mediawiki/2012/c/c7/Cop_slide3.jpg",
| + | |
- | mes : "Loading a Gel.",
| + | |
- | url : "#"
| + | |
- | }, // Comma required
| + | |
- | | + | |
- | {
| + | |
- | src : "https://static.igem.org/mediawiki/2012/c/c8/Cop_slide2.jpg",
| + | |
- | mes : "Cutting bands out of Gel.",
| + | |
- | url : "#"
| + | |
- | }, // Comma required
| + | |
- | | + | |
- | {
| + | |
- | src : "https://static.igem.org/mediawiki/2012/f/fd/Cop_slide4.jpg",
| + | |
- | mes : "RFP expression in E. coli",
| + | |
- | url : "#"
| + | |
- | } // ATTENTION: the last bracket requires no comma!!!
| + | |
- | | + | |
- | ]
| + | |
- | | + | |
- | // target of the picture-links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
| + | |
- | var target_url="_blank"
| + | |
- |
| + | |
- | // number of lamellas.
| + | |
- | var x_slices=11
| + | |
- | | + | |
- | // width of slideshow (pixels)
| + | |
- | var slideshow_width=660
| + | |
- | | + | |
- | // height of slideshow (pixels)
| + | |
- | var slideshow_height=350
| + | |
- | | + | |
- | // pause beween the pictures (seconds)
| + | |
- | var pause=4
| + | |
- | | + | |
- | /////////////////////////////////////////////////////////////////////////
| + | |
- | // END OF SCRIPT-CONFIGURATION
| + | |
- | /////////////////////////////////////////////////////////////////////////
| + | |
- | | + | |
- | // Do not edit below this line
| + | |
- | | + | |
- | var imgpreload=new Array()
| + | |
- | for (iii=0;iii<=picture.length-1;iii++) {
| + | |
- | imgpreload[iii]=new Image()
| + | |
- | imgpreload[iii].src=picture[iii].src
| + | |
- | }
| + | |
- | | + | |
- | var picturewidth
| + | |
- | var pictureheight
| + | |
- | var i_loop=0
| + | |
- | var i_picture=0
| + | |
- | var width_slice
| + | |
- | var cliptop=0
| + | |
- | var clipbottom
| + | |
- | var i_clipright=1
| + | |
- | var contentimg=""
| + | |
- | var contentmes=""
| + | |
- | pause=pause*1000
| + | |
- | | + | |
- | | + | |
- | function initiate() {
| + | |
- | getcontent()
| + | |
- | for (i=0;i<=x_slices;i++) {
| + | |
- | var thisinnersimg=eval("document.getElementById('s"+i+"')")
| + | |
- | var thisinnersmes=eval("document.getElementById('t"+i+"')")
| + | |
- | thisinnersimg.innerHTML=contentimg
| + | |
- | thisinnersmes.innerHTML=contentmes
| + | |
- | var thissimg=eval("document.getElementById('s"+i+"').style")
| + | |
- | thissimg.left=0+"px"
| + | |
- | thissimg.top=0+"px"
| + | |
- | var thissmes=eval("document.getElementById('t"+i+"').style")
| + | |
- | thissmes.left=0+"px"
| + | |
- | thissmes.top=0+"px"
| + | |
- | }
| + | |
- | var thisspan=eval("document.getElementById('s0')")
| + | |
- | width_slice=Math.ceil(slideshow_width/x_slices)
| + | |
- | clipbottom=slideshow_height
| + | |
- | document.getElementById("whole").style.left=0+"px"
| + | |
- | document.getElementById("whole").style.top=0+"px"
| + | |
- | i_picture++
| + | |
- | openlamellar()
| + | |
- | }
| + | |
- | | + | |
- | function openlamellar() {
| + | |
- | clipleft=-width_slice
| + | |
- | clipright=0
| + | |
- | if (i_clipright<=width_slice) {
| + | |
- | for (i=0;i<=x_slices;i++) {
| + | |
- | var thissimg=eval("document.getElementById('s"+i+"').style")
| + | |
- | var thissmes=eval("document.getElementById('t"+i+"').style")
| + | |
- | thissimg.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
| + | |
- | thissmes.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
| + | |
- | clipleft+=width_slice
| + | |
- | clipright=clipleft+i_clipright
| + | |
- | }
| + | |
- | i_clipright++
| + | |
- | var timer=setTimeout("openlamellar()",20)
| + | |
- | }
| + | |
- | else {
| + | |
- | clearTimeout(timer)
| + | |
- | document.getElementById("whole").innerHTML="<span style='position:absolute;top:0px;left:0px'>"+contentimg+"</span><span style='position:absolute;top:0px;left:0px'>"+contentmes+"</span>"
| + | |
- | var timer=setTimeout("changepicture()",pause)
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | function getcontent() {
| + | |
- | contentimg="<table cellpadding=0 cellspacing=0 border=0 width="+slideshow_width+" height="+slideshow_height+"><tr><td width="+slideshow_width+" height="+slideshow_height+"'><img src="+picture[i_picture].src+" border=0 width="+slideshow_width+" height="+slideshow_height+"></td></tr></table>"
| + | |
- | contentmes="<table cellpadding=0 cellspacing=0 border=0 width="+slideshow_width+" height="+slideshow_height+"><tr valign=top><td class='messagealignstyle'><div class='messageboxstyle' style='width:"+slideshow_width+"px;'><a class='messagefontstyle' href='"+picture[i_picture].url+"' target='"+target_url+"'>"+picture[i_picture].mes+"</a></div></td></tr></table>"
| + | |
- | }
| + | |
- | | + | |
- | function changepicture() {
| + | |
- | i_clipright=0
| + | |
- | clipleft=0
| + | |
- | clipright=0
| + | |
- | for (i=0;i<=x_slices;i++) {
| + | |
- | var thiss=eval("document.getElementById('s"+i+"').style")
| + | |
- | thiss.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
| + | |
- | }
| + | |
- | if (i_picture>picture.length-1) {i_picture=0}
| + | |
- | getcontent()
| + | |
- | | + | |
- | for (i=0;i<=x_slices;i++) {
| + | |
- | var thisinnersimg=eval("document.getElementById('s"+i+"')")
| + | |
- | var thisinnersmes=eval("document.getElementById('t"+i+"')")
| + | |
- | thisinnersimg.innerHTML=contentimg
| + | |
- | thisinnersmes.innerHTML=contentmes
| + | |
- | }
| + | |
- | i_picture++
| + | |
- | openlamellar()
| + | |
- | }
| + | |
- | | + | |
- | document.write("<div class='borderandshadowstyle' style='position:relative;width:"+slideshow_width+"px;height:"+slideshow_height+"px;overflow:hidden'>") | + | |
- | document.write("<span id='whole' style='position:absolute;top:0px;left:0px;width:"+slideshow_width+"px;height:"+slideshow_height+"px;'></span>")
| + | |
- | for (i=0;i<=x_slices;i++) {
| + | |
- | document.write("<span id='s"+i+"' style='position:absolute;top:0px;left:0px;width:"+slideshow_width+"px;height:"+slideshow_height+"px;'></span>")
| + | |
- | document.write("<span id='t"+i+"' style='position:absolute;top:0px;left:0px;width:"+slideshow_width+"px;height:"+slideshow_height+"px;'></span>")
| + | |
- | }
| + | |
- | document.write("</div>")
| + | |
- | document.close()
| + | |
- | window.onload=initiate
| + | |
- | | + | |
- | // - End of JavaScript - -->
| + | |
- | </script> | + | |
- | | + | |
- | <!---------------------------------------------->
| + | |
- | <!-- END OF CODE FOR LAMELLA-SLIDESHOW -->
| + | |
- | <!---------------------------------------------->
| + | |
| | | |
| <br> | | <br> |