Team:British Columbia

From 2011.igem.org

(Difference between revisions)
 
(81 intermediate revisions not shown)
Line 1: Line 1:
{{Template:Template_HD_1}}
{{Template:Template_HD_1}}
-
 
<html>
<html>
<head>
<head>
<Title>UBC iGEM 2011</Title>
<Title>UBC iGEM 2011</Title>
-
</head>
+
<style type="text/css">
 +
#slideshow {width:600px; float:left; background-color: white; margin-left: 8px;  margin-top:10px;}
 +
#links {width:330px;float:right; background-color: white; margin-left: 8px;  margin-top:10px;}
 +
</style>
 +
<div id="slideshow"><center>
<style type="text/css">
<style type="text/css">
-
#slideshow {width:620px; float:left; background-color: #800517; margin-left: 8px; margin-top:10px;}
+
<|--code taken from the 2010 Heidelberg iGEM wiki--|>
-
#links {width:310px;float:right; background-color: white; margin-left: 8px; margin-top:10px;}
+
.nivoSlider {
-
#slideshow-container  { width:512px; height:384px; position:relative; }
+
position:relative;
-
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }
+
}
-
.toc          { position:absolute; left:0; bottom:20px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }
+
.nivoSlider img {
-
.toc-active       { background:#fff; color:#6D84B4; }
+
position:absolute;
-
#next          { position:absolute; bottom:20px; right:20px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }
+
top:0px;
-
#previous        { position:absolute; bottom:20px; right:60px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }
+
left:0px;
-
#slideshow-container-controls { margin:10px 0 0 0; }
+
}
-
  #slideshow-container-controls img { cursor:pointer; width:100px; height:75px; border:1px solid #ccc; float:left; margin:0 1px 0 0; }
+
 
-
#slideshow-container-caption  { height:70px; position:absolute; bottom:0; left:0; right:0; background:#000; z-index:10; overflow:hidden; }
+
.nivoSlider a.nivo-imageLink {
-
  * html #slideshow-container-caption { width:100%; }
+
position:absolute;
-
  #slideshow-container-caption h3 { font-size:24px; font-weight:bold; color:#fff; padding:10px 10px 3px 10px; }
+
top:0px;
-
  #slideshow-container-caption p  { color:#eee; font-size:11px; padding:0 10px 10px 10px; }
+
left:0px;
-
.toc-active        { border-color:#000; }
+
width:100%;
 +
height:100%;
 +
border:0;
 +
padding:0;
 +
margin:0;
 +
z-index:60;
 +
display:none;
 +
}
 +
 
 +
.nivo-slice {
 +
display:block;
 +
position:absolute;
 +
z-index:50;
 +
height:100%;
 +
}
 +
 
 +
 
 +
.nivo-directionNav a {
 +
position:absolute;
 +
top:85%;
 +
z-index:99;
 +
cursor:pointer;
 +
display:block;
 +
width:25px;
 +
height:50px;
 +
border:0;
 +
}
 +
a.nivo-nextNav {
 +
background-position:-25px 0;
 +
right:0px;
 +
}
 +
a.nivo-prevNav {
 +
left:0px;
 +
}
 +
/* Control nav styles (e.g. 1,2,3...) */
 +
.nivo-controlNav a {
 +
position:relative;
 +
z-index:99;
 +
cursor:pointer;
 +
}
 +
.nivo-controlNav a.active {
 +
font-weight:bold;
 +
}
 +
 
 +
#wrapper {
 +
margin:00 auto;
 +
}
 +
 
 +
.nivoSlider {
 +
position:relative;
 +
}
 +
.nivoSlider img {
 +
position:absolute;
 +
display:none;
 +
}
 +
.nivoSlider a {
 +
border:0;
 +
}
 +
 
 +
#content {
 +
margin:0 auto;
 +
}
 +
 
 +
.nivo-directionNav a {
 +
display:block;
 +
width:25px;
 +
height:50px;
 +
background:url(https://static.igem.org/mediawiki/2011/9/9d/Ubcigem2011arrows.png) no-repeat;
 +
text-indent:-9999px;
 +
border:30;
 +
}
 +
a.nivo-nextNav {
 +
background-position:-25px 0;
 +
right:5px;
 +
}
 +
a.nivo-prevNav {
 +
left:5px;
 +
}
 +
 
 +
#slider1 .nivo-controlNav,
 +
#slider2 .nivo-controlNav,
 +
#slider4 .nivo-controlNav {
 +
position:absolute;
 +
left:47%;
 +
bottom:-30px;
 +
}
 +
#slider1 .nivo-controlNav a,
 +
#slider2 .nivo-controlNav a,
 +
#slider4 .nivo-controlNav a {
 +
display:block;
 +
width:10px;
 +
height:10px;
 +
background:url(https://static.igem.org/mediawiki/2010/c/c3/Bullets.png) no-repeat;
 +
text-indent:-9999px;
 +
border:0;
 +
margin-right:3px;
 +
float:left;
 +
}
 +
#slider1 .nivo-controlNav a.active,
 +
#slider2 .nivo-controlNav a.active,
 +
#slider4 .nivo-controlNav a.active {
 +
background-position:-10px 0;
 +
}
 +
 
 +
#slider2 a {
 +
display:block; /* IE Fix */
 +
}
 +
 
 +
#slider {
 +
margin-bottom:110px;
 +
}
 +
#slider .nivo-controlNav {
 +
position:absolute;
 +
left:16.5%;
 +
bottom:-60px;
 +
}
 +
#slider .nivo-controlNav img {
 +
display:inline;
 +
position:relative;
 +
margin-right:10px;
 +
-moz-box-shadow:0px 0px 5px #333;
 +
-webkit-box-shadow:0px 0px 5px #333;
 +
box-shadow:0px 0px 5px #333;
 +
}
 +
#slider .nivo-controlNav a.active img {
 +
-moz-box-shadow:0px 0px 5px #fff;
 +
-webkit-box-shadow:0px 0px 5px #fff;
 +
box-shadow:0px 0px 5px #fff;
 +
}
 +
 
 +
#carbonads-container {
 +
    position:fixed;
 +
    top:10px;
 +
    right:10px;
 +
    background:#15191F;
 +
    padding: 15px;
 +
    -moz-border-radius:5px;
 +
-webkit-border-radius:5px;
 +
border-radius:5px;
 +
}
 +
#carbonads-container .carbonad {
 +
    background:transparent !important;
 +
    border:0 !important;
 +
    width:130px !important;
 +
    height:auto !important;
 +
}
 +
#carbonads-container img,
 +
#carbonads-container span {
 +
    margin:0 0 8px 0 !important;
 +
}
 +
#carbonads-container span.carbonad-text {
 +
    color:#A7B0BF !important;
 +
}
 +
#carbonads-container span.carbonad-text a {
 +
    border:0; !important;
 +
}
 +
#carbonads-container span.carbonad-tag {
 +
    display:block;
 +
    float:none !important;
 +
    margin:0 !important;
 +
    font-style:italic !important;
 +
    text-align:right !important;
 +
    color:#5F6C7F !important;
 +
}
 +
#carbonads-container span.carbonad-tag a {
 +
    color:#5F6C7F !important;
 +
    border:0 !important;
 +
}
 +
 
 +
.clear {
 +
clear:both;
 +
}
 +
 
 +
.pointer {
 +
cursor:pointer;
 +
}
 +
 
 +
 
 +
img {
 +
-ms-interpolation-mode:bicubic;
 +
}
 +
 
 +
 
 +
img.alignright {float:right; margin:0 0 .7em 1em}
 +
img.alignleft {float:left; margin:0 1em .7em 0}
 +
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
 +
a img.alignright {float:right; margin:0 0 .7em 1em}
 +
a img.alignleft {float:left; margin:0 1em .7em 0}
 +
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
 +
 
 +
 
 +
.round5 { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
 +
.round10 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
 +
.round15 { -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; }
 +
.round20 { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; }
 +
.round25 { -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; }
 +
.round30 { -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; }
 +
 
 +
#slider {
 +
position:relative;
 +
margin:20px 0 20px 0;
 +
background:#202834 url(https://static.igem.org/mediawiki/2010/4/42/Loading.gif) no-repeat 50% 50%;
 +
}
 +
#slider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
display:none;
 +
}
 +
#slider a {
 +
border:0;
 +
}
</style>
</style>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 +
<script src="https://static.igem.org/mediawiki/2010/2/28/Sliderpack.txt" type="text/javascript"></script>
 +
<script type="text/javascript">
 +
$(window).load(function() {
 +
$('#slider').nivoSlider({
 +
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
 +
slices:3,
 +
animSpeed:500, //Slide transition speed
 +
pauseTime:8000,
 +
startSlide:0, //Set starting Slide (0 index)
 +
directionNav:true, //Next & Prev
 +
directionNavHide:false, //Only show on hover
 +
controlNav:true, //1,2,3...
 +
controlNavThumbs:true, //Use thumbnails for Control Nav
 +
      controlNavThumbsFromRel:true, //Use image rel for thumbs
 +
keyboardNav:true, //Use left & right arrows
 +
pauseOnHover:true, //Stop animation while hovering
 +
manualAdvance:false, //Force manual transitions
 +
captionOpacity:1, //Universal caption opacity
 +
beforeChange: function(){},
 +
afterChange: function(){},
 +
slideshowEnd: function(){} //Triggers after all slides have been shown
 +
});
 +
});
 +
</script>
 +
</head>
 +
<div id="slider">
 +
        <a href="https://2011.igem.org/Team:British_Columbia/Accomplishments"><img src="https://static.igem.org/mediawiki/2011/0/04/Ubcigemgold2011.jpg" alt="" rel="https://static.igem.org/mediawiki/2011/9/9a/Ubcigem2011slidergold.jpg"/></a>
-
<!--
+
<a href="https://2011.igem.org/Team:British_Columbia"><img src="https://static.igem.org/mediawiki/2011/4/42/Ubcigemlogowelcome.jpg" alt="" rel="https://static.igem.org/mediawiki/2011/d/d9/2011ubcigemhomeslider1.jpg"/></a>
-
<div id="slideshow"><center></br>
+
-
<img src="https://static.igem.org/mediawiki/2011/4/42/Ubcigemlogowelcome.jpg">
+
-
</br><font color=white><b><br/>
+
-
UBC iGEM 2011: iSYNTHASE, Monoterpene Production in Yeast</font></b></center></br></div>
+
-
-->
+
 +
<a href="https://2011.igem.org/Team:British_Columbia/Story"><img src="https://static.igem.org/mediawiki/2011/2/2b/UbcigemhomeSlide1.jpg" alt="" rel="https://static.igem.org/mediawiki/2011/8/83/Ubcigemhomeslider2.jpg"/></a>
 +
 +
<a href="https://2011.igem.org/Team:British_Columbia/Data"><img src="https://static.igem.org/mediawiki/2011/1/15/Ubcigemslide7.jpg" alt="" rel="https://static.igem.org/mediawiki/2011/c/cd/Ubcigemslider7.jpg"/></a>
 +
 +
<a href="https://2011.igem.org/Team:British_Columbia/Modeling"><img src="https://static.igem.org/mediawiki/2011/d/d8/Ubcigemslide4.jpg" alt="" rel="https://static.igem.org/mediawiki/2011/f/f1/Ubcigemslider4.jpg"/></a>
 +
 +
<a href="https://2011.igem.org/Team:British_Columbia/HP"><img src="https://static.igem.org/mediawiki/2011/f/f2/Ubcigemslide3.jpg" alt="" rel="https://static.igem.org/mediawiki/2011/3/36/Ubcigemslider3.jpg"/></a>
 +
 +
<a href="https://2011.igem.org/Team:British_Columbia/Synbioresources"><img src="https://static.igem.org/mediawiki/2011/1/1d/UbcigemSlide2.jpg" alt="" rel="https://static.igem.org/mediawiki/2011/9/97/Ubcigemslide2mini.jpg"/></a>
 +
 +
</div></br></br></br></br></div>
<body>
<body>
-
<div id="links"><center>
+
<div id="links"><center></br>
-
<a href="https://2011.igem.org/Team:British_Columbia/Notebook"><b>Track our weekly progress at our Notebook!</b>
+
-
<br><img src="https://static.igem.org/mediawiki/2011/5/59/Igemubcnotebooklink.jpg"></a>
+
-
<br/><br/>
+
<a href="https://2011.igem.org/Team:British_Columbia/Team"><b>Check out our awesome Team!</b>
<a href="https://2011.igem.org/Team:British_Columbia/Team"><b>Check out our awesome Team!</b>
<br><img src="https://static.igem.org/mediawiki/2011/5/56/Ubcigemteamlink.jpg"></a>
<br><img src="https://static.igem.org/mediawiki/2011/5/56/Ubcigemteamlink.jpg"></a>
-
</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+
<br/><br/>
 +
<a href="https://2011.igem.org/Team:British_Columbia/Notebook"><b>Track our weekly progress at our Notebook!</b>
 +
<br><img src="https://static.igem.org/mediawiki/2011/5/59/Igemubcnotebooklink.jpg"></a>
 +
</br>
-
<div id="slideshow-container">
 
-
  <img src="https://static.igem.org/mediawiki/2011/e/ed/Gurpal.jpg" alt="Gurpal" />
 
-
  <img src="https://static.igem.org/mediawiki/2011/5/50/IrvingDaisy.jpg" alt="Daisy" />
 
-
  <img src="https://static.igem.org/mediawiki/2011/9/9d/Ubcmari.jpg" alt="Mari" />
 
-
  <img src="https://static.igem.org/mediawiki/2011/a/a5/UBCiGEM11_Vicki.jpg" alt="Vicki" />
 
-
  <img src="https://static.igem.org/mediawiki/2011/8/86/UBCjoe.jpg" alt="Joe" />
 
</div>
</div>
-
<center>  
+
 
 +
<center> </br></br>
<table>
<table>
<tr>
<tr>
-
<td><center><a href="http://ubc.ca/"><b>UBC</b><img src="http://www.bccdc.ca/NR/rdonlyres/6699BAAB-9BE7-4135-BEA9-361040822803/45766/UBClogo1.jpg" width=60></a><br></td>
+
<td><center><a href="http://ubc.ca/"><b>UBC</b></a><a href="http://ubc.ca/"><img src="http://www.bccdc.ca/NR/rdonlyres/6699BAAB-9BE7-4135-BEA9-361040822803/45766/UBClogo1.jpg" width=50></a><br></td>
-
<td><center><a href="https://igem.org/Main_Page"><b>iGEM</b><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=100></a><br></td>
+
-
<td><center><a href="https://2011.igem.org/Main_Page"><b>iGEM 2011</b><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=100></a><br></td>
+
-
<td><center><a href="https://2011.igem.org/Community"><b>iGEM Community</b><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=100></a><br></td>
+
-
<td><center><a href="http://partsregistry.org/Main_Page"><b>Parts Registry</b><img src="http://partsregistry.org/wiki/images/e/e0/Montage_70.png" width=82></a><br></td>
+
-
<td><center><a href="http://openwetware.org/wiki/IGEM"><b>OpenWetWare</b><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=100></a><br></td>
+
-
<td><center><a href="http://www.facebook.com/group.php?gid=2217161950"><b>iGEM Facebook</b><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=100></a><br></td>
+
-
<td><center><a href="http://twitter.com/#!/igem"><b>iGEM Twitter</b><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=100></a><br></td>
+
-
<td><center><a href="http://www.ubcigem.com/"><b>UBC iGEM Club</b><img src="http://www.ubcigem.com/wp-content/uploads/2009/09/UBCiGEMLogo-300x285.jpg" width=85></a><br></td>
+
-
</table>
+
-
<script type="text/javascript">
+
<td><center><a href="https://igem.org/Main_Page"><b>iGEM</b></a><a href="https://igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=80></a><br></td>
-
<!--
+
-
window.addEvent('domready',function() {
+
-
  /* settings */
+
-
  var showDuration = 3000;
+
-
  var container = $('slideshow-container');
+
-
  var images = container.getElements('img');
+
-
  var currentIndex = 0;
+
-
  var interval;
+
-
  var toc = [];
+
-
  var tocWidth = 20;
+
-
  var tocActive = 'toc-active';
+
-
/* new: starts the show */
+
<td><center><a href="https://2011.igem.org/Main_Page"><b>iGEM 2011</b></a><a href="https://2011.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=80></a><br></td>
-
  var start = function() { interval = show.periodical(showDuration); };
+
-
  var stop = function() { $clear(interval); };
+
-
  /* opacity and fade */
+
<td><center><a href="https://2011.igem.org/Community"><b>iGEM Community</b></a><a href="https://2011.igem.org/Community"><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=80></a><br></td>
-
  images.each(function(img,i){
+
-
    if(i > 0) {
+
-
      img.set('opacity',0);
+
-
    }
+
-
  });
+
-
  /* worker */
+
<td><center><a href="http://partsregistry.org/Main_Page"><b>Parts Registry</b></a><a href="http://partsregistry.org/Main_Page"><img src="http://partsregistry.org/wiki/images/e/e0/Montage_70.png" width=70></a><br></td>
-
  var show = function(to) {
+
-
    images[currentIndex].fade('out');
+
-
    toc[currentIndex].removeClass(tocActive);
+
-
    images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
+
-
    toc[currentIndex].addClass(tocActive);
+
-
  };
+
-
  /* start once the page is finished loading */
+
<td><center><a href="http://openwetware.org/wiki/IGEM"><b>OpenWetWare</b></a><a href="http://openwetware.org/wiki/IGEM"><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=80></a><br></td>
-
  window.addEvent('load',function(){
+
-
    interval = show.periodical(showDuration);
+
-
  });
+
-
});
+
-
/* new: control: table of contents */
+
-
  images.each(function(img,i){
+
-
    toc.push(new Element('a',{
+
-
      text: i+1,
+
-
      href: '#',
+
-
      'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
+
-
      events: {
+
-
        click: function(e) {
+
-
          if(e) e.stop();
+
-
          stop();
+
-
          show(i);
+
-
        }
+
-
      },
+
-
      styles: {
+
-
        left: ((i + 1) * (tocWidth + 10))
+
-
      }
+
-
    }).inject(container));
+
-
    if(i > 0) { img.set('opacity',0); }
+
-
  });
+
-
 
+
-
  /* new: control: next and previous */
+
-
  var next = new Element('a',{
+
-
    href: '#',
+
-
    id: 'next',
+
-
    text: '>>',
+
-
    events: {
+
-
      click: function(e) {
+
-
        if(e) e.stop();
+
-
        stop(); show();
+
-
      }
+
-
    }
+
-
  }).inject(container);
+
-
  var previous = new Element('a',{
+
-
    href: '#',
+
-
    id: 'previous',
+
-
    text: '<<',
+
-
    events: {
+
-
      click: function(e) {
+
-
        if(e) e.stop();
+
-
        stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
+
-
      }
+
-
    }
+
-
  }).inject(container);
+
-
 
+
-
  /* new: control: start/stop on mouseover/mouseout */
+
-
  container.addEvents({
+
-
    mouseenter: function() { stop(); },
+
-
    mouseleave: function() { start(); }
+
-
  });
+
-
 
+
-
  /* start once the page is finished loading */
+
-
  window.addEvent('load',function(){
+
-
    start();
+
-
  });
+
-
});
+
-
var SimpleSlideshow = new Class({
+
<td><center><a href="http://www.facebook.com/group.php?gid=2217161950"><b>iGEM Facebook</b></a><a href="http://www.facebook.com/group.php?gid=2217161950"><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=80></a><br></td>
-
  options: {
+
-
    showControls: true,
+
-
    showDuration: 3000,
+
-
    showTOC: true,
+
-
    tocWidth: 20,
+
-
    tocClass: 'toc',
+
-
    tocActiveClass: 'toc-active'
+
-
  },
+
-
  Implements: [Options,Events],
+
-
  initialize: function(container,elements,options) {
+
-
    //settings
+
-
    this.container = $(container);
+
-
    this.elements = $$(elements);
+
-
    this.currentIndex = 0;
+
-
    this.interval = '';
+
-
    if(this.options.showTOC) this.toc = [];
+
-
   
+
-
    //assign
+
-
    this.elements.each(function(el,i){
+
-
      if(this.options.showTOC) {
+
-
        this.toc.push(new Element('a',{
+
-
          text: i+1,
+
-
          href: '#',
+
-
          'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
+
-
          events: {
+
-
            click: function(e) {
+
-
              if(e) e.stop();
+
-
              this.stop();
+
-
              this.show(i);
+
-
            }.bind(this)
+
-
          },
+
-
          styles: {
+
-
            left: ((i + 1) * (this.options.tocWidth + 10))
+
-
          }
+
-
        }).inject(this.container));
+
-
      }
+
-
      if(i > 0) el.set('opacity',0);
+
-
    },this);
+
-
   
+
-
    //next,previous links
+
-
    if(this.options.showControls) {
+
-
      this.createControls();
+
-
     
+
-
    }
+
-
    //events
+
-
    this.container.addEvents({
+
-
      mouseenter: function() { this.stop(); }.bind(this),
+
-
      mouseleave: function() { this.start(); }.bind(this)
+
-
    });
+
-
  },
+
<td><center><a href="http://twitter.com/#!/igem"><b>iGEM Twitter</b></a><a href="http://twitter.com/#!/igem"><img src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png" width=80></a><br></td>
-
  show: function(to) {
+
-
    this.elements[this.currentIndex].fade('out');
+
-
    if(this.options.showTOC) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
+
-
    this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))].fade('in');
+
-
    if(this.options.showTOC) this.toc[this.currentIndex].addClass(this.options.tocActiveClass);
+
-
  },
+
-
  start: function() {
+
-
    this.interval = this.show.bind(this).periodical(this.options.showDuration);
+
-
  },
+
-
  stop: function() {
+
-
    $clear(this.interval);
+
-
  },
+
-
  //"private"
+
-
  createControls: function() {
+
-
    var next = new Element('a',{
+
-
      href: '#',
+
-
      id: 'next',
+
-
      text: '>>',
+
-
      events: {
+
-
        click: function(e) {
+
-
          if(e) e.stop();
+
-
          this.stop();
+
-
          this.show();
+
-
        }.bind(this)
+
-
      }
+
-
    }).inject(this.container);
+
-
    var previous = new Element('a',{
+
-
      href: '#',
+
-
      id: 'previous',
+
-
      text: '<<',
+
-
      events: {
+
-
        click: function(e) {
+
-
          if(e) e.stop();
+
-
          this.stop();
+
-
          this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
+
-
        }.bind(this)
+
-
      }
+
-
    }).inject(this.container);
+
-
  }
+
-
});
+
-
/* usage */
+
<td><center><a href="http://www.ubcigem.com/"><b>UBC iGEM Club</b></a><a href="http://www.ubcigem.com/"><img src="http://www.ubcigem.com/wp-content/uploads/2009/09/UBCiGEMLogo-300x285.jpg" width=70></a><br></td>
-
window.addEvent('domready',function() {
+
</table>
-
  var slideshow = new SimpleSlideshow('slideshow-container','#slideshow-container img');
+
-
  slideshow.start(); 
+
-
});
+
-
-->
+
-
window.addEvent('domready',function() {
+
</br><b>
-
  /* settings */
+
Contact us at ubcigem(at)gmail.com!
-
  var showDuration = 5000;
+
-
  var container = $('slideshow-container');
+
-
  var images = container.getElements('img');
+
-
  var currentIndex = 0;
+
-
  var interval;
+
-
  var toc = [];
+
-
  var tocActive = 'toc-active';
+
-
  var thumbOpacity = 0.7;
+
-
 
+
-
  /* new: create caption area */
+
-
  var captionDIV = new Element('div',{
+
-
    id: 'slideshow-container-caption',
+
-
    styles: {
+
-
      //display:none,
+
-
      opacity: thumbOpacity
+
-
    }
+
-
  }).inject(container);
+
-
  var captionHeight = captionDIV.getSize().y;
+
-
  captionDIV.setStyle('height',0);
+
-
 
+
-
  /* new: starts the show */
+
-
  var start = function() { interval = show.periodical(showDuration); };
+
-
  var stop = function() { $clear(interval); };
+
-
  /* worker */
+
-
  var show = function(to) {
+
-
    images[currentIndex].fade('out');
+
-
    toc[currentIndex].removeClass(tocActive).fade(thumbOpacity);
+
-
    images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
+
-
    toc[currentIndex].addClass(tocActive).fade(1);
+
-
    captionDIV.set('tween',{
+
-
      onComplete: function() {
+
-
        captionDIV.set('tween',{
+
-
          onComplete: $empty
+
-
        }).tween('height',captionHeight);
+
-
        /* parse caption */
+
-
        var title = '';
+
-
        var captionText = '';
+
-
        if(images[currentIndex].get('alt')) {
+
-
          cap = images[currentIndex].get('alt').split('::');
+
-
          title = cap[0];
+
-
          captionText = cap[1];
+
-
          captionDIV.set('html','<h3>' + title + '</h3>' + (captionText ? '<p>' + captionText + '</p>' : ''));
+
-
        }
+
-
      }
+
-
    }).tween('height',0);
+
-
  };
+
-
 
+
-
  /* new: create preview area */
+
-
  var preview = new Element('div',{
+
-
    id: 'slideshow-container-controls'
+
-
  }).inject(container,'after');
+
-
 
+
-
  /* new: control: table of contents */
+
-
  images.each(function(img,i){
+
-
    /* add to table of contents */
+
-
    toc.push(new Element('img',{
+
-
      src: img.get('src'),
+
-
      title: img.get('alt'),
+
-
      styles: {
+
-
        opacity: thumbOpacity
+
-
      },
+
-
      events: {
+
-
        click: function(e) {
+
-
          if(e) e.stop();
+
-
          stop();
+
-
          show(i);
+
-
          start();
+
-
        },
+
-
        mouseenter: function() {
+
-
          this.fade(1);
+
-
        },
+
-
        mouseleave: function() {
+
-
          if(!this.hasClass(tocActive)) this.fade(thumbOpacity);
+
-
        }
+
-
      } 
+
-
    }).inject(preview));
+
-
    if(i > 0) { img.set('opacity',0); }
+
-
   
+
-
  });
+
-
 
+
-
  /* control: start/stop on mouseover/mouseout */
+
-
  container.addEvents({
+
-
    mouseenter: function() { stop(); },
+
-
    mouseleave: function() { start(); }
+
-
  });
+
-
 
+
-
  /* start once the page is finished loading */
+
-
  window.addEvent('load',function(){ show(0); start(); });
+
-
});
+
-
 
+
-
</script>
+
</body>
</body>
 +
 +
 +
</html>
</html>

Latest revision as of 19:57, 17 October 2011

Team: British Columbia - 2011.igem.org

UBC iGEM 2011






UBC
iGEM
iGEM 2011
iGEM Community
Parts Registry
OpenWetWare
iGEM Facebook
iGEM Twitter
UBC iGEM Club

Contact us at ubcigem(at)gmail.com!

Retrieved from "http://2011.igem.org/Team:British_Columbia"