User:ThomasU/slider2

From 2010.igem.org

(Difference between revisions)
Line 75: Line 75:
}
}
/* Control nav styles (e.g. 1,2,3...) */
/* Control nav styles (e.g. 1,2,3...) */
-
.nivo-controlNav {
 
-
position:absolute;
 
-
right:0px;
 
-
bottom:-30px;
 
-
}
 
.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;
 
}
}
 +
Line 184: Line 171:
}
}
-
#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:-70px;
}
}
-
#slider3 .nivo-controlNav img {
+
#slider .nivo-controlNav img {
display:inline;
display:inline;
position:relative;
position:relative;
Line 200: Line 187:
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 303: Line 290:
$(window).load(function() {
$(window).load(function() {
-
$('#slider').nivoSlider();
+
$('#slider').nivoSlider({
 +
    controlNavThumbs:true,
 +
    controlNavThumbsFromRel:true
 +
});
});
});
</script>
</script>
Line 311: Line 301:
<body>
<body>
<div id="slider">
<div id="slider">
-
<img src="https://static.igem.org/mediawiki/2010/7/71/Slider1.png" alt="" />
+
<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"/>
-
<a href="http://dev7studios.com"><img src="https://static.igem.org/mediawiki/2010/a/ae/Slider2.png" alt="" title="#htmlcaption" /></a>
+
<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>
-
<img src="https://static.igem.org/mediawiki/2010/8/8a/Slider3.png" alt="" title="This is an example of a caption" />
+
<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">

Revision as of 22:34, 18 October 2010

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