Team:Copenhagen/Header

From 2012.igem.org

(Difference between revisions)
Line 23: Line 23:
#graa {background-color:#999999;}
#graa {background-color:#999999;}
-
#s3slider {
+
/*
-
  width: 400px; /* important to be same as image width */
+
* jQuery Nivo Slider v2.6
-
  height: 300px; /* important to be same as image height */
+
* http://nivo.dev7studios.com
-
  position: relative; /* important */
+
*
-
  overflow: hidden; /* important */
+
* Copyright 2011, Gilbert Pellegrom
 +
* Free to use and abuse under the MIT license.
 +
* http://www.opensource.org/licenses/mit-license.php
 +
*  
 +
* March 2010
 +
*/
 +
 +
 +
/* The Nivo Slider styles */
 +
.nivoSlider {
 +
position:relative;
 +
        effect: 'fade'
}
}
-
 
+
.nivoSlider img {
-
#s3sliderContent {
+
position:absolute;
-
  width: 400px; /* important to be same as image width or wider */
+
top:0px;
-
  position: absolute; /* important */
+
left:0px;
-
  top: 0; /* important */
+
}
-
  margin-left: 0; /* important */
+
/* If an image is wrapped in a link */
 +
.nivoSlider a.nivo-imageLink {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:100%;
 +
height:100%;
 +
border:0;
 +
padding:0;
 +
margin:0;
 +
z-index:6;
 +
display:none;
 +
}
 +
/* The slices and boxes in the Slider */
 +
.nivo-slice {
 +
display:block;
 +
position:absolute;
 +
z-index:5;
 +
height:100%;
 +
}
 +
.nivo-box {
 +
display:block;
 +
position:absolute;
 +
z-index:5;
 +
}
 +
/* Caption styles */
 +
.nivo-caption {
 +
position:absolute;
 +
left:0px;
 +
bottom:0px;
 +
background:#000;
 +
color:#fff;
 +
opacity:0.8; /* Overridden by captionOpacity setting */
 +
width:100%;
 +
z-index:8;
 +
}
 +
.nivo-caption p {
 +
padding:5px;
 +
margin:0;
 +
}
 +
.nivo-caption a {
 +
display:inline !important;
 +
}
 +
.nivo-html-caption {
 +
    display:none;
 +
}
 +
/* Direction nav styles (e.g. Next & Prev) */
 +
.nivo-directionNav a {
 +
position:absolute;
 +
top:45%;
 +
z-index:9;
 +
cursor:pointer;
 +
}
 +
.nivo-prevNav {
 +
left:15px;
 +
}
 +
.nivo-nextNav {
 +
right:15px;
 +
}
 +
/* Control nav styles (e.g. 1,2,3...) */
 +
.theme-default .nivo-controlNav {
 +
      position:absolute; left:100%; bottom:-42px;
 +
      margin-left: -1000px;
}
}
-
.s3sliderImage {
+
.nivo-controlNav a {
-
  float: left; /* important */
+
position:relative;
-
  position: relative; /* important */
+
z-index:9;
-
  display: none; /* important */
+
cursor:pointer;
}
}
-
.s3sliderImage span {
 
-
  position: absolute; /* important */
 
-
  left: 0;
 
-
  font: 10px/15px Arial, Helvetica, sans-serif;
 
-
  padding: 10px 13px;
 
-
  width: 374px;
 
-
  background-color: #000;
 
-
  filter: alpha(opacity=70); /* here you can set the opacity of box with text */
 
-
  -moz-opacity: 0.7; /* here you can set the opacity of box with text */
 
-
  -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
 
-
  opacity: 0.7; /* here you can set the opacity of box with text */
 
-
  color: #fff;
 
-
  display: none; /* important */
 
-
  top: 0;
 
-
  /*
 
-
      if you put
 
-
      top: 0; -> the box with text will be shown at the top of the image
 
-
      if you put
 
-
      bottom: 0; -> the box with text will be shown at the bottom of the image
 
-
  */
 
-
}
 
-
.clear {
+
.nivo-controlNav a.active {
-
  clear: both;
+
font-weight:bold;
}
}
-
$(document).ready(function() {
+
.theme-default #slider {
-
  $('#s3slider').s3Slider({  
+
    margin:0px auto 0px auto;
-
      timeOut: 4000
+
    width:618px; /* Make sure your images are the same size */
-
  });
+
    height:464px; /* Make sure your images are the same size */
-
});
+
}
-
 
+
</style>
</style>

Revision as of 10:07, 30 July 2012

Retrieved from "http://2012.igem.org/Team:Copenhagen/Header"