Team:Heidelberg/NivoSlider

From 2010.igem.org

(Difference between revisions)
 
(21 intermediate revisions not shown)
Line 3: Line 3:
<style type="text/css">
<style type="text/css">
-
 
-
 
.nivoSlider {
.nivoSlider {
Line 42: Line 40:
color:#000;
color:#000;
font-family:Calibri;
font-family:Calibri;
-
opacity:0.8; /* Overridden by captionOpacity setting */
+
opacity:0.8;  
width:100%;
width:100%;
z-index:89;
z-index:89;
Line 59: Line 57:
.nivo-directionNav a {
.nivo-directionNav a {
position:absolute;
position:absolute;
-
top:45%;
+
top:40%;
z-index:99;
z-index:99;
cursor:pointer;
cursor:pointer;
display:block;
display:block;
-
width:32px;
+
width:25px;
-
height:34px;
+
height:50px;
background:url(https://static.igem.org/mediawiki/2010/f/f0/Arrows.png) no-repeat;
background:url(https://static.igem.org/mediawiki/2010/f/f0/Arrows.png) no-repeat;
text-indent:-9999px;
text-indent:-9999px;
Line 70: Line 68:
}
}
a.nivo-nextNav {
a.nivo-nextNav {
-
background-position:-32px 0;
+
background-position:-25px 0;
-
right:10px;
+
right:0px;
}
}
a.nivo-prevNav {
a.nivo-prevNav {
-
left:10px;
+
left:0px;
-
}
+
-
.nivo-controlNav {
+
-
position:absolute;
+
-
right:0px;
+
-
bottom:-30px;
+
}
}
 +
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
.nivo-controlNav a {
position:relative;
position:relative;
z-index:99;
z-index:99;
cursor:pointer;
cursor:pointer;
-
display:block;
 
-
width:10px;
 
-
height:10px;
 
-
background:url(https://static.igem.org/mediawiki/2010/c/c3/Bullets.png) no-repeat;
 
-
text-indent:-9999px;
 
-
border:0;
 
-
margin-right:3px;
 
-
float:left;
 
}
}
.nivo-controlNav a.active {
.nivo-controlNav a.active {
font-weight:bold;
font-weight:bold;
-
background-position:-10px 0;
 
}
}
 +
 +
#wrapper {
#wrapper {
Line 120: Line 107:
margin:30px 30px 60px 30px;
margin:30px 30px 60px 30px;
background:#202834 url(https://static.igem.org/mediawiki/2010/4/42/Loading.gif) no-repeat 50% 50%;
background:#202834 url(https://static.igem.org/mediawiki/2010/4/42/Loading.gif) no-repeat 50% 50%;
-
-moz-box-shadow:0px 0px 10px #333;
 
-
-webkit-box-shadow:0px 0px 10px #333;
 
-
box-shadow:0px 0px 10px #333;
 
}
}
.nivoSlider img {
.nivoSlider img {
Line 141: Line 125:
.nivo-directionNav a {
.nivo-directionNav a {
display:block;
display:block;
-
width:30px;
+
width:25px;
-
height:30px;
+
height:50px;
background:url(https://static.igem.org/mediawiki/2010/f/f0/Arrows.png) no-repeat;
background:url(https://static.igem.org/mediawiki/2010/f/f0/Arrows.png) no-repeat;
text-indent:-9999px;
text-indent:-9999px;
Line 148: Line 132:
}
}
a.nivo-nextNav {
a.nivo-nextNav {
-
background-position:-30px 0;
+
background-position:-25px 0;
-
right:15px;
+
right:-1px;
}
}
a.nivo-prevNav {
a.nivo-prevNav {
-
left:15px;
+
left:-10px;
}
}
Line 181: Line 165:
#slider2 a {
#slider2 a {
-
display:block;
+
display:block; /* IE Fix */
}
}
-
#slider3 {
+
#slider {
margin-bottom:110px;
margin-bottom:110px;
}
}
-
#slider3 .nivo-controlNav {
+
#slider .nivo-controlNav {
position:absolute;
position:absolute;
left:29%;
left:29%;
-
bottom:-70px;
+
bottom:-60px;
}
}
-
#slider3 .nivo-controlNav img {
+
#slider .nivo-controlNav img {
display:inline;
display:inline;
position:relative;
position:relative;
Line 200: Line 184:
box-shadow:0px 0px 5px #333;
box-shadow:0px 0px 5px #333;
}
}
-
#slider3 .nivo-controlNav a.active img {
+
#slider .nivo-controlNav a.active img {
-moz-box-shadow:0px 0px 5px #fff;
-moz-box-shadow:0px 0px 5px #fff;
-webkit-box-shadow:0px 0px 5px #fff;
-webkit-box-shadow:0px 0px 5px #fff;
Line 252: Line 236:
cursor:pointer;
cursor:pointer;
}
}
 +
img {
img {
-ms-interpolation-mode:bicubic;
-ms-interpolation-mode:bicubic;
}
}
 +
img.alignright {float:right; margin:0 0 .7em 1em}
img.alignright {float:right; margin:0 0 .7em 1em}
Line 263: Line 249:
a img.alignleft {float:left; margin:0 1em .7em 0}
a img.alignleft {float:left; margin:0 1em .7em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
 +
.round5 { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.round5 { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
Line 270: Line 257:
.round25 { -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; }
.round25 { -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; }
.round30 { -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; }
.round30 { -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; }
-
 
#slider {
#slider {
Line 276: Line 262:
margin:20px 0 20px 0;
margin:20px 0 20px 0;
background:#202834 url(https://static.igem.org/mediawiki/2010/4/42/Loading.gif) no-repeat 50% 50%;
background:#202834 url(https://static.igem.org/mediawiki/2010/4/42/Loading.gif) no-repeat 50% 50%;
-
-moz-box-shadow:0px 0px 10px #333;
 
-
-webkit-box-shadow:0px 0px 10px #333;
 
-
box-shadow:0px 0px 10px #333;
 
}
}
#slider img {
#slider img {
Line 295: Line 278:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 +
<script src="https://static.igem.org/mediawiki/2010/2/28/Sliderpack.txt" type="text/javascript"></script>
 +
<script type="text/javascript">
<script type="text/javascript">
-
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(9($){$.1k.1o=9(2b){b 3=$.2g({},$.1k.1o.21,2b);N g.H(9(){b 4={f:0,u:\'\',W:0,r:\'\',L:n,1j:n,1S:n};b 5=$(g);5.1T(\'7:4\',4);5.e(\'2o\',\'2m\');5.1f(\'1o\');b d=5.2n();d.H(9(){b l=$(g);b 1t=\'\';6(!l.J(\'B\')){6(l.J(\'a\')){l.1f(\'7-2h\');1t=l}l=l.1m(\'B:1r\')}b 18=l.x();6(18==0)18=l.t(\'x\');b 1b=l.y();6(1b==0)1b=l.t(\'y\');6(18>5.x()){5.x(18)}6(1b>5.y()){5.y(1b)}6(1t!=\'\'){1t.e(\'P\',\'1q\')}l.e(\'P\',\'1q\');4.W++});6(3.19>0){6(3.19>=4.W)3.19=4.W-1;4.f=3.19}6($(d[4.f]).J(\'B\')){4.u=$(d[4.f])}k{4.u=$(d[4.f]).1m(\'B:1r\')}6($(d[4.f]).J(\'a\')){$(d[4.f]).e(\'P\',\'1A\')}5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\');23(b i=0;i<3.h;i++){b G=U.29(5.x()/3.h);6(i==3.h-1){5.O($(\'<D A="7-c"></D>\').e({2a:(G*i)+\'1c\',x:(5.x()-(G*i))+\'1c\'}))}k{5.O($(\'<D A="7-c"></D>\').e({2a:(G*i)+\'1c\',x:G+\'1c\'}))}}5.O($(\'<D A="7-K"><p></p></D>\').e({P:\'1q\',z:3.1U}));6(4.u.t(\'w\')!=\'\'){b w=4.u.t(\'w\');6(w.24(0,1)==\'#\')w=$(w).1d();$(\'.7-K p\',5).1d(w);$(\'.7-K\',5).1z(3.o)}b m=0;6(!3.1p&&d.1g>1){m=1E(9(){F(5,d,3,n)},3.1u)}6(3.S){5.O(\'<D A="7-S"><a A="7-27">2k</a><a A="7-25">2i</a></D>\');6(3.1R){$(\'.7-S\',5).26();5.1V(9(){$(\'.7-S\',5).2j()},9(){$(\'.7-S\',5).26()})}$(\'a.7-27\',5).1C(\'1F\',9(){6(4.L)N n;T(m);m=\'\';4.f-=2;F(5,d,3,\'1y\')});$(\'a.7-25\',5).1C(\'1F\',9(){6(4.L)N n;T(m);m=\'\';F(5,d,3,\'1x\')})}6(3.M){b 14=$(\'<D A="7-M"></D>\');5.O(14);23(b i=0;i<d.1g;i++){6(3.1P){b l=d.1B(i);6(!l.J(\'B\')){l=l.1m(\'B:1r\')}6(3.1O){14.O(\'<a A="7-1s" 1a="\'+i+\'"><B E="\'+l.t(\'1a\')+\'" 2e="" /></a>\')}k{14.O(\'<a A="7-1s" 1a="\'+i+\'"><B E="\'+l.t(\'E\').2l(3.1M,3.1N)+\'" 2e="" /></a>\')}}k{14.O(\'<a A="7-1s" 1a="\'+i+\'">\'+(i+1)+\'</a>\')}}$(\'.7-M a:1B(\'+4.f+\')\',5).1f(\'1h\');$(\'.7-M a\',5).1C(\'1F\',9(){6(4.L)N n;6($(g).2f(\'1h\'))N n;T(m);m=\'\';5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\');4.f=$(g).t(\'1a\')-1;F(5,d,3,\'1s\')})}6(3.1X){$(2s).2F(9(1D){6(1D.1Q==\'2D\'){6(4.L)N n;T(m);m=\'\';4.f-=2;F(5,d,3,\'1y\')}6(1D.1Q==\'2C\'){6(4.L)N n;T(m);m=\'\';F(5,d,3,\'1x\')}})}6(3.1W){5.1V(9(){4.1j=Q;T(m);m=\'\'},9(){4.1j=n;6(m==\'\'&&!3.1p){m=1E(9(){F(5,d,3,n)},3.1u)}})}5.2E(\'7:X\',9(){4.L=n;$(d).H(9(){6($(g).J(\'a\')){$(g).e(\'P\',\'1q\')}});6($(d[4.f]).J(\'a\')){$(d[4.f]).e(\'P\',\'1A\')}6(m==\'\'&&!4.1j&&!3.1p){m=1E(9(){F(5,d,3,n)},3.1u)}3.20.1w(g)})});9 F(5,d,3,17){b 4=5.1T(\'7:4\');6((!4||4.1S)&&!17)N n;3.1Y.1w(g);6(!17){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}k{6(17==\'1y\'){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}6(17==\'1x\'){5.e(\'11\',\'10(\'+4.u.t(\'E\')+\') Z-Y\')}}4.f++;6(4.f==4.W){4.f=0;3.2d.1w(g)}6(4.f<0)4.f=(4.W-1);6($(d[4.f]).J(\'B\')){4.u=$(d[4.f])}k{4.u=$(d[4.f]).1m(\'B:1r\')}6(3.M){$(\'.7-M a\',5).2B(\'1h\');$(\'.7-M a:1B(\'+4.f+\')\',5).1f(\'1h\')}6(4.u.t(\'w\')!=\'\'){b w=4.u.t(\'w\');6(w.24(0,1)==\'#\')w=$(w).1d();6($(\'.7-K\',5).e(\'P\')==\'1A\'){$(\'.7-K p\',5).2c(3.o,9(){$(g).1d(w);$(g).1z(3.o)})}k{$(\'.7-K p\',5).1d(w)}$(\'.7-K\',5).1z(3.o)}k{$(\'.7-K\',5).2c(3.o)}b i=0;$(\'.7-c\',5).H(9(){b G=U.29(5.x()/3.h);$(g).e({y:\'R\',z:\'0\',11:\'10(\'+4.u.t(\'E\')+\') Z-Y -\'+((G+(i*G))-G)+\'1c 0%\'});i++});6(3.j==\'1l\'){b V=2H 2G("1K","12","1H","1e","1G","13","1I","1v");4.r=V[U.22(U.1l()*(V.1g+1))];6(4.r==2I)4.r=\'1v\'}6(3.j.2p(\',\')!=-1){b V=3.j.2t(\',\');4.r=$.2A(V[U.22(U.1l()*V.1g)])}4.L=Q;6(3.j==\'2r\'||3.j==\'1K\'||4.r==\'1K\'||3.j==\'12\'||4.r==\'12\'){b q=0;b i=0;b h=$(\'.7-c\',5);6(3.j==\'12\'||4.r==\'12\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);c.e(\'1L\',\'R\');6(i==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'2q\'||3.j==\'1H\'||4.r==\'1H\'||3.j==\'1e\'||4.r==\'1e\'){b q=0;b i=0;b h=$(\'.7-c\',5);6(3.j==\'1e\'||4.r==\'1e\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);c.e(\'28\',\'R\');6(i==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'1G\'||3.j==\'2u\'||4.r==\'1G\'||3.j==\'13\'||4.r==\'13\'){b q=0;b i=0;b v=0;b h=$(\'.7-c\',5);6(3.j==\'13\'||4.r==\'13\')h=$(\'.7-c\',5).1n();h.H(9(){b c=$(g);6(i==0){c.e(\'1L\',\'R\');i++}k{c.e(\'28\',\'R\');i=0}6(v==3.h-1){I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({y:\'s%\',z:\'1.0\'},3.o)},(s+q))}q+=1i;v++})}k 6(3.j==\'1I\'||4.r==\'1I\'){b q=0;b i=0;$(\'.7-c\',5).H(9(){b c=$(g);b 1J=c.x();c.e({1L:\'R\',y:\'s%\',x:\'R\'});6(i==3.h-1){I(9(){c.C({x:1J,z:\'1.0\'},3.o,\'\',9(){5.16(\'7:X\')})},(s+q))}k{I(9(){c.C({x:1J,z:\'1.0\'},3.o)},(s+q))}q+=1i;i++})}k 6(3.j==\'1v\'||4.r==\'1v\'){b i=0;$(\'.7-c\',5).H(9(){$(g).e(\'y\',\'s%\');6(i==3.h-1){$(g).C({z:\'1.0\'},(3.o*2),\'\',9(){5.16(\'7:X\')})}k{$(g).C({z:\'1.0\'},(3.o*2))}i++})}}};$.1k.1o.21={j:\'1l\',h:15,o:2v,1u:2y,19:0,S:Q,1R:Q,M:Q,1P:n,1O:n,1M:\'.1Z\',1N:\'2x.1Z\',1X:Q,1W:Q,1p:n,1U:0.8,1Y:9(){},20:9(){},2d:9(){}};$.1k.1n=[].2w})(2z);',62,169,'|||settings|vars|slider|if|nivo||function||var|slice|kids|css|currentSlide|this|slices||effect|else|child|timer|false|animSpeed||timeBuff|randAnim|100|attr|currentImage||title|width|height|opacity|class|img|animate|div|src|nivoRun|sliceWidth|each|setTimeout|is|caption|running|controlNav|return|append|display|true|0px|directionNav|clearInterval|Math|anims|totalSlides|animFinished|repeat|no|url|background|sliceDownLeft|sliceUpDownLeft|nivoControl||trigger|nudge|childWidth|startSlide|rel|childHeight|px|html|sliceUpLeft|addClass|length|active|50|paused|fn|random|find|_reverse|nivoSlider|manualAdvance|none|first|control|link|pauseTime|fade|call|next|prev|fadeIn|block|eq|live|event|setInterval|click|sliceUpDown|sliceUpRight|fold|origWidth|sliceDownRight|top|controlNavThumbsSearch|controlNavThumbsReplace|controlNavThumbsFromRel|controlNavThumbs|keyCode|directionNavHide|stop|data|captionOpacity|hover|pauseOnHover|keyboardNav|beforeChange|jpg|afterChange|defaults|floor|for|substr|nextNav|hide|prevNav|bottom|round|left|options|fadeOut|slideshowEnd|alt|hasClass|extend|imageLink|Next|show|Prev|replace|relative|children|position|indexOf|sliceUp|sliceDown|window|split|sliceUpDownRight|500|reverse|_thumb|3000|jQuery|trim|removeClass|39|37|bind|keypress|Array|new|undefined'.split('|'),0,{}))
+
$(window).load(function() {
-
 
+
$('#slider').nivoSlider({
 +
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
 +
slices:3,
 +
animSpeed:500, //Slide transition speed
 +
pauseTime:8000,
 +
startSlide:0, //Set starting Slide (0 index)
 +
directionNav:true, //Next & Prev
 +
directionNavHide:false, //Only show on hover
 +
controlNav:true, //1,2,3...
 +
controlNavThumbs:true, //Use thumbnails for Control Nav
 +
      controlNavThumbsFromRel:true, //Use image rel for thumbs
 +
keyboardNav:true, //Use left & right arrows
 +
pauseOnHover:true, //Stop animation while hovering
 +
manualAdvance:false, //Force manual transitions
 +
captionOpacity:1, //Universal caption opacity
 +
beforeChange: function(){},
 +
afterChange: function(){},
 +
slideshowEnd: function(){} //Triggers after all slides have been shown
 +
});
 +
});
</script>
</script>
 +
</head>
</head>
</html>
</html>

Latest revision as of 00:21, 18 November 2010

Retrieved from "http://2010.igem.org/Team:Heidelberg/NivoSlider"