Template:Team:Copenhagen2012

From 2012.igem.org

(Difference between revisions)
(Created page with "<html> - →-- Borrowed from iGEM:Team Berkeley 2011 --: <script type="text/javascript"> /* * Slides, A Slideshow Plugin for jQuery * Intructions: http://slidesjs.com * By: Nat...")
 
(2 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
//Random Transitions Slideshow- By JavaScript Kit (http://www.javascriptkit.com)
 +
//Created: Nov 3rd, 2008
-
/*-- Borrowed from iGEM:Team Berkeley 2011 --*/
+
var global_transitions=[ //array of IE transition strings
 +
"progid:DXImageTransform.Microsoft.Barn()",
 +
"progid:DXImageTransform.Microsoft.Blinds()",
 +
"progid:DXImageTransform.Microsoft.CheckerBoard()",
 +
"progid:DXImageTransform.Microsoft.Fade()",
 +
"progid:DXImageTransform.Microsoft.GradientWipe()",
 +
"progid:DXImageTransform.Microsoft.Inset()",
 +
"progid:DXImageTransform.Microsoft.Iris()",
 +
"progid:DXImageTransform.Microsoft.Pixelate(maxSquare=15)",
 +
"progid:DXImageTransform.Microsoft.RadialWipe()",
 +
"progid:DXImageTransform.Microsoft.RandomBars()",
 +
"progid:DXImageTransform.Microsoft.RandomDissolve()",
 +
"progid:DXImageTransform.Microsoft.Slide()",
 +
"progid:DXImageTransform.Microsoft.Spiral()",
 +
"progid:DXImageTransform.Microsoft.Stretch()",
 +
"progid:DXImageTransform.Microsoft.Strips()",
 +
"progid:DXImageTransform.Microsoft.Wheel()",
 +
"progid:DXImageTransform.Microsoft.Zigzag()"
 +
]
-
<script type="text/javascript">
+
function flashyslideshow(setting){
 +
this.wrapperid=setting.wrapperid
 +
this.imagearray=setting.imagearray
 +
this.pause=setting.pause
 +
this.transduration=setting.transduration/1000 //convert from miliseconds to seconds unit to pass into el.filters.play()
 +
this.currentimg=0
 +
var preloadimages=[] //temp array to preload images
 +
for (var i=0; i<this.imagearray.length; i++){
 +
preloadimages[i]=new Image()
 +
preloadimages[i].src=this.imagearray[i][0]
 +
}
 +
document.write('<div id="'+this.wrapperid+'" class="'+setting.wrapperclass+'"><div id="'+this.wrapperid+'_inner" style="width:100%">'+this.getSlideHTML(this.currentimg)+'</div></div>')
 +
var effectindex=Math.floor(Math.random()*global_transitions.length) //randomly pick a transition to utilize
 +
var contentdiv=document.getElementById(this.wrapperid+"_inner")
 +
if (contentdiv.filters){ //if the filters[] collection is defined on element (only in IE)
 +
contentdiv.style.filter=global_transitions[effectindex] //define transition on element
 +
this.pause+=setting.transduration //add transition time to pause
 +
}
 +
this.filtersupport=(contentdiv.filters && contentdiv.filters.length>0)? true : false //test if element supports transitions and has one defined
 +
var slideshow=this
 +
flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=1}, "mouseover")
 +
flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=0}, "mouseout")
 +
setInterval(function(){slideshow.rotate()}, this.pause)
 +
}
 +
flashyslideshow.addEvent=function(target, functionref, tasktype){
 +
if (target.addEventListener)
 +
target.addEventListener(tasktype, functionref, false);
 +
else if (target.attachEvent)
 +
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
 +
},
 +
flashyslideshow.setopacity=function(el, degree){ //sets opacity of an element (FF and non IE browsers only)
 +
if (typeof el.style.opacity!="undefined")
 +
el.style.opacity=degree
 +
else
 +
el.style.MozOpacity=degree
 +
el.currentopacity=degree
 +
},
 +
 +
flashyslideshow.prototype.getSlideHTML=function(index){
 +
var slideHTML=(this.imagearray[index][1])? '<a href="'+this.imagearray[index][1]+'" target="'+this.imagearray[index][2]+'">\n' : '' //hyperlink slide?
 +
slideHTML+='<img src="'+this.imagearray[index][0]+'" />'
 +
slideHTML+=(this.imagearray[index][1])? '</a><br />' : '<br />'
 +
slideHTML+=(this.imagearray[index][3])? this.imagearray[index][3] : '' //text description?
 +
return slideHTML //return HTML for the slide at the specified index
 +
}
 +
 +
flashyslideshow.prototype.rotate=function(){
 +
var contentdiv=document.getElementById(this.wrapperid+"_inner")
 +
if (this.isMouseover){ //if mouse is over slideshow
 +
return
 +
}
 +
this.currentimg=(this.currentimg<this.imagearray.length-1)? this.currentimg+1 : 0
 +
if (this.filtersupport){
 +
contentdiv.filters[0].apply()
 +
}
 +
else{
 +
flashyslideshow.setopacity(contentdiv, 0)
 +
}
 +
contentdiv.innerHTML=this.getSlideHTML(this.currentimg)
 +
if (this.filtersupport){
 +
contentdiv.filters[0].play(this.transduration)
 +
}
 +
else{
 +
contentdiv.fadetimer=setInterval(function(){
 +
if (contentdiv.currentopacity<1)
 +
flashyslideshow.setopacity(contentdiv, contentdiv.currentopacity+0.1)
 +
else
 +
clearInterval(contentdiv.fadetimer)
 +
}, 50) //end setInterval
 +
}
 +
}
 +
 +
 +
///Sample call on your page
/*
/*
-
* Slides, A Slideshow Plugin for jQuery
+
var flashyshow=new flashyslideshow({ //create instance of slideshow
-
* Intructions: http://slidesjs.com
+
wrapperid: "myslideshow", //unique ID for this slideshow
-
* By: Nathan Searles, http://nathansearles.com
+
wrapperclass: "flashclass", //desired CSS class for this slideshow
-
* Version: 1.1.8
+
imagearray: [
-
* Updated: June 1st, 2011
+
["summer.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."],
-
*
+
["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],
-
* Licensed under the Apache License, Version 2.0 (the "License");
+
["spring.jpg", "", "", "Flowers spring back to life in Spring."],
-
* you may not use this file except in compliance with the License.
+
["autumn.jpg", "", "", "Ah the cool breeze of autumn."]
-
* You may obtain a copy of the License at
+
],
-
*
+
pause: 2000, //pause between slides (milliseconds)
-
* http://www.apache.org/licenses/LICENSE-2.0
+
transduration: 1000 //transition duration (milliseconds)
-
*
+
})
-
* Unless required by applicable law or agreed to in writing, software
+
-
* distributed under the License is distributed on an "AS IS" BASIS,
+
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
-
* See the License for the specific language governing permissions and
+
-
* limitations under the License.
+
*/
*/
-
(function(A){A.fn.slides=function(B){B=A.extend({},A.fn.slides.option,B);return this.each(function(){A("."+B.container,A(this)).children().wrapAll('<div class="slides_control"/>');var V=A(this),J=A(".slides_control",V),Z=J.children().size(),Q=J.children().outerWidth(),M=J.children().outerHeight(),D=B.start-1,L=B.effect.indexOf(",")<0?B.effect:B.effect.replace(" ","").split(",")[0],S=B.effect.indexOf(",")<0?L:B.effect.replace(" ","").split(",")[1],O=0,N=0,C=0,P=0,U,H,I,X,W,T,K,F;function E(c,b,a){if(!H&&U){H=true;B.animationStart(P+1);switch(c){case"next":N=P;O=P+1;O=Z===O?0:O;X=Q*2;c=-Q*2;P=O;break;case"prev":N=P;O=P-1;O=O===-1?Z-1:O;X=0;c=0;P=O;break;case"pagination":O=parseInt(a,10);N=A("."+B.paginationClass+" li."+B.currentClass+" a",V).attr("href").match("[^#/]+$");if(O>N){X=Q*2;c=-Q*2;}else{X=0;c=0;}P=O;break;}if(b==="fade"){if(B.crossfade){J.children(":eq("+O+")",V).css({zIndex:10}).fadeIn(B.fadeSpeed,B.fadeEasing,function(){if(B.autoHeight){J.animate({height:J.children(":eq("+O+")",V).outerHeight()},B.autoHeightSpeed,function(){J.children(":eq("+N+")",V).css({display:"none",zIndex:0});J.children(":eq("+O+")",V).css({zIndex:0});B.animationComplete(O+1);H=false;});}else{J.children(":eq("+N+")",V).css({display:"none",zIndex:0});J.children(":eq("+O+")",V).css({zIndex:0});B.animationComplete(O+1);H=false;}});}else{J.children(":eq("+N+")",V).fadeOut(B.fadeSpeed,B.fadeEasing,function(){if(B.autoHeight){J.animate({height:J.children(":eq("+O+")",V).outerHeight()},B.autoHeightSpeed,function(){J.children(":eq("+O+")",V).fadeIn(B.fadeSpeed,B.fadeEasing);});}else{J.children(":eq("+O+")",V).fadeIn(B.fadeSpeed,B.fadeEasing,function(){if(A.browser.msie){A(this).get(0).style.removeAttribute("filter");}});}B.animationComplete(O+1);H=false;});}}else{J.children(":eq("+O+")").css({left:X,display:"block"});if(B.autoHeight){J.animate({left:c,height:J.children(":eq("+O+")").outerHeight()},B.slideSpeed,B.slideEasing,function(){J.css({left:-Q});J.children(":eq("+O+")").css({left:Q,zIndex:5});J.children(":eq("+N+")").css({left:Q,display:"none",zIndex:0});B.animationComplete(O+1);H=false;});}else{J.animate({left:c},B.slideSpeed,B.slideEasing,function(){J.css({left:-Q});J.children(":eq("+O+")").css({left:Q,zIndex:5});J.children(":eq("+N+")").css({left:Q,display:"none",zIndex:0});B.animationComplete(O+1);H=false;});}}if(B.pagination){A("."+B.paginationClass+" li."+B.currentClass,V).removeClass(B.currentClass);A("."+B.paginationClass+" li:eq("+O+")",V).addClass(B.currentClass);}}}function R(){clearInterval(V.data("interval"));}function G(){if(B.pause){clearTimeout(V.data("pause"));clearInterval(V.data("interval"));K=setTimeout(function(){clearTimeout(V.data("pause"));F=setInterval(function(){E("next",L);},B.play);V.data("interval",F);},B.pause);V.data("pause",K);}else{R();}}if(Z<2){return ;}if(D<0){D=0;}if(D>Z){D=Z-1;}if(B.start){P=D;}if(B.randomize){J.randomize();}A("."+B.container,V).css({overflow:"hidden",position:"relative"});J.children().css({position:"absolute",top:0,left:J.children().outerWidth(),zIndex:0,display:"none"});J.css({position:"relative",width:(Q*3),height:M,left:-Q});A("."+B.container,V).css({display:"block"});if(B.autoHeight){J.children().css({height:"auto"});J.animate({height:J.children(":eq("+D+")").outerHeight()},B.autoHeightSpeed);}if(B.preload&&J.find("img:eq("+D+")").length){A("."+B.container,V).css({background:"url("+B.preloadImage+") no-repeat 50% 50%"});var Y=J.find("img:eq("+D+")").attr("src")+"?"+(new Date()).getTime();if(A("img",V).parent().attr("class")!="slides_control"){T=J.children(":eq(0)")[0].tagName.toLowerCase();}else{T=J.find("img:eq("+D+")");}J.find("img:eq("+D+")").attr("src",Y).load(function(){J.find(T+":eq("+D+")").fadeIn(B.fadeSpeed,B.fadeEasing,function(){A(this).css({zIndex:5});A("."+B.container,V).css({background:""});U=true;B.slidesLoaded();});});}else{J.children(":eq("+D+")").fadeIn(B.fadeSpeed,B.fadeEasing,function(){U=true;B.slidesLoaded();});}if(B.bigTarget){J.children().css({cursor:"pointer"});J.children().click(function(){E("next",L);return false;});}if(B.hoverPause&&B.play){J.bind("mouseover",function(){R();});J.bind("mouseleave",function(){G();});}if(B.generateNextPrev){A("."+B.container,V).after('<a href="#" class="'+B.prev+'">Prev</a>');A("."+B.prev,V).after('<a href="#" class="'+B.next+'">Next</a>');}A("."+B.next,V).click(function(a){a.preventDefault();if(B.play){G();}E("next",L);});A("."+B.prev,V).click(function(a){a.preventDefault();if(B.play){G();}E("prev",L);});if(B.generatePagination){if(B.prependPagination){V.prepend("<ul class="+B.paginationClass+"></ul>");}else{V.append("<ul class="+B.paginationClass+"></ul>");}J.children().each(function(){A("."+B.paginationClass,V).append('<li><a href="#'+C+'">'+(C+1)+"</a></li>");C++;});}else{A("."+B.paginationClass+" li a",V).each(function(){A(this).attr("href","#"+C);C++;});}A("."+B.paginationClass+" li:eq("+D+")",V).addClass(B.currentClass);A("."+B.paginationClass+" li a",V).click(function(){if(B.play){G();}I=A(this).attr("href").match("[^#/]+$");if(P!=I){E("pagination",S,I);}return false;});A("a.link",V).click(function(){if(B.play){G();}I=A(this).attr("href").match("[^#/]+$")-1;if(P!=I){E("pagination",S,I);}return false;});if(B.play){F=setInterval(function(){E("next",L);},B.play);V.data("interval",F);}});};A.fn.slides.option={preload:false,preloadImage:"/img/loading.gif",container:"slides_container",generateNextPrev:false,next:"next",prev:"prev",pagination:true,generatePagination:true,prependPagination:false,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed:350,slideEasing:"",start:1,effect:"slide",crossfade:false,randomize:false,play:0,pause:0,hoverPause:false,autoHeight:false,autoHeightSpeed:350,bigTarget:false,animationStart:function(){},animationComplete:function(){},slidesLoaded:function(){}};A.fn.randomize=function(C){function B(){return(Math.round(Math.random())-0.5);}return(A(this).each(function(){var F=A(this);var E=F.children();var D=E.length;if(D>1){E.hide();var G=[];for(i=0;i<D;i++){G[G.length]=i;}G=G.sort(B);A.each(G,function(I,H){var K=E.eq(H);var J=K.clone(true);J.show().appendTo(F);if(C!==undefined){C(K,J);}K.remove();});}}));};})(jQuery);
 
-
 
-
</script>
 
-
</html>
 

Latest revision as of 14:58, 30 July 2012

//Random Transitions Slideshow- By JavaScript Kit (http://www.javascriptkit.com) //Created: Nov 3rd, 2008

var global_transitions=[ //array of IE transition strings "progid:DXImageTransform.Microsoft.Barn()", "progid:DXImageTransform.Microsoft.Blinds()", "progid:DXImageTransform.Microsoft.CheckerBoard()", "progid:DXImageTransform.Microsoft.Fade()", "progid:DXImageTransform.Microsoft.GradientWipe()", "progid:DXImageTransform.Microsoft.Inset()", "progid:DXImageTransform.Microsoft.Iris()", "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=15)", "progid:DXImageTransform.Microsoft.RadialWipe()", "progid:DXImageTransform.Microsoft.RandomBars()", "progid:DXImageTransform.Microsoft.RandomDissolve()", "progid:DXImageTransform.Microsoft.Slide()", "progid:DXImageTransform.Microsoft.Spiral()", "progid:DXImageTransform.Microsoft.Stretch()", "progid:DXImageTransform.Microsoft.Strips()", "progid:DXImageTransform.Microsoft.Wheel()", "progid:DXImageTransform.Microsoft.Zigzag()" ]

function flashyslideshow(setting){ this.wrapperid=setting.wrapperid this.imagearray=setting.imagearray this.pause=setting.pause this.transduration=setting.transduration/1000 //convert from miliseconds to seconds unit to pass into el.filters.play() this.currentimg=0 var preloadimages=[] //temp array to preload images for (var i=0; i<this.imagearray.length; i++){ preloadimages[i]=new Image() preloadimages[i].src=this.imagearray[i][0] }

document.write('
'+this.getSlideHTML(this.currentimg)+'
')

var effectindex=Math.floor(Math.random()*global_transitions.length) //randomly pick a transition to utilize var contentdiv=document.getElementById(this.wrapperid+"_inner") if (contentdiv.filters){ //if the filters[] collection is defined on element (only in IE) contentdiv.style.filter=global_transitions[effectindex] //define transition on element this.pause+=setting.transduration //add transition time to pause } this.filtersupport=(contentdiv.filters && contentdiv.filters.length>0)? true : false //test if element supports transitions and has one defined var slideshow=this flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=1}, "mouseover") flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=0}, "mouseout") setInterval(function(){slideshow.rotate()}, this.pause) }

flashyslideshow.addEvent=function(target, functionref, tasktype){ if (target.addEventListener) target.addEventListener(tasktype, functionref, false); else if (target.attachEvent) target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)}); },

flashyslideshow.setopacity=function(el, degree){ //sets opacity of an element (FF and non IE browsers only) if (typeof el.style.opacity!="undefined") el.style.opacity=degree else el.style.MozOpacity=degree el.currentopacity=degree },

flashyslideshow.prototype.getSlideHTML=function(index){ var slideHTML=(this.imagearray[index][1])? '<a href="'+this.imagearray[index][1]+'" target="'+this.imagearray[index][2]+'">\n' : //hyperlink slide? slideHTML+='<img src="'+this.imagearray[index][0]+'" />' slideHTML+=(this.imagearray[index][1])? '</a>
' : '
' slideHTML+=(this.imagearray[index][3])? this.imagearray[index][3] : //text description? return slideHTML //return HTML for the slide at the specified index }

flashyslideshow.prototype.rotate=function(){ var contentdiv=document.getElementById(this.wrapperid+"_inner") if (this.isMouseover){ //if mouse is over slideshow return } this.currentimg=(this.currentimg<this.imagearray.length-1)? this.currentimg+1 : 0 if (this.filtersupport){ contentdiv.filters[0].apply() } else{ flashyslideshow.setopacity(contentdiv, 0) } contentdiv.innerHTML=this.getSlideHTML(this.currentimg) if (this.filtersupport){ contentdiv.filters[0].play(this.transduration) } else{ contentdiv.fadetimer=setInterval(function(){ if (contentdiv.currentopacity<1) flashyslideshow.setopacity(contentdiv, contentdiv.currentopacity+0.1) else clearInterval(contentdiv.fadetimer) }, 50) //end setInterval } }


///Sample call on your page /* var flashyshow=new flashyslideshow({ //create instance of slideshow wrapperid: "myslideshow", //unique ID for this slideshow wrapperclass: "flashclass", //desired CSS class for this slideshow imagearray: [ ["summer.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."], ["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"], ["spring.jpg", "", "", "Flowers spring back to life in Spring."], ["autumn.jpg", "", "", "Ah the cool breeze of autumn."] ], pause: 2000, //pause between slides (milliseconds) transduration: 1000 //transition duration (milliseconds) })

  • /
Retrieved from "http://2012.igem.org/Template:Team:Copenhagen2012"