Team:Queens Canada/SynthetiQ/DNA
From 2012.igem.org
(Difference between revisions)
Line 8: | Line 8: | ||
.nivoSlider { | .nivoSlider { | ||
position:relative; | position:relative; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
.nivoSlider img { | .nivoSlider img { | ||
Line 19: | Line 13: | ||
top:0px; | top:0px; | ||
left:0px; | left:0px; | ||
- | |||
} | } | ||
- | .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- | + | /* The slices in the Slider */ |
+ | .nivo-slice { | ||
display:block; | display:block; | ||
- | + | position:absolute; | |
- | + | z-index:50; | |
- | + | height:100%; | |
- | + | ||
- | + | ||
} | } | ||
- | + | /* 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:89; | ||
} | } | ||
- | + | .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:99; | ||
+ | cursor:pointer; | ||
} | } | ||
- | + | .nivo-prevNav { | |
- | + | left:0px; | |
- | + | ||
} | } | ||
- | + | .nivo-nextNav { | |
- | + | right:0px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | /* Control nav styles (e.g. 1,2,3...) */ | |
- | + | .nivo-controlNav a { | |
position:relative; | position:relative; | ||
- | + | z-index:99; | |
- | + | cursor:pointer; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .nivo-controlNav a.active { | |
- | - | + | font-weight:bold; |
- | + | ||
- | + | ||
} | } | ||
- | |||
</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