Team:Heidelberg/NivoSlider
From 2010.igem.org
(Difference between revisions)
(24 intermediate revisions not shown) | |||
Line 4: | Line 4: | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.nivoSlider { | .nivoSlider { | ||
position:relative; | position:relative; | ||
Line 25: | Line 12: | ||
left:0px; | left:0px; | ||
} | } | ||
- | + | ||
.nivoSlider a.nivo-imageLink { | .nivoSlider a.nivo-imageLink { | ||
position:absolute; | position:absolute; | ||
Line 38: | Line 25: | ||
display:none; | display:none; | ||
} | } | ||
- | + | ||
.nivo-slice { | .nivo-slice { | ||
display:block; | display:block; | ||
Line 45: | Line 32: | ||
height:100%; | height:100%; | ||
} | } | ||
- | + | ||
.nivo-caption { | .nivo-caption { | ||
position:absolute; | position:absolute; | ||
Line 53: | Line 40: | ||
color:#000; | color:#000; | ||
font-family:Calibri; | font-family:Calibri; | ||
- | opacity:0.8; | + | opacity:0.8; |
width:100%; | width:100%; | ||
z-index:89; | z-index:89; | ||
Line 67: | Line 54: | ||
display:none; | display:none; | ||
} | } | ||
- | + | ||
.nivo-directionNav a { | .nivo-directionNav a { | ||
position:absolute; | position:absolute; | ||
- | top: | + | top:40%; |
z-index:99; | z-index:99; | ||
cursor:pointer; | cursor:pointer; | ||
+ | display:block; | ||
+ | width:25px; | ||
+ | height:50px; | ||
+ | background:url(https://static.igem.org/mediawiki/2010/f/f0/Arrows.png) no-repeat; | ||
+ | text-indent:-9999px; | ||
+ | border:0; | ||
} | } | ||
- | .nivo- | + | a.nivo-nextNav { |
- | + | background-position:-25px 0; | |
- | + | ||
- | + | ||
right:0px; | right:0px; | ||
+ | } | ||
+ | a.nivo-prevNav { | ||
+ | left:0px; | ||
} | } | ||
/* Control nav styles (e.g. 1,2,3...) */ | /* Control nav styles (e.g. 1,2,3...) */ | ||
Line 90: | Line 84: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
#wrapper { | #wrapper { | ||
- | |||
margin:0 auto; | margin:0 auto; | ||
} | } | ||
Line 171: | Line 101: | ||
border:0; | border:0; | ||
} | } | ||
- | |||
- | |||
.nivoSlider { | .nivoSlider { | ||
Line 179: | 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%; | ||
- | |||
- | |||
- | |||
} | } | ||
.nivoSlider img { | .nivoSlider img { | ||
Line 194: | Line 119: | ||
#content { | #content { | ||
- | |||
margin:0 auto; | margin:0 auto; | ||
position:relative; | position:relative; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
.nivo-directionNav a { | .nivo-directionNav a { | ||
display:block; | display:block; | ||
- | width: | + | width:25px; |
- | height: | + | 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 212: | Line 132: | ||
} | } | ||
a.nivo-nextNav { | a.nivo-nextNav { | ||
- | background-position:- | + | background-position:-25px 0; |
- | right: | + | right:-1px; |
} | } | ||
a.nivo-prevNav { | a.nivo-prevNav { | ||
- | left: | + | left:-10px; |
} | } | ||
Line 248: | Line 168: | ||
} | } | ||
- | # | + | #slider { |
margin-bottom:110px; | margin-bottom:110px; | ||
} | } | ||
- | # | + | #slider .nivo-controlNav { |
position:absolute; | position:absolute; | ||
left:29%; | left:29%; | ||
- | bottom:- | + | bottom:-60px; |
} | } | ||
- | # | + | #slider .nivo-controlNav img { |
display:inline; | display:inline; | ||
position:relative; | position:relative; | ||
Line 264: | Line 184: | ||
box-shadow:0px 0px 5px #333; | box-shadow:0px 0px 5px #333; | ||
} | } | ||
- | # | + | #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 309: | Line 229: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.clear { | .clear { | ||
clear:both; | clear:both; | ||
Line 357: | Line 237: | ||
} | } | ||
- | + | ||
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} | ||
img.alignleft {float:left; margin:0 1em .7em 0} | img.alignleft {float:left; margin:0 1em .7em 0} | ||
Line 370: | Line 250: | ||
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; } | ||
.round10 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } | .round10 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } | ||
Line 377: | 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 387: | 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%; | ||
- | |||
- | |||
- | |||
} | } | ||
#slider img { | #slider img { | ||
Line 401: | Line 273: | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
<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"> | ||
- | + | $(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