Team:UNAM Genomics Mexico/Results/NOT

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Template:Team:UNAM_Genomics_Mexico/webhtml| content=
{{:Template:Team:UNAM_Genomics_Mexico/webhtml| content=
-
<html>
+
 
 +
<!DOCTYPE html>
 +
<html lang="en">
     <head>
     <head>
-
<style type="text/css">
+
        <title>UNAM Genomcs mexico </title>
-
*{
+
   
-
margin:0;
+
-
padding:0;
+
-
}
+
-
body{
+
-
font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
+
-
font-size:14px;
+
-
overflow-x:hidden;
+
-
}
+
-
a{
+
-
color:#555;
+
-
text-decoration:none;
+
-
}
+
-
a:hover{
+
-
color:#222;
+
-
}
+
-
p{
+
-
padding:5px 0px;
+
-
}
+
-
.clear{
+
-
clear:both;
+
-
}
+
-
/* Slider Style */
+
-
.pxs_container{
+
-
width:100%;
+
-
height:840px;
+
-
position:relative;
+
-
border-top:7px solid #333;
+
-
border-bottom:7px solid #333;
+
-
overflow:hidden;
+
-
-moz-box-shadow:0px 0px 7px #000;
+
-
-webkit-box-shadow:0px 0px 7px #000;
+
-
box-shadow:0px 0px 7px #000;
+
-
}
+
-
.pxs_bg{
+
-
background:transparent url(https://static.igem.org/mediawiki/2012/e/e5/UNAM-Genomics_Mexico_Bg.png) repeat top left;
+
-
}
+
-
.pxs_bg div{
+
-
position:absolute;
+
-
top:0px;
+
-
left:0px;
+
-
width:1000px; /*1264px window width times number of images*/
+
-
height:840px;
+
-
background-repeat:repeat;
+
-
background-position:top left;
+
-
background-color:transparent;
+
-
}
+
-
.pxs_bg .pxs_bg1{
+
-
background-image:url(https://static.igem.org/mediawiki/2012/e/e6/UNAM-Genomics_Mexico_Bg1.png);
+
-
/*left negative 1/8 of ww*/
+
-
}
+
-
.pxs_bg .pxs_bg2{
+
-
background-image:url(https://static.igem.org/mediawiki/2012/7/7a/UNAM-Genomics_Mexico_Bg2.png);
+
-
/*left negative 1/4 of ww*/
+
-
}
+
-
.pxs_bg .pxs_bg3{
+
-
background-image:url(https://static.igem.org/mediawiki/2012/f/fb/UNAM-Genomics_Mexico_Bg3.png);
+
-
/*left negative 1/2 of ww*/
+
-
}
+
-
.pxs_slider_wrapper{
+
-
display:none;
+
-
}
+
-
.pxs_container ul{
+
-
margin:0px;
+
-
padding:0px;
+
-
list-style:none;
+
-
}
+
-
ul.pxs_slider{
+
-
position:absolute;
+
-
left:0px;
+
-
top:0px;
+
-
height:840px;
+
-
}
+
-
ul.pxs_slider li{
+
-
height:840px;
+
-
float:left;
+
-
position:relative;
+
-
}
+
-
ul.pxs_slider li img{
+
-
display:block;
+
-
margin:35px auto 0px auto;
+
-
-moz-box-shadow:0px 0px 7px #222;
+
-
-webkit-box-shadow:0px 0px 7px #222;
+
-
box-shadow:0px 0px 7px #222;
+
-
border: 8px solid transparent;
+
-
-moz-border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
border-radius:4px;
+
-
}
+
-
ul.pxs_thumbnails{
+
-
height:35px;
+
-
position:absolute;
+
-
top:560px;
+
-
left:50%;
+
-
}
+
-
ul.pxs_thumbnails li{
+
-
position:absolute;
+
-
display:block;
+
-
}
+
-
ul.pxs_thumbnails li img{
+
-
border: 5px solid #FFFFFF;
+
-
-moz-box-shadow:1px 1px 7px #555;
+
-
-webkit-box-shadow:1px 1px 7px #555;
+
-
box-shadow:1px 1px 7px #555;
+
-
cursor:pointer;
+
-
display:block;
+
-
opacity:0.7;
+
-
}
+
-
ul.pxs_thumbnails li.selected img{
+
-
opacity:1.0;
+
-
}
+
-
.pxs_navigation span{
+
-
position:absolute;
+
-
width:30px;
+
-
height:60px;
+
-
-moz-box-shadow:0px 0px 2px #000;
+
-
-webkit-box-shadow:0px 0px 2px #000;
+
-
box-shadow:0px 0px 2px #000;
+
-
top:145px;
+
-
opacity:0.6;
+
-
-moz-border-radius:4px;
+
-
-webkit-border-radius:4px;
+
-
border-radius:4px;
+
-
cursor:pointer;
+
-
}
+
-
.pxs_navigation span:hover{
+
-
opacity:0.9;
+
-
}
+
-
.pxs_navigation span.pxs_prev{
+
-
background:#000 url(https://static.igem.org/mediawiki/2012/3/3b/UNAM-Genomics_Mexico_Prev.png) no-repeat center center;
+
-
}
+
-
.pxs_navigation span.pxs_next{
+
-
background:#000 url(https://static.igem.org/mediawiki/2012/9/94/UNAM-Genomics_Mexico_Next.png) no-repeat center center;
+
-
}
+
-
.pxs_loading{
+
-
color:#fff;
+
-
font-size:20px;
+
-
padding:15px 15px 15px 50px;
+
-
position:absolute;
+
-
background:#333 url(https://static.igem.org/mediawiki/2012/d/da/UNAM-Genomics_Mexico_Ajax-loader.gif) no-repeat 10px 50%;
+
-
-moz-border-radius:15px;
+
-
-webkit-border-radius:15px;
+
-
border-radius:15px;
+
-
opacity:0.7;
+
-
width:180px;
+
-
position:absolute;
+
-
top:150px;
+
-
left:50%;
+
-
margin-left:-90px;
+
-
}
+
-
</style>
+
-
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+
         <link rel="stylesheet" type="text/css" href="css/style.css" />
         <link rel="stylesheet" type="text/css" href="css/style.css" />
-
<script type="text/javascript">
+
        <noscript>
-
/*
+
            <style>
-
* Copyright (c) 2009 Simo Kinnunen.
+
                .cn-images img{position: relative;display: block;border-bottom: 5px solid #ff8243;}
-
* Licensed under the MIT license.
+
                .cn-slideshow{height: auto;}
-
*
+
 
-
* @version 1.09i
+
            </style>
-
*/
+
        </noscript>
-
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value+this.unit}},addClass:function(C,B){var D=C.className;C.className=D+(D&&" ")+B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){B.opacity=parseFloat(F);return"rgb("+D+")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);for(var E=0,B=C.length,D;E<B;++E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),quotedList:j(function(E){var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" "+E}}else{if(B<C-1){E+=" "}}return E},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C++]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/\b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var D={inline:1,"inline-block":1,"run-in":1};var C=/^\s+/,B=/\s+$/;return function(H,F,G,E){if(E){if(E.nodeName.toLowerCase()=="br"){H=H.replace(C,"")}}if(D[F.get("display")]){return H}if(!G.previousSibling){H=H.replace(C,"")}if(!G.nextSibling){H=H.replace(B,"")}return H}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;++L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];++K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];++K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(D){var C=this.face=D.face,B={"\u0020":1,"\u00a0":1,"\u3000":1};this.glyphs=D.glyphs;this.w=D.w;this.baseSize=parseInt(C["units-per-em"],10);this.family=C["font-family"].toLowerCase();this.weight=C["font-weight"];this.style=C["font-style"]||"normal";this.viewBox=(function(){var F=C.bbox.split(/\s+/);var E={minX:parseInt(F[0],10),minY:parseInt(F[1],10),maxX:parseInt(F[2],10),maxY:parseInt(F[3],10)};E.width=E.maxX-E.minX;E.height=E.maxY-E.minY;E.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return E})();this.ascent=-parseInt(C.ascent,10);this.descent=-parseInt(C.descent,10);this.height=-this.ascent+this.descent;this.spacing=function(L,N,E){var O=this.glyphs,M,K,G,P=[],F=0,J=-1,I=-1,H;while(H=L[++J]){M=O[H]||this.missingGlyph;if(!M){continue}if(K){F-=G=K[H]||0;P[I]-=G}F+=P[++I]=~~(M.w||this.w)+N+(B[H]?E:0);K=M.k}P.total=F;return P}}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>=I&&L>=I)?M<L:M>L:(M<=I&&L<=I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this,G.type=="mouseover")}function E(F){C(this,F.type=="mouseenter")}function C(F,G){setTimeout(function(){var H=d.get(F).options;m.replace(F,G?h(H,H.hover):H,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];++F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G++];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=++B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on"+B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];++C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var C={},B,F;for(var E=0,D=arguments.length;B=arguments[E],E<D;++E){for(F in B){if(k(B,F)){C[F]=B[F]}}}return C}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^\s/.test(M)){I.unshift("")}if(/\s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;++J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(D,M){var C=D.nodeName.toLowerCase();if(M.ignore[C]){return}var E=!M.textless[C];var B=n.getStyle(v(D,M)).extend(M);var F=c(D,B),G,K,I,H,L,J;if(!F){return}for(G=D.firstChild;G;G=I){K=G.nodeType;I=G.nextSibling;if(E&&K==3){if(H){H.appendData(G.data);D.removeChild(G)}else{H=G}if(I){continue}}if(H){D.replaceChild(o(F,n.whiteSpace(H.data,B,H,J),B,M,G,D),H);H=null}if(K==1){if(G.firstChild){if(G.nodeName.toLowerCase()=="cufon"){z[M.engine](F,null,B,M,G,D)}else{arguments.callee(G,M)}}J=G}}}var t=" ".split(/\s+/).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={autoDetect:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},ignore:{applet:1,canvas:1,col:1,colgroup:1,head:1,iframe:1,map:1,optgroup:1,option:1,script:1,select:1,style:1,textarea:1,title:1,pre:1},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.YAHOO&&YAHOO.util&&YAHOO.util.Selector&&YAHOO.util.Selector.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textless:{dl:1,html:1,ol:1,table:1,tbody:1,thead:1,tfoot:1,tr:1,ul:1},textShadow:"none"};var p={words:/\s/.test("\u00a0")?/[^\S\u00a0]+/:/\s+/,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){if(!D){return m}var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"'+C+'"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(C.autoDetect){delete C.fontFamily}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}else{delete C.textGradient}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;++F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var h=(document.documentMode||0)<8;document.write(('<style type="text/css">cufoncanvas{text-indent:0;}@media screen{cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}cufoncanvas{position:absolute;text-align:left;}cufon{display:inline-block;position:relative;vertical-align:'+(h?"middle":"text-bottom")+";}cufon cufontext{position:absolute;left:-10000in;font-size:1px;}a cufon{cursor:pointer}}@media print{cufon cufoncanvas{display:none;}}</style>").replace(/;/g,"!important;"));function c(i,j){return a(i,/(?:em|ex|%)$|^[a-z-]+$/i.test(j)?"1em":j)}function a(l,m){if(m==="0"){return 0}if(/px$/i.test(m)){return parseFloat(m)}var k=l.style.left,j=l.runtimeStyle.left;l.runtimeStyle.left=l.currentStyle.left;l.style.left=m.replace("%","em");var i=l.style.pixelLeft;l.style.left=k;l.runtimeStyle.left=j;return i}function f(l,k,j,n){var i="computed"+n,m=k[i];if(isNaN(m)){m=k.get(n);k[i]=m=(m=="normal")?0:~~j.convertFrom(a(l,m))}return m}var g={};function d(p){var q=p.id;if(!g[q]){var n=p.stops,o=document.createElement("cvml:fill"),i=[];o.type="gradient";o.angle=180;o.focus="0";o.method="sigma";o.color=n[0][1];for(var m=1,l=n.length-1;m<l;++m){i.push(n[m][0]*100+"% "+n[m][1])}o.colors=i.join(",");o.color2=n[l][1];g[q]=o}return g[q]}return function(ac,G,Y,C,K,ad,W){var n=(G===null);if(n){G=K.alt}var I=ac.viewBox;var p=Y.computedFontSize||(Y.computedFontSize=new Cufon.CSS.Size(c(ad,Y.get("fontSize"))+"px",ac.baseSize));var y,q;if(n){y=K;q=K.firstChild}else{y=document.createElement("cufon");y.className="cufon cufon-vml";y.alt=G;q=document.createElement("cufoncanvas");y.appendChild(q);if(C.printable){var Z=document.createElement("cufontext");Z.appendChild(document.createTextNode(G));y.appendChild(Z)}if(!W){y.appendChild(document.createElement("cvml:shape"))}}var ai=y.style;var R=q.style;var l=p.convert(I.height),af=Math.ceil(l);var V=af/l;var P=V*Cufon.CSS.fontStretch(Y.get("fontStretch"));var U=I.minX,T=I.minY;R.height=af;R.top=Math.round(p.convert(T-ac.ascent));R.left=Math.round(p.convert(U));ai.height=p.convert(ac.height)+"px";var F=Y.get("color");var ag=Cufon.CSS.textTransform(G,Y).split("");var L=ac.spacing(ag,f(ad,Y,p,"letterSpacing"),f(ad,Y,p,"wordSpacing"));if(!L.length){return null}var k=L.total;var x=-U+k+(I.width-L[L.length-1]);var ah=p.convert(x*P),X=Math.round(ah);var O=x+","+I.height,m;var J="r"+O+"ns";var u=C.textGradient&&d(C.textGradient);var o=ac.glyphs,S=0;var H=C.textShadow;var ab=-1,aa=0,w;while(w=ag[++ab]){var D=o[ag[ab]]||ac.missingGlyph,v;if(!D){continue}if(n){v=q.childNodes[aa];while(v.firstChild){v.removeChild(v.firstChild)}}else{v=document.createElement("cvml:shape");q.appendChild(v)}v.stroked="f";v.coordsize=O;v.coordorigin=m=(U-S)+","+T;v.path=(D.d?"m"+D.d+"xe":"")+"m"+m+J;v.fillcolor=F;if(u){v.appendChild(u.cloneNode(false))}var ae=v.style;ae.width=X;ae.height=af;if(H){var s=H[0],r=H[1];var B=Cufon.CSS.color(s.color),z;var N=document.createElement("cvml:shadow");N.on="t";N.color=B.color;N.offset=s.offX+","+s.offY;if(r){z=Cufon.CSS.color(r.color);N.type="double";N.color2=z.color;N.offset2=r.offX+","+r.offY}N.opacity=B.opacity||(z&&z.opacity)||1;v.appendChild(N)}S+=L[aa++]}var M=v.nextSibling,t,A;if(C.forceHitArea){if(!M){M=document.createElement("cvml:rect");M.stroked="f";M.className="cufon-vml-cover";t=document.createElement("cvml:fill");t.opacity=0;M.appendChild(t);q.appendChild(M)}A=M.style;A.width=X;A.height=af}else{if(M){q.removeChild(M)}}ai.width=Math.max(Math.ceil(p.convert(k*P)),0);if(h){var Q=Y.computedYAdjust;if(Q===undefined){var E=Y.get("lineHeight");if(E=="normal"){E="1em"}else{if(!isNaN(E)){E+="em"}}Y.computedYAdjust=Q=0.5*(a(ad,E)-parseFloat(ai.height))}if(Q){ai.marginTop=Math.ceil(Q)+"px";ai.marginBottom=Q+"px"}}return y}})());Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode(("cufon{text-indent:0;}@media screen,projection{cufon{display:inline;display:inline-block;position:relative;vertical-align:middle;"+(e?"":"font-size:1px;line-height:1px;")+"}cufon cufontext{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}"+(a?"cufon canvas{position:relative;}":"cufon canvas{position:absolute;}")+"}@media print{cufon{padding:0;}cufon canvas{display:none;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);++j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;++j){var g=m[j];k[g.m].apply(k,g.a)}}return function(V,w,P,t,C,W){var k=(w===null);if(k){w=C.getAttribute("alt")}var A=V.viewBox;var m=P.getSize("fontSize",V.baseSize);var B=0,O=0,N=0,u=0;var z=t.textShadow,L=[];if(z){for(var U=z.length;U--;){var F=z[U];var K=m.convertFrom(parseFloat(F.offX));var I=m.convertFrom(parseFloat(F.offY));L[U]=[K,I];if(I<B){B=I}if(K>O){O=K}if(I>N){N=I}if(K<u){u=K}}}var Z=Cufon.CSS.textTransform(w,P).split("");var E=V.spacing(Z,~~m.convertFrom(parseFloat(P.get("letterSpacing"))||0),~~m.convertFrom(parseFloat(P.get("wordSpacing"))||0));if(!E.length){return null}var h=E.total;O+=A.width-E[E.length-1];u+=A.minX;var s,n;if(k){s=C;n=C.firstChild}else{s=document.createElement("cufon");s.className="cufon cufon-canvas";s.setAttribute("alt",w);n=document.createElement("canvas");s.appendChild(n);if(t.printable){var S=document.createElement("cufontext");S.appendChild(document.createTextNode(w));s.appendChild(S)}}var aa=s.style;var H=n.style;var j=m.convert(A.height);var Y=Math.ceil(j);var M=Y/j;var G=M*Cufon.CSS.fontStretch(P.get("fontStretch"));var J=h*G;var Q=Math.ceil(m.convert(J+O-u));var o=Math.ceil(m.convert(A.height-B+N));n.width=Q;n.height=o;H.width=Q+"px";H.height=o+"px";B+=A.minY;H.top=Math.round(m.convert(B-V.ascent))+"px";H.left=Math.round(m.convert(u))+"px";var r=Math.max(Math.ceil(m.convert(J)),0)+"px";if(a){aa.width=r;aa.height=m.convert(V.height)+"px"}else{aa.paddingLeft=r;aa.paddingBottom=(m.convert(V.height)-1)+"px"}var X=n.getContext("2d"),D=j/A.height;X.scale(D,D*M);X.translate(-u,-B);X.save();function T(){var x=V.glyphs,ab,l=-1,g=-1,y;X.scale(G,1);while(y=Z[++l]){var ab=x[Z[l]]||V.missingGlyph;if(!ab){continue}if(ab.d){X.beginPath();if(ab.code){c(ab.code,X)}else{ab.code=d("m"+ab.d,X)}X.fill()}X.translate(E[++g],0)}X.restore()}if(z){for(var U=z.length;U--;){var F=z[U];X.save();X.fillStyle=F.color;X.translate.apply(X,L[U]);T()}}var q=t.textGradient;if(q){var v=q.stops,p=X.createLinearGradient(0,A.minY,0,A.maxY);for(var U=0,R=v.length;U<R;++U){p.addColorStop.apply(p,v[U])}X.fillStyle=p}else{X.fillStyle=P.get("color")}T();return s}})());
+
<script id="barTmpl" type="text/x-jquery-tmpl">
-
</script>
+
            <div class="cn-bar">
-
<script type="text/javascript">
+
                <div class="cn-nav">
-
Cufon.replace('h1',{ textShadow: '1px 1px #000'});
+
<a href="#" class="cn-nav-prev">
-
Cufon.replace('h2',{ textShadow: '1px 1px #000'});
+
                        <span>Previous</span>
-
Cufon.replace('.footer',{ textShadow: '1px 1px #000'});
+
<div style="background-image:url(${prevSource});"></div>
-
Cufon.replace('.pxs_loading',{ textShadow: '1px 1px #000'});
+
</a>
 +
<a href="#" class="cn-nav-next">
 +
                        <span>Next</span>
 +
<div style="background-image:url(${nextSource});"></div>
 +
</a>
 +
                </div><!-- cn-nav -->
 +
                <div class="cn-nav-content">
 +
                    <div class="cn-nav-content-prev">
 +
                        <span>Previous image</span>
 +
                        <h3>${prevTitle}</h3>
 +
                    </div>
 +
                    <div class="cn-nav-content-current">
 +
                        <span>Currently viewing</span>
 +
                        <h2>${currentTitle}</h2>
 +
                    </div>
 +
                    <div class="cn-nav-content-next">
 +
                        <span>Next image</span>
 +
                        <h3>${nextTitle}</h3>
 +
                    </div>
 +
                </div><!-- cn-nav-content -->
 +
            </div><!-- cn-bar -->
</script>
</script>
     </head>
     </head>
     <body>
     <body>
-
<div id="pxs_container" class="pxs_container">
+
        <div class="container">
-
<div class="pxs_bg">
+
            <h1>Circle Navigation Effect <span>Bubble-like thumbnail preview for your navigation with CSS3</span></h1>
-
<div class="pxs_bg1"></div>
+
            <div class="wrapper">
-
<div class="pxs_bg2"></div>
+
                <div id="cn-slideshow" class="cn-slideshow">
-
<div class="pxs_bg3"></div>
+
                    <div class="cn-images">
-
</div>
+
                        <img src="images/large/1.jpg" alt="image01" title="Beautiful Scenery 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>
-
<div class="pxs_loading">Loading images...</div>
+
                        <img src="images/large/2.jpg" alt="image02" title="Beautiful Scenery 2" data-thumb="images/thumbs/2.jpg"/>
-
<div class="pxs_slider_wrapper">
+
                        <img src="images/large/3.jpg" alt="image03" title="Beautiful Scenery 3" data-thumb="images/thumbs/3.jpg"/>
-
<ul class="pxs_slider">
+
                        <img src="images/large/4.jpg" alt="image04" title="Beautiful Scenery 4" data-thumb="images/thumbs/4.jpg"/>
-
<li><div><img src="https://static.igem.org/mediawiki/2012/thumb/7/79/Unamgenomicsmexiconewselmanana.JPG/850px-Unamgenomicsmexiconewselmanana.JPG" alt="First Image" width="660px" height="280px"/>
+
                    </div><!-- cn-images -->
-
<p align="center">This is some text!</p></div>
+
                </div><!-- cn-slideshow -->
-
</li>
+
                <p>Hover over the arrows to see the effect.</p>
-
<li><img src="https://static.igem.org/mediawiki/2012/thumb/4/4a/Unamgenomicsmexicoelsoldetampico.JPG/800px-Unamgenomicsmexicoelsoldetampico.JPG" alt="Second Image" /></li>
+
            </div>
-
<li><img src="https://static.igem.org/mediawiki/2012/thumb/9/9a/Unamgenomicsmexiconewslajornada.JPG/850px-Unamgenomicsmexiconewslajornada.JPG" alt="Third Image" /></li>
+
        </div>
-
</ul>
+
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
-
<div class="pxs_navigation">
+
-
<span class="pxs_next"></span>
+
-
<span class="pxs_prev"></span>
+
-
</div>
+
-
<ul class="pxs_thumbnails">
+
-
<li><img src="https://static.igem.org/mediawiki/2012/thumb/7/79/Unamgenomicsmexiconewselmanana.JPG/850px-Unamgenomicsmexiconewselmanana.JPG" alt="First Image" width="100px"/></li>
+
-
<li><img src="https://static.igem.org/mediawiki/2012/thumb/4/4a/Unamgenomicsmexicoelsoldetampico.JPG/800px-Unamgenomicsmexicoelsoldetampico.JPG" alt="Second Image" width="100px"/></li>
+
-
<li><img src="https://static.igem.org/mediawiki/2012/thumb/9/9a/Unamgenomicsmexiconewslajornada.JPG/850px-Unamgenomicsmexiconewslajornada.JPG" alt="Third Image" width="100px"/></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
 
+
-
<!-- The JavaScript -->
+
-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
<script type="text/javascript">
<script type="text/javascript">
-
/*
+
(function(a){var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,b={},f={},e,p={key:0,data:{}},h=0,c=0,l=[];function g(e,d,g,i){var c={data:i||(d?d.data:{}),_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t};e&&a.extend(c,e,{nodes:[],parent:d});if(g){c.tmpl=g;c._ctnt=c._ctnt||c.tmpl(a,c);c.key=++h;(l.length?f:b)[h]=c}return c}a.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(f,d){a.fn[f]=function(n){var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;e=b||{};if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){i[d](this[0]);g=this}else{for(h=0,m=i.length;h<m;h++){c=h;k=(h>0?this.clone(true):this).get();a.fn[d].apply(a(i[h]),k);g=g.concat(k)}c=0;g=this.pushStack(g,f,i.selector)}l=e;e=null;a.tmpl.complete(l);return g}});a.fn.extend({tmpl:function(d,c,b){return a.tmpl(this[0],d,c,b)},tmplItem:function(){return a.tmplItem(this[0])},template:function(b){return a.template(b,this[0])},domManip:function(d,l,j){if(d[0]&&d[0].nodeType){var f=a.makeArray(arguments),g=d.length,i=0,h;while(i<g&&!(h=a.data(d[i++],"tmplItem")));if(g>1)f[0]=[a.makeArray(d)];if(h&&c)f[2]=function(b){a.tmpl.afterManip(this,b,j)};r.apply(this,f)}else r.apply(this,arguments);c=0;!e&&a.tmpl.complete(b);return this}});a.extend({tmpl:function(d,h,e,c){var j,k=!c;if(k){c=p;d=a.template[d]||a.template(null,d);f={}}else if(!d){d=c.tmpl;b[c.key]=c;c.nodes=[];c.wrapped&&n(c,c.wrapped);return a(i(c,null,c.tmpl(a,c)))}if(!d)return[];if(typeof h==="function")h=h.call(c||{});e&&e.wrapped&&n(e,e.wrapped);j=a.isArray(h)?a.map(h,function(a){return a?g(e,c,d,a):null}):[g(e,c,d,h)];return k?a(i(c,null,j)):j},tmplItem:function(b){var c;if(b instanceof a)b=b[0];while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));return c||p},template:function(c,b){if(b){if(typeof b==="string")b=o(b);else if(b instanceof a)b=b[0]||{};if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));return typeof c==="string"?(a.template[c]=b):b}return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null},encode:function(a){return(""+a).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;")}});a.extend(a.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){_=_.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(_,$1,$2);_=[];",close:"call=$item.calls();_=call._.concat($item.wrap(call,_));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){_.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){_.push($.encode($1a));}"},"!":{open:""}},complete:function(){b={}},afterManip:function(f,b,d){var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];d.call(f,b);m(e);c++}});function i(e,g,f){var b,c=f?a.map(f,function(a){return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:i(a,e,a._ctnt)}):e;if(g)return c;c=c.join("");c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){b=a(e).get();m(b);if(c)b=j(c).concat(b);if(d)b=b.concat(j(d))});return b?b:j(c)}function j(c){var b=document.createElement("div");b.innerHTML=c;return a.makeArray(b.childNodes)}function o(b){return new Function("jQuery","$item","var $=jQuery,call,_=[],$data=$item.data;with($data){_.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(m,l,j,d,b,c,e){var i=a.tmpl.tag[j],h,f,g;if(!i)throw"Template command not found: "+j;h=i._default||[];if(c&&!/\w$/.test(b)){b+=c;c=""}if(b){b=k(b);e=e?","+k(e)+")":c?")":"";f=c?b.indexOf(".")>-1?b+c:"("+b+").call($item"+e:b;g=c?f:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}else g=f=h.$1||"null";d=k(d);return"');"+i[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(g).split("$1").join(f).split("$2").join(d?d.replace(/\s*([^\(]+)\s*(\((.*?)\))?/g,function(d,c,b,a){a=a?","+a+")":b?")":"";return a?"("+c+").call($item"+a:d}):h.$2||"")+"_.push('"})+"');}return _;")}function n(c,b){c._wrap=i(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}function k(a){return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function s(b){var a=document.createElement("div");a.appendChild(b.cloneNode(true));return a.innerHTML}function m(o){var n="_"+c,k,j,l={},e,p,i;for(e=0,p=o.length;e<p;e++){if((k=o[e]).nodeType!==1)continue;j=k.getElementsByTagName("*");for(i=j.length-1;i>=0;i--)m(j[i]);m(k)}function m(j){var p,i=j,k,e,m;if(m=j.getAttribute(d)){while(i.parentNode&&(i=i.parentNode).nodeType===1&&!(p=i.getAttribute(d)));if(p!==m){i=i.parentNode?i.nodeType===11?0:i.getAttribute(d)||0:0;if(!(e=b[m])){e=f[m];e=g(e,b[i]||f[i],null,true);e.key=++h;b[h]=e}c&&o(m)}j.removeAttribute(d)}else if(c&&(e=a.data(j,"tmplItem"))){o(e.key);b[e.key]=e;i=a.data(j.parentNode,"tmplItem");i=i?i.key:0}if(e){k=e;while(k&&k.key!=i){k.nodes.push(j);k=k.parent}delete e._ctnt;delete e._wrap;a.data(j,"tmplItem",e)}function o(a){a=a+n;e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent,null,true)}}}function u(a,d,c,b){if(!a)return l.pop();l.push({_:a,tmpl:d,item:this,data:c,options:b})}function w(d,c,b){return a.tmpl(a.template(d),c,b,this)}function x(b,d){var c=b.options||{};c.wrapped=d;return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}function v(d,c){var b=this._wrap;return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){return c?a.innerText||a.textContent:a.outerHTML||s(a)})}function t(){var b=this.nodes;a.tmpl(null,null,null,this).insertBefore(b[0]);a(b).remove()}})(jQuery)       
-
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
+
        </script>
-
*
+
<script type="text/javascript">
-
* Uses the built in easing capabilities added In jQuery 1.1
+
(function( window, $, undefined ) {
-
* to offer multiple easing options
+
-
*
+
$.Slideshow = function( options, element ) {
-
* TERMS OF USE - jQuery Easing
+
-
*
+
this.$el = $( element );
-
* Open source under the BSD License.  
+
-
*
+
this.$preloader = $('<div class="cn-loading">Loading...</div>');
-
* Copyright © 2008 George McGinley Smith
+
-
* All rights reserved.
+
// images
-
*
+
this.$images = this.$el.find('div.cn-images > img').hide();
-
* Redistribution and use in source and binary forms, with or without modification,
+
-
* are permitted provided that the following conditions are met:
+
// total number of images
-
*
+
this.imgCount = this.$images.length;
-
* Redistributions of source code must retain the above copyright notice, this list of
+
-
* conditions and the following disclaimer.
+
this.isAnimating = false;
-
* Redistributions in binary form must reproduce the above copyright notice, this list
+
-
* of conditions and the following disclaimer in the documentation and/or other materials
+
this._init( options );
-
* provided with the distribution.
+
-
*
+
};
-
* Neither the name of the author nor the names of contributors may be used to endorse
+
-
* or promote products derived from this software without specific prior written permission.
+
$.Slideshow.defaults = {
-
*
+
current : 0
-
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+
    };
-
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+
-
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+
$.Slideshow.prototype = {
-
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+
_init : function( options ) {
-
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+
-
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
+
this.options = $.extend( true, {}, $.Slideshow.defaults, options );
-
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+
-
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
+
// validate options
-
* OF THE POSSIBILITY OF SUCH DAMAGE.  
+
this._validate();
-
*
+
-
*/
+
this.current = this.options.current;
-
 
+
-
// t: current time, b: begInnIng value, c: change In value, d: duration
+
this.$preloader.appendTo( this.$el );
-
jQuery.easing['jswing'] = jQuery.easing['swing'];
+
-
 
+
var instance = this;
-
jQuery.extend( jQuery.easing,
+
-
{
+
this._preloadImages( function() {
-
def: 'easeOutQuad',
+
-
swing: function (x, t, b, c, d) {
+
instance.$preloader.hide();
-
//alert(jQuery.easing.default);
+
-
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
+
instance.$images.eq( instance.current ).show();
-
},
+
-
easeInQuad: function (x, t, b, c, d) {
+
instance.bar = new $.NavigationBar( instance.imgCount, instance._getStatus() );
-
return c*(t/=d)*t + b;
+
-
},
+
instance.bar.getElement().appendTo( instance.$el );
-
easeOutQuad: function (x, t, b, c, d) {
+
-
return -c *(t/=d)*(t-2) + b;
+
instance._initEvents();
-
},
+
-
easeInOutQuad: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return c/2*t*t + b;
+
-
return -c/2 * ((--t)*(t-2) - 1) + b;
+
-
},
+
-
easeInCubic: function (x, t, b, c, d) {
+
-
return c*(t/=d)*t*t + b;
+
-
},
+
-
easeOutCubic: function (x, t, b, c, d) {
+
-
return c*((t=t/d-1)*t*t + 1) + b;
+
-
},
+
-
easeInOutCubic: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return c/2*t*t*t + b;
+
-
return c/2*((t-=2)*t*t + 2) + b;
+
-
},
+
-
easeInQuart: function (x, t, b, c, d) {
+
-
return c*(t/=d)*t*t*t + b;
+
-
},
+
-
easeOutQuart: function (x, t, b, c, d) {
+
-
return -c * ((t=t/d-1)*t*t*t - 1) + b;
+
-
},
+
-
easeInOutQuart: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+
-
return -c/2 * ((t-=2)*t*t*t - 2) + b;
+
-
},
+
-
easeInQuint: function (x, t, b, c, d) {
+
-
return c*(t/=d)*t*t*t*t + b;
+
-
},
+
-
easeOutQuint: function (x, t, b, c, d) {
+
-
return c*((t=t/d-1)*t*t*t*t + 1) + b;
+
-
},
+
-
easeInOutQuint: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+
-
return c/2*((t-=2)*t*t*t*t + 2) + b;
+
-
},
+
-
easeInSine: function (x, t, b, c, d) {
+
-
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+
-
},
+
-
easeOutSine: function (x, t, b, c, d) {
+
-
return c * Math.sin(t/d * (Math.PI/2)) + b;
+
-
},
+
-
easeInOutSine: function (x, t, b, c, d) {
+
-
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+
-
},
+
-
easeInExpo: function (x, t, b, c, d) {
+
-
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+
-
},
+
-
easeOutExpo: function (x, t, b, c, d) {
+
-
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+
-
},
+
-
easeInOutExpo: function (x, t, b, c, d) {
+
-
if (t==0) return b;
+
-
if (t==d) return b+c;
+
-
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+
-
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+
-
},
+
-
easeInCirc: function (x, t, b, c, d) {
+
-
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+
-
},
+
-
easeOutCirc: function (x, t, b, c, d) {
+
-
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+
-
},
+
-
easeInOutCirc: function (x, t, b, c, d) {
+
-
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+
-
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+
-
},
+
-
easeInElastic: function (x, t, b, c, d) {
+
-
var s=1.70158;var p=0;var a=c;
+
-
if (t==0) return b; if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+
-
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
-
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
-
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+
-
},
+
-
easeOutElastic: function (x, t, b, c, d) {
+
-
var s=1.70158;var p=0;var a=c;
+
-
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
+
-
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
-
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
-
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+
-
},
+
-
easeInOutElastic: function (x, t, b, c, d) {
+
-
var s=1.70158;var p=0;var a=c;
+
-
if (t==0) return b;  if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
+
-
if (a < Math.abs(c)) { a=c; var s=p/4; }
+
-
else var s = p/(2*Math.PI) * Math.asin (c/a);
+
-
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+
-
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+
-
},
+
-
easeInBack: function (x, t, b, c, d, s) {
+
-
if (s == undefined) s = 1.70158;
+
-
return c*(t/=d)*t*((s+1)*t - s) + b;
+
-
},
+
-
easeOutBack: function (x, t, b, c, d, s) {
+
-
if (s == undefined) s = 1.70158;
+
-
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+
-
},
+
-
easeInOutBack: function (x, t, b, c, d, s) {
+
-
if (s == undefined) s = 1.70158;  
+
-
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+
-
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+
-
},
+
-
easeInBounce: function (x, t, b, c, d) {
+
-
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
+
-
},
+
-
easeOutBounce: function (x, t, b, c, d) {
+
-
if ((t/=d) < (1/2.75)) {
+
-
return c*(7.5625*t*t) + b;
+
-
} else if (t < (2/2.75)) {
+
-
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+
-
} else if (t < (2.5/2.75)) {
+
-
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+
-
} else {
+
-
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+
-
}
+
-
},
+
-
easeInOutBounce: function (x, t, b, c, d) {
+
-
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
+
-
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
+
-
}
+
});
});
-
 
+
-
/*
+
},
-
*
+
_preloadImages : function( callback ) {
-
* TERMS OF USE - EASING EQUATIONS
+
-
*
+
var loaded = 0, instance = this;
-
* Open source under the BSD License.
+
-
*
+
this.$images.each( function(i) {
-
* Copyright © 2001 Robert Penner
+
-
* All rights reserved.
+
var $img = $(this);
-
*
+
-
* Redistribution and use in source and binary forms, with or without modification,  
+
// large image
-
* are permitted provided that the following conditions are met:
+
$('<img/>').load( function() {
-
*
+
++loaded;
-
* Redistributions of source code must retain the above copyright notice, this list of
+
if( loaded === instance.imgCount * 2 ) callback.call();
-
* conditions and the following disclaimer.
+
}).attr( 'src', $img.attr('src') );
-
* Redistributions in binary form must reproduce the above copyright notice, this list
+
// thumb
-
* of conditions and the following disclaimer in the documentation and/or other materials
+
$('<img/>').load( function() {
-
* provided with the distribution.
+
++loaded;
-
*
+
if( loaded === instance.imgCount * 2 ) callback.call();
-
* Neither the name of the author nor the names of contributors may be used to endorse
+
}).attr( 'src', $img.data('thumb') );
-
* or promote products derived from this software without specific prior written permission.
+
-
*
+
});
-
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+
-
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+
},
-
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+
_validate : function() {
-
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+
-
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+
if( this.options.current < 0 || this.options.current >= this.imgCount )
-
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
+
this.options.current = 0;
-
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+
-
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
+
},
-
* OF THE POSSIBILITY OF SUCH DAMAGE.
+
_getStatus : function() {
-
*
+
-
*/
+
var $currentImg = this.$images.eq( this.current ), $nextImg, $prevImg;
-
</script>
+
-
        <script type="text/javascript">
+
( this.current === 0 ) ? $prevImg = this.$images.eq( this.imgCount - 1 ) : $prevImg = $currentImg.prev();
-
(function($) {
+
( this.current === this.imgCount - 1 ) ? $nextImg = this.$images.eq( 0 ) : $nextImg = $currentImg.next();
-
$.fn.parallaxSlider = function(options) {
+
-
var opts = $.extend({}, $.fn.parallaxSlider.defaults, options);
+
return {
-
return this.each(function() {
+
prevSource : $prevImg.data( 'thumb' ),
-
var $pxs_container = $(this),
+
nextSource : $nextImg.data( 'thumb' ),
-
o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;
+
prevTitle : $prevImg.attr( 'title' ),
-
+
currentTitle : $currentImg.attr( 'title' ),
-
//the main slider
+
nextTitle : $nextImg.attr( 'title' )
-
var $pxs_slider = $('.pxs_slider',$pxs_container),
+
};
-
//the elements in the slider
+
-
$elems = $pxs_slider.children(),
+
},
-
//total number of elements
+
_initEvents : function() {
-
total_elems = $elems.length,
+
-
//the navigation buttons
+
var instance = this;
-
$pxs_next = $('.pxs_next',$pxs_container),
+
-
$pxs_prev = $('.pxs_prev',$pxs_container),
+
this.bar.$navPrev.bind('click.slideshow', function( event ) {
-
//the bg images
+
-
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
+
-
$pxs_bg2 = $('.pxs_bg2',$pxs_container),
+
-
$pxs_bg3 = $('.pxs_bg3',$pxs_container),
+
-
//current image
+
-
current = 0,
+
-
//the thumbs container
+
-
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
+
-
//the thumbs
+
-
$thumbs = $pxs_thumbnails.children(),
+
-
//the interval for the autoplay mode
+
-
slideshow,
+
-
//the loading image
+
-
$pxs_loading = $('.pxs_loading',$pxs_container),
+
-
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
+
-
+
-
//first preload all the images
+
-
var loaded = 0,
+
-
$images = $pxs_slider_wrapper.find('img');
+
-
+
-
$images.each(function(){
+
-
var $img = $(this);
+
-
$('<img/>').load(function(){
+
-
++loaded;
+
-
if(loaded == total_elems*2){
+
-
$pxs_loading.hide();
+
-
$pxs_slider_wrapper.show();
+
-
+
-
//one images width (assuming all images have the same sizes)
+
-
var one_image_w = $pxs_slider.find('img:first').width();
+
-
+
-
/*
+
-
need to set width of the slider,
+
-
of each one of its elements, and of the
+
-
navigation buttons
+
-
*/
+
-
setWidths($pxs_slider,
+
-
$elems,
+
-
total_elems,
+
-
$pxs_bg1,
+
-
$pxs_bg2,
+
-
$pxs_bg3,
+
-
one_image_w,
+
-
$pxs_next,
+
-
$pxs_prev);
+
-
+
-
/*
+
-
set the width of the thumbs
+
-
and spread them evenly
+
-
*/
+
-
$pxs_thumbnails.css({
+
-
'width' : one_image_w + 'px',
+
-
'margin-left' : -one_image_w/2 + 'px'
+
-
});
+
-
var spaces = one_image_w/(total_elems+1);
+
-
$thumbs.each(function(i){
+
-
var $this = $(this);
+
-
var left = spaces*(i+1) - $this.width()/2;
+
-
$this.css('left',left+'px');
+
-
+
-
if(o.thumbRotation){
+
-
var angle = Math.floor(Math.random()*41)-20;
+
-
$this.css({
+
-
'-moz-transform' : 'rotate('+ angle +'deg)',
+
-
'-webkit-transform' : 'rotate('+ angle +'deg)',
+
-
'transform' : 'rotate('+ angle +'deg)'
+
-
});
+
-
}
+
-
//hovering the thumbs animates them up and down
+
-
$this.bind('mouseenter',function(){
+
-
$(this).stop().animate({top:'-10px'},100);
+
-
}).bind('mouseleave',function(){
+
-
$(this).stop().animate({top:'0px'},100);
+
-
});
+
-
});
+
-
+
-
//make the first thumb be selected
+
-
highlight($thumbs.eq(0));
+
-
+
-
//slide when clicking the navigation buttons
+
-
$pxs_next.bind('click',function(){
+
-
++current;
+
-
if(current >= total_elems)
+
-
if(o.circular)
+
-
current = 0;
+
-
else{
+
-
--current;
+
-
return false;
+
-
}
+
-
highlight($thumbs.eq(current));
+
-
slide(current,
+
-
$pxs_slider,
+
-
$pxs_bg3,
+
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
o.speed,
+
-
o.easing,
+
-
o.easingBg);
+
-
});
+
-
$pxs_prev.bind('click',function(){
+
-
--current;
+
-
if(current < 0)
+
-
if(o.circular)
+
-
current = total_elems - 1;
+
-
else{
+
-
++current;
+
-
return false;
+
-
}
+
-
highlight($thumbs.eq(current));
+
-
slide(current,
+
-
$pxs_slider,
+
-
$pxs_bg3,
+
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
o.speed,
+
-
o.easing,
+
-
o.easingBg);
+
-
});
+
-
+
-
/*
+
-
clicking a thumb will slide to the respective image
+
-
*/
+
-
$thumbs.bind('click',function(){
+
-
var $thumb = $(this);
+
-
highlight($thumb);
+
-
//if autoplay interrupt when user clicks
+
-
if(o.auto)
+
-
clearInterval(slideshow);
+
-
current = $thumb.index();
+
-
slide(current,
+
-
$pxs_slider,
+
-
$pxs_bg3,
+
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
o.speed,
+
-
o.easing,
+
-
o.easingBg);
+
-
});
+
-
+
-
+
-
+
-
/*
+
-
activate the autoplay mode if
+
-
that option was specified
+
-
*/
+
-
if(o.auto != 0){
+
-
o.circular = true;
+
-
slideshow = setInterval(function(){
+
-
$pxs_next.trigger('click');
+
-
},o.auto);
+
-
}
+
-
+
-
/*
+
-
when resizing the window,
+
-
we need to recalculate the widths of the
+
-
slider elements, based on the new windows width.
+
-
we need to slide again to the current one,
+
-
since the left of the slider is no longer correct
+
-
*/
+
-
$(window).resize(function(){
+
-
w_w = $(window).width();
+
-
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,$pxs_bg2,$pxs_bg3,one_image_w,$pxs_next,$pxs_prev);
+
-
slide(current,
+
-
$pxs_slider,
+
-
$pxs_bg3,
+
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
1,
+
-
o.easing,
+
-
o.easingBg);
+
-
});
+
-
 
+
-
}
+
-
}).error(function(){
+
-
alert('here')
+
-
}).attr('src',$img.attr('src'));
+
-
});
+
-
+
-
+
-
+
-
});
+
-
};
+
-
//the current windows width
+
instance._navigate( 'prev' );
-
var w_w = $(window).width();
+
return false;
-
var slide = function(current,
+
});
-
$pxs_slider,
+
-
$pxs_bg3,
+
this.bar.$navNext.bind('click.slideshow', function( event ) {
-
$pxs_bg2,
+
-
$pxs_bg1,
+
-
speed,
+
-
easing,
+
-
easingBg){
+
-
var slide_to = parseInt(-w_w * current);
+
-
$pxs_slider.stop().animate({
+
-
left : slide_to + 'px'
+
-
},speed, easing);
+
-
$pxs_bg3.stop().animate({
+
-
left : slide_to/2 + 'px'
+
-
},speed, easingBg);
+
-
$pxs_bg2.stop().animate({
+
-
left : slide_to/4 + 'px'
+
-
},speed, easingBg);
+
-
$pxs_bg1.stop().animate({
+
-
left : slide_to/8 + 'px'
+
-
},speed, easingBg);
+
-
}
+
-
var highlight = function($elem){
+
instance._navigate( 'next' );
-
$elem.siblings().removeClass('selected');
+
return false;
-
$elem.addClass('selected');
+
 +
});
 +
 +
},
 +
_navigate : function( dir ) {
 +
 +
if( this.isAnimating ) return false;
 +
 +
this.isAnimating = true;
 +
 +
var $curr = this.$images.eq( this.current ).css( 'z-index' , 998 ),
 +
instance = this;
 +
 +
( dir === 'prev')
 +
? ( this.current === 0 ) ? this.current = this.imgCount - 1 : --this.current
 +
: ( this.current === this.imgCount - 1 ) ? this.current = 0 : ++this.current;
 +
 +
this.$images.eq( this.current ).show();
 +
 +
$curr.fadeOut( 400, function() {
 +
 +
$(this).css( 'z-index' , 1 );
 +
instance.isAnimating = false;
 +
 +
});
 +
 +
this.bar.set( this._getStatus() );
 +
 +
}
 +
};
 +
 +
$.NavigationBar = function( imgCount, status ) {
 +
 +
this._init( imgCount, status );
 +
 +
};
 +
 +
$.NavigationBar.prototype = {
 +
 +
_init : function( imgCount, status ) {
 +
 +
this.$el = $('#barTmpl').tmpl( status );
 +
 +
// navigation
 +
this.$navPrev = this.$el.find('a.cn-nav-prev');
 +
this.$thumbPrev = this.$navPrev.children('div');
 +
 +
this.$navNext = this.$el.find('a.cn-nav-next');
 +
this.$thumbNext = this.$navNext.children('div');
 +
 +
// navigation status
 +
this.$statusPrev = this.$el.find('div.cn-nav-content-prev > h3');
 +
this.$statusCurrent = this.$el.find('div.cn-nav-content-current > h2');
 +
this.$statusNext = this.$el.find('div.cn-nav-content-next > h3');
 +
 +
// just show current image description if only one image
 +
if( imgCount <= 1) {
 +
 +
this.$navPrev.hide();
 +
this.$navNext.hide();
 +
this.$statusPrev.parent().hide();
 +
this.$statusNext.parent().hide();
 +
 +
}
 +
 +
},
 +
getElement : function() {
 +
 +
return this.$el;
 +
 +
},
 +
// set the current, previous and next descriptions, and also the previous and next thumbs
 +
set : function( status ) {
 +
 +
this.$thumbPrev.css( 'background-image', 'url(' + status.prevSource + ')' );
 +
this.$thumbNext.css( 'background-image', 'url(' + status.nextSource + ')' );
 +
this.$statusPrev.text( status.prevTitle );
 +
this.$statusCurrent.text( status.currentTitle );
 +
this.$statusNext.text( status.nextTitle );
 +
 +
}
 +
 +
};
 +
 +
var logError = function( message ) {
 +
 +
if ( this.console ) {
 +
 +
console.error( message );
 +
 +
}
 +
 +
};
 +
 +
$.fn.slideshow = function( options ) {
 +
 +
if ( typeof options === 'string' ) {
 +
 +
var args = Array.prototype.slice.call( arguments, 1 );
 +
 
 +
this.each(function() {
 +
 +
var instance = $.data( this, 'slideshow' );
 +
 +
if ( !instance ) {
 +
logError( "cannot call methods on slideshow prior to initialization; " +
 +
"attempted to call method '" + options + "'" );
 +
return;
}
}
-
var setWidths = function($pxs_slider,
+
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
-
$elems,
+
logError( "no such method '" + options + "' for slideshow instance" );
-
total_elems,
+
return;
-
$pxs_bg1,
+
-
$pxs_bg2,
+
-
$pxs_bg3,
+
-
one_image_w,
+
-
$pxs_next,
+
-
$pxs_prev){
+
-
/*
+
-
the width of the slider is the windows width
+
-
times the total number of elements in the slider
+
-
*/
+
-
var pxs_slider_w = w_w * total_elems;
+
-
$pxs_slider.width(pxs_slider_w + 'px');
+
-
//each element will have a width = windows width
+
-
$elems.width(w_w + 'px');
+
-
/*
+
-
we also set the width of each bg image div.
+
-
The value is the same calculated for the pxs_slider
+
-
*/
+
-
$pxs_bg1.width(pxs_slider_w + 'px');
+
-
$pxs_bg2.width(pxs_slider_w + 'px');
+
-
$pxs_bg3.width(pxs_slider_w + 'px');
+
-
+
-
/*
+
-
both the right and left of the
+
-
navigation next and previous buttons will be:
+
-
windowWidth/2 - imgWidth/2 + some margin (not to touch the image borders)
+
-
*/
+
-
var position_nav = w_w/2 - one_image_w/2 + 3;
+
-
$pxs_next.css('right', position_nav + 'px');
+
-
$pxs_prev.css('left', position_nav + 'px');
+
}
}
-
$.fn.parallaxSlider.defaults = {
+
instance[ options ].apply( instance, args );
-
auto : 0, //how many seconds to periodically slide the content.
+
-
//If set to 0 then autoplay is turned off.
+
-
speed : 1000,//speed of each slide animation
+
-
easing : 'jswing',//easing effect for the slide animation
+
-
easingBg : 'jswing',//easing effect for the background animation
+
-
circular : true,//circular slider
+
-
thumbRotation : true//the thumbs will be randomly rotated
+
-
};
+
-
//easeInOutExpo,easeInBack
+
-
})(jQuery);
+
-
</script>
+
-
 
+
-
<script type="text/javascript">
+
-
$(function() {
+
-
var $pxs_container = $('#pxs_container');
+
-
$pxs_container.parallaxSlider();
+
});
});
 +
 +
}
 +
else {
 +
 +
this.each(function() {
 +
var instance = $.data( this, 'slideshow' );
 +
if ( !instance ) {
 +
$.data( this, 'slideshow', new $.Slideshow( options, this ) );
 +
}
 +
});
 +
 +
}
 +
 +
return this;
 +
 +
};
 +
 +
})( window, jQuery );
         </script>
         </script>
-
 
+
        <script type="text/javascript">
 +
            $(function() {
 +
$('#cn-slideshow').slideshow();
 +
            });
 +
        </script>
 +
        <script type="text/javascript">
 +
 +
</script>>
     </body>
     </body>
</html>
</html>
-
}}
 

Revision as of 02:21, 16 September 2012

{{:Template:Team:UNAM_Genomics_Mexico/webhtml| content=

<!DOCTYPE html> UNAM Genomcs mexico

Circle Navigation Effect Bubble-like thumbnail preview for your navigation with CSS3

image01 image02 image03 image04

Hover over the arrows to see the effect.

>

Retrieved from "http://2012.igem.org/Team:UNAM_Genomics_Mexico/Results/NOT"