Team:Queens Canada/SynthetiQ/DNA

From 2012.igem.org

(Difference between revisions)
Line 8: Line 8:
.nivoSlider {
.nivoSlider {
position:relative;
position:relative;
-
min-height:220px;
 
-
margin:30px 30px 60px 30px;
 
-
background:#202834 url(images/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 19: Line 13:
top:0px;
top:0px;
left:0px;
left:0px;
-
display:none;
 
}
}
-
.nivoSlider a {
+
/* If an image is wrapped in a link */
 +
.nivoSlider a.nivo-imageLink {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:100%;
 +
height:100%;
border:0;
border:0;
 +
padding:0;
 +
margin:0;
 +
z-index:60;
 +
display:none;
}
}
-
.nivo-directionNav a {
+
/* The slices in the Slider */
 +
.nivo-slice {
display:block;
display:block;
-
width:30px;
+
position:absolute;
-
height:30px;
+
z-index:50;
-
background:url(images/arrows.png) no-repeat;
+
height:100%;
-
text-indent:-9999px;
+
-
border:0;
+
}
}
-
a.nivo-nextNav {
+
/* Caption styles */
-
background-position:-30px 0;
+
.nivo-caption {
-
right:15px;
+
position:absolute;
 +
left:0px;
 +
bottom:0px;
 +
background:#000;
 +
color:#fff;
 +
opacity:0.8; /* Overridden by captionOpacity setting */
 +
width:100%;
 +
z-index:89;
}
}
-
a.nivo-prevNav {
+
.nivo-caption p {
-
left:15px;
+
padding:5px;
 +
margin:0;
}
}
-
 
+
.nivo-caption a {
-
#slider1 .nivo-controlNav,
+
display:inline !important;
-
#slider2 .nivo-controlNav,
+
-
#slider4 .nivo-controlNav {
+
-
position:absolute;
+
-
left:47%;
+
-
bottom:-30px;
+
}
}
-
#slider1 .nivo-controlNav a,
+
.nivo-html-caption {
-
#slider2 .nivo-controlNav a,
+
    display:none;
-
#slider4 .nivo-controlNav a {
+
-
display:block;
+
-
width:10px;
+
-
height:10px;
+
-
background:url(images/bullets.png) no-repeat;
+
-
text-indent:-9999px;
+
-
border:0;
+
-
margin-right:3px;
+
-
float:left;
+
}
}
-
#slider1 .nivo-controlNav a.active,
+
/* Direction nav styles (e.g. Next & Prev) */
-
#slider2 .nivo-controlNav a.active,
+
.nivo-directionNav a {
-
#slider4 .nivo-controlNav a.active {
+
position:absolute;
-
background-position:-10px 0;
+
top:45%;
 +
z-index:99;
 +
cursor:pointer;
}
}
-
 
+
.nivo-prevNav {
-
#slider2 a {
+
left:0px;
-
display:block; /* IE Fix */
+
}
}
-
 
+
.nivo-nextNav {
-
#slider3 {
+
right:0px;
-
margin-bottom:110px;
+
-
}
+
-
#slider3 .nivo-controlNav {
+
-
position:absolute;
+
-
left:29%;
+
-
bottom:-70px;
+
}
}
-
#slider3 .nivo-controlNav img {
+
/* Control nav styles (e.g. 1,2,3...) */
-
display:inline;
+
.nivo-controlNav a {
position:relative;
position:relative;
-
margin-right:10px;
+
z-index:99;
-
-moz-box-shadow:0px 0px 5px #333;
+
cursor:pointer;
-
-webkit-box-shadow:0px 0px 5px #333;
+
-
box-shadow:0px 0px 5px #333;
+
}
}
-
#slider3 .nivo-controlNav a.active img {
+
.nivo-controlNav a.active {
-
-moz-box-shadow:0px 0px 5px #fff;
+
font-weight:bold;
-
-webkit-box-shadow:0px 0px 5px #fff;
+
-
box-shadow:0px 0px 5px #fff;
+
}
}
-
 
</style>
</style>
-
 
+
<script type="text/javascript">
 +
$(window).load(function() {
 +
$('#slider').nivoSlider();
 +
});
 +
</script>
</head>
</head>
<body>
<body>
<div id="content2">
<div id="content2">
-
 
+
<div id="slider">
 +
<img src="http://www.flickr.com/photos/80048659@N02/7366464440/" alt="" />
 +
<a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
 +
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
 +
<img src="images/slide4.jpg" alt="" />
 +
</div>
 +
<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>.
 +
</div>
<script type="text/javascript">
<script type="text/javascript">
$(window).load(function() {
$(window).load(function() {

Revision as of 14:22, 13 June 2012
Control
This is an example of a HTML caption with a link.

Retrieved from "http://2012.igem.org/Team:Queens_Canada/SynthetiQ/DNA"