User:ThomasU/slider2

From 2010.igem.org

(Difference between revisions)
 
(7 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:Heidelberg/Double}}
 +
{{:Team:Heidelberg/NivoSlider}}
 +
{{:Team:Heidelberg/Pagetop|Slider}}
 +
<html>
<html>
-
<head>
 
-
 
-
<style type="text/css">
 
-
 
-
.nivoSlider {
 
-
position:relative;
 
-
}
 
-
.nivoSlider img {
 
-
position:absolute;
 
-
top:0px;
 
-
left:0px;
 
-
}
 
-
 
-
.nivoSlider a.nivo-imageLink {
 
-
position:absolute;
 
-
top:0px;
 
-
left:0px;
 
-
width:100%;
 
-
height:100%;
 
-
border:0;
 
-
padding:0;
 
-
margin:0;
 
-
z-index:60;
 
-
display:none;
 
-
}
 
-
 
-
.nivo-slice {
 
-
display:block;
 
-
position:absolute;
 
-
z-index:50;
 
-
height:100%;
 
-
}
 
-
 
-
.nivo-caption {
 
-
position:absolute;
 
-
left:0px;
 
-
bottom:0px;
 
-
background:none;
 
-
color:#000;
 
-
font-family:Calibri;
 
-
opacity:0.8;
 
-
width:100%;
 
-
z-index:89;
 
-
}
 
-
.nivo-caption p {
 
-
padding:5px;
 
-
margin:0;
 
-
}
 
-
.nivo-caption a {
 
-
display:inline !important;
 
-
}
 
-
.nivo-html-caption {
 
-
    display:none;
 
-
}
 
-
 
-
.nivo-directionNav a {
 
-
position:absolute;
 
-
top:45%;
 
-
z-index:99;
 
-
cursor:pointer;
 
-
display:block;
 
-
width:32px;
 
-
height:34px;
 
-
background:url(https://static.igem.org/mediawiki/2010/f/f0/Arrows.png) no-repeat;
 
-
text-indent:-9999px;
 
-
border:0;
 
-
}
 
-
a.nivo-nextNav {
 
-
background-position:-32px 0;
 
-
right:10px;
 
-
}
 
-
a.nivo-prevNav {
 
-
left:10px;
 
-
}
 
-
/* Control nav styles (e.g. 1,2,3...) */
 
-
.nivo-controlNav a {
 
-
position:relative;
 
-
z-index:99;
 
-
cursor:pointer;
 
-
}
 
-
.nivo-controlNav a.active {
 
-
font-weight:bold;
 
-
}
 
-
 
-
 
-
 
-
#wrapper {
 
-
margin:0 auto;
 
-
}
 
-
 
-
a#dev7link {
 
-
display:block;
 
-
width:78px;
 
-
height:73px;
 
-
background:url(../images/dev7.png) no-repeat;
 
-
position:absolute;
 
-
top:0px;
 
-
left:50px;
 
-
text-indent:-9999px;
 
-
border:0;
 
-
}
 
-
 
-
.nivoSlider {
 
-
position:relative;
 
-
min-height:220px;
 
-
margin:30px 30px 60px 30px;
 
-
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 {
 
-
position:absolute;
 
-
top:0px;
 
-
left:0px;
 
-
display:none;
 
-
}
 
-
.nivoSlider a {
 
-
border:0;
 
-
}
 
-
 
-
#content {
 
-
margin:0 auto;
 
-
position:relative;
 
-
}
 
-
 
-
.nivo-directionNav a {
 
-
display:block;
 
-
width:30px;
 
-
height:30px;
 
-
background:url(https://static.igem.org/mediawiki/2010/f/f0/Arrows.png) no-repeat;
 
-
text-indent:-9999px;
 
-
border:0;
 
-
}
 
-
a.nivo-nextNav {
 
-
background-position:-30px 0;
 
-
right:15px;
 
-
}
 
-
a.nivo-prevNav {
 
-
left:15px;
 
-
}
 
-
 
-
#slider1 .nivo-controlNav,
 
-
#slider2 .nivo-controlNav,
 
-
#slider4 .nivo-controlNav {
 
-
position:absolute;
 
-
left:47%;
 
-
bottom:-30px;
 
-
}
 
-
#slider1 .nivo-controlNav a,
 
-
#slider2 .nivo-controlNav a,
 
-
#slider4 .nivo-controlNav a {
 
-
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;
 
-
}
 
-
#slider1 .nivo-controlNav a.active,
 
-
#slider2 .nivo-controlNav a.active,
 
-
#slider4 .nivo-controlNav a.active {
 
-
background-position:-10px 0;
 
-
}
 
-
 
-
#slider2 a {
 
-
display:block; /* IE Fix */
 
-
}
 
-
 
-
#slider {
 
-
margin-bottom:110px;
 
-
}
 
-
#slider .nivo-controlNav {
 
-
position:absolute;
 
-
left:29%;
 
-
bottom:-70px;
 
-
}
 
-
#slider .nivo-controlNav img {
 
-
display:inline;
 
-
position:relative;
 
-
margin-right:10px;
 
-
-moz-box-shadow:0px 0px 5px #333;
 
-
-webkit-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;
 
-
-webkit-box-shadow:0px 0px 5px #fff;
 
-
box-shadow:0px 0px 5px #fff;
 
-
}
 
-
 
-
#carbonads-container {
 
-
    position:fixed;
 
-
    top:10px;
 
-
    right:10px;
 
-
    background:#15191F;
 
-
    padding:15px;
 
-
    -moz-border-radius:5px;
 
-
-webkit-border-radius:5px;
 
-
border-radius:5px;
 
-
}
 
-
#carbonads-container .carbonad {
 
-
    background:transparent !important;
 
-
    border:0 !important;
 
-
    width:130px !important;
 
-
    height:auto !important;
 
-
}
 
-
#carbonads-container img,
 
-
#carbonads-container span {
 
-
    margin:0 0 8px 0 !important;
 
-
}
 
-
#carbonads-container span.carbonad-text {
 
-
    color:#A7B0BF !important;
 
-
}
 
-
#carbonads-container span.carbonad-text a {
 
-
    border:0; !important;
 
-
}
 
-
#carbonads-container span.carbonad-tag {
 
-
    display:block;
 
-
    float:none !important;
 
-
    margin:0 !important;
 
-
    font-style:italic !important;
 
-
    text-align:right !important;
 
-
    color:#5F6C7F !important;
 
-
}
 
-
#carbonads-container span.carbonad-tag a {
 
-
    color:#5F6C7F !important;
 
-
    border:0 !important;
 
-
}
 
-
 
-
.clear {
 
-
clear:both;
 
-
}
 
-
 
-
.pointer {
 
-
cursor:pointer;
 
-
}
 
-
 
-
 
-
img {
 
-
-ms-interpolation-mode:bicubic;
 
-
}
 
-
 
-
 
-
img.alignright {float:right; margin:0 0 .7em 1em}
 
-
img.alignleft {float:left; margin:0 1em .7em 0}
 
-
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
 
-
a img.alignright {float:right; margin:0 0 .7em 1em}
 
-
a img.alignleft {float:left; margin:0 1em .7em 0}
 
-
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
 
-
 
-
 
-
.round5 { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
 
-
.round10 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
 
-
.round15 { -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; }
 
-
.round20 { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; }
 
-
.round25 { -moz-border-radius:25px; -webkit-border-radius:25px; border-radius:25px; }
 
-
.round30 { -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; }
 
-
 
-
#slider {
 
-
position:relative;
 
-
margin:20px 0 20px 0;
 
-
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 {
 
-
position:absolute;
 
-
top:0px;
 
-
left:0px;
 
-
display:none;
 
-
}
 
-
#slider a {
 
-
border:0;
 
-
}
 
-
 
-
 
-
 
-
</style>
 
-
 
-
<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">
 
-
 
-
 
-
$(window).load(function() {
 
-
$('#slider').nivoSlider({
 
-
    controlNavThumbs:true,
 
-
    controlNavThumbsFromRel:true
 
-
});
 
-
});
 
-
</script>
 
-
 
-
</head>
 
<body>
<body>
<div id="slider">
<div id="slider">
-
<img src="https://static.igem.org/mediawiki/2010/7/71/Slider1.png" alt="" rel="https://static.igem.org/mediawiki/2010/a/ab/Slider1_thumb.png"/>
+
<img src="https://static.igem.org/mediawiki/2010/e/ed/Slide_CapShuffling.png" alt="" rel="https://static.igem.org/mediawiki/2010/3/30/Slide_CapShuffling_thumb.png"/>
-
<a href="http://dev7studios.com"><img src="https://static.igem.org/mediawiki/2010/a/ae/Slider2.png" alt="" rel="https://static.igem.org/mediawiki/2010/6/69/Slider2_thumb.png" title="#htmlcaption" /></a>
+
<a href="#"><img src="https://static.igem.org/mediawiki/2010/f/fc/Bioinfo.png" alt="" rel="https://static.igem.org/mediawiki/2010/0/0d/Bioinfo_thumb.png"/></a>
-
<img src="https://static.igem.org/mediawiki/2010/8/8a/Slider3.png" alt="" rel="https://static.igem.org/mediawiki/2010/0/0a/Slider3_thumb.png" title="This is an example of a caption" />
+
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<div id="htmlcaption" class="nivo-html-caption">
     <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
     <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
-
 
+
<br><br><br><br>
-
 
+
<p>blabla</p>
-
 
+
-
 
+
-
 
+
-
 
+
</body>
</body>
</html>
</html>
 +
 +
{{:Team:Heidelberg/Pagemiddle}}
 +
{{:Team:Heidelberg/Bottom}}

Latest revision as of 15:43, 27 October 2010

This is an example of a HTML caption with a link.




blabla

Retrieved from "http://2010.igem.org/User:ThomasU/slider2"