Template:WashUPhotoGallery

From 2012.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style type = "text/css> body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial} #slideshow {list-style:none; color:#fff} #slideshow span {display:no...")
(Blanked the page)
Line 1: Line 1:
-
<html>
+
 
-
<head>
+
-
<style type = "text/css>
+
-
body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial}
+
-
#slideshow {list-style:none; color:#fff}
+
-
#slideshow span {display:none}
+
-
#wrapper {width:506px; margin:50px auto; display:none}
+
-
#wrapper * {margin:0; padding:0}
+
-
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
+
-
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
+
-
#information h3 {padding:4px 8px 3px; font-size:14px}
+
-
#information p {padding:0 8px 8px}
+
-
#image {width:500px}
+
-
#image img {position:absolute; z-index:25; width:auto}
+
-
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
+
-
#imgprev {left:0; background:url(images/left.gif) left center no-repeat}
+
-
#imgnext {right:0; background:url(images/right.gif) right center no-repeat}
+
-
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
+
-
.linkhover {background:url(images/link.gif) center center no-repeat}
+
-
#thumbnails {margin-top:15px}
+
-
#slideleft {float:left; width:20px; height:81px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#222}
+
-
#slideleft:hover {background-color:#333}
+
-
#slideright {float:right; width:20px; height:81px; background:#222 url(images/scroll-right.gif) center center no-repeat}
+
-
#slideright:hover {background-color:#333}
+
-
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
+
-
#slider {position:absolute; left:0; height:81px}
+
-
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
+
-
</style>
+
-
<body>
+
-
<body>
+
-
<ul id="slideshow">
+
-
<li>
+
-
<h3>TinySlideshow v1</h3>
+
-
<span>photos/orange-fish.jpg</span>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
+
-
<a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
+
-
</li>
+
-
<li>
+
-
<h3>Sea Turtle</h3>
+
-
<span>photos/sea-turtle.jpg</span>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
+
-
<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
+
-
</li>
+
-
<li>
+
-
<h3>Red Coral</h3>
+
-
<span>photos/red-coral.jpg</span>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
+
-
<a href="#"><img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
+
-
</li>
+
-
<li>
+
-
<h3>Coral Reef</h3>
+
-
<span>photos/coral-reef.jpg</span>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
+
-
<a href="#"><img src="thumbnails/coral-reef-thumb.jpg" alt="Coral Reef" /></a>
+
-
</li>
+
-
<li>
+
-
<h3>Blue Fish</h3>
+
-
<span>photos/blue-fish.jpg</span>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
+
-
<img src="thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
+
-
</li>
+
-
<li>
+
-
<h3>TinySlideshow v.2</h3>
+
-
<span>photos/yellow-fish.jpg</span>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
+
-
<a href="#"><img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
+
-
</li>
+
-
<li>
+
-
<h3>Squid</h3>
+
-
<span>photos/squid.jpg</span>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
+
-
<a href="#"><img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a>
+
-
</li>
+
-
<li>
+
-
<h3>Small Fish</h3>
+
-
<span>photos/small-fish.jpg</span>
+
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
+
-
<a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
+
-
</li>
+
-
</ul>
+
-
<div id="wrapper">
+
-
<div id="fullsize">
+
-
<div id="imgprev" class="imgnav" title="Previous Image"></div>
+
-
<div id="imglink"></div>
+
-
<div id="imgnext" class="imgnav" title="Next Image"></div>
+
-
<div id="image"></div>
+
-
<div id="information">
+
-
<h3></h3>
+
-
<p></p>
+
-
</div>
+
-
</div>
+
-
<div id="thumbnails">
+
-
<div id="slideleft" title="Slide Left"></div>
+
-
<div id="slidearea">
+
-
<div id="slider"></div>
+
-
</div>
+
-
<div id="slideright" title="Slide Right"></div>
+
-
</div>
+
-
</div>
+
-
<script type="text/javascript" src="compressed.js"></script>
+
-
<script type="text/javascript">
+
-
$('slideshow').style.display='none';
+
-
$('wrapper').style.display='block';
+
-
var slideshow=new TINY.slideshow("slideshow");
+
-
window.onload=function(){
+
-
slideshow.auto=true;
+
-
slideshow.speed=5;
+
-
slideshow.link="linkhover";
+
-
slideshow.info="information";
+
-
slideshow.thumbs="slider";
+
-
slideshow.left="slideleft";
+
-
slideshow.right="slideright";
+
-
slideshow.scrollSpeed=4;
+
-
slideshow.spacing=5;
+
-
slideshow.active="#fff";
+
-
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
+
-
}
+
-
</script>
+
-
</body>
+
-
</html>
+

Revision as of 20:28, 27 June 2012

Retrieved from "http://2012.igem.org/Template:WashUPhotoGallery"