Team:British Columbia

From 2011.igem.org

(Difference between revisions)
Line 6: Line 6:
</head>
</head>
-
<style>
+
<style type="text/css">
#slideshow {width:620px; float:left; background-color: #800517; margin-left: 8px;  margin-top:10px;}
#slideshow {width:620px; float:left; background-color: #800517; margin-left: 8px;  margin-top:10px;}
-
#links {width:310px;float:left; background-color: white; margin-left: 8px;  margin-top:10px;}
+
#links {width:310px;float:right; background-color: white; margin-left: 8px;  margin-top:10px;}
 +
#slideshow-container  { width:512px; height:384px; 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; }
 +
.toc-active        { background:#fff; color:#6D84B4; }
 +
#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; }
 +
#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; }
 +
#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; }
 +
  * html #slideshow-container-caption { width:100%; }
 +
  #slideshow-container-caption h3 { font-size:24px; font-weight:bold; color:#fff; padding:10px 10px 3px 10px; }
 +
  #slideshow-container-caption p  { color:#eee; font-size:11px; padding:0 10px 10px 10px; }
 +
.toc-active        { border-color:#000; }
</style>
</style>
 +
<!--
<div id="slideshow"><center></br>
<div id="slideshow"><center></br>
<img src="https://static.igem.org/mediawiki/2011/4/42/Ubcigemlogowelcome.jpg">
<img src="https://static.igem.org/mediawiki/2011/4/42/Ubcigemlogowelcome.jpg">
</br><font color=white><b><br/>
</br><font color=white><b><br/>
UBC iGEM 2011: iSYNTHASE, Monoterpene Production in Yeast</font></b></center></br></div>
UBC iGEM 2011: iSYNTHASE, Monoterpene Production in Yeast</font></b></center></br></div>
 +
-->
 +
<body>
<div id="links"><center>
<div id="links"><center>
<a href="https://2011.igem.org/Team:British_Columbia/Notebook"><b>Track our weekly progress at our Notebook!</b>
<a href="https://2011.igem.org/Team:British_Columbia/Notebook"><b>Track our weekly progress at our Notebook!</b>
Line 24: Line 40:
</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/>
</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/>
 +
<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>
<center>  
<center>  
<table>
<table>
Line 37: Line 60:
<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>
<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>
</table>
 +
 +
<script type="text/javascript">
 +
<!--
 +
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 */
 +
  var start = function() { interval = show.periodical(showDuration); };
 +
  var stop = function() { $clear(interval); };
 +
 +
  /* opacity and fade */
 +
  images.each(function(img,i){
 +
    if(i > 0) {
 +
      img.set('opacity',0);
 +
    }
 +
  });
 +
 +
  /* worker */
 +
  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 */
 +
  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({
 +
  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)
 +
    });
 +
 +
  },
 +
  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 */
 +
window.addEvent('domready',function() {
 +
  var slideshow = new SimpleSlideshow('slideshow-container','#slideshow-container img');
 +
  slideshow.start(); 
 +
});
 +
-->
 +
 +
window.addEvent('domready',function() {
 +
  /* settings */
 +
  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>
</html>
</html>

Revision as of 06:59, 15 August 2011

Team: British Columbia - 2011.igem.org

UBC iGEM 2011

































Gurpal Daisy Mari Vicki Joe
UBC
iGEM
iGEM 2011
iGEM Community
Parts Registry
OpenWetWare
iGEM Facebook
iGEM Twitter
UBC iGEM Club

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