|
|
| Line 9: |
Line 9: |
| | #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:right; 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> | | <body> |
| Line 60: |
Line 46: |
| | <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> | | </body> |
| | </html> | | </html> |
"
