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...")
 
(44 intermediate revisions not shown)
Line 1: Line 1:
 +
{{WashUPhotoGallerycss}}
 +
<!--Credit to UIUC Illinois iGEM 2012 for their implementation of an idea that we wanted to do. Their site inspired us to work harder and figure out how to do this ourselves.-->
<html>
<html>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
<head>
-
<style type = "text/css>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
body {margin:0; background:#111; padding:5px; font:11px Verdana,Arial}
+
 
-
#slideshow {list-style:none; color:#fff}
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-
#slideshow span {display:none}
+
<script src="http://washuigemphotogallery.googlecode.com/files/galleria-1.2.7.min.js"></script>
-
#wrapper {width:506px; margin:50px auto; display:none}
+
</head>
-
#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>
-
<body>
+
 
-
<ul id="slideshow">
+
<!--Content Start-->
-
<li>
+
    <div id="content1-topcenter">
-
<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>
+
        <div id="galleria">
-
</li>
+
            <img src="https://lh3.googleusercontent.com/-wRfqEDxRJM4/T-yvPE9SkVI/AAAAAAAAANU/FKW9buabxH4/s800/P1050501.JPG">
-
<li>
+
            <img src="https://lh3.googleusercontent.com/-4OxZtCS6lX4/T_WTV9vubmI/AAAAAAAAARI/Im7ADpihvWs/s800/P1050634.JPG">
-
<h3>Sea Turtle</h3>
+
            <img src="https://lh5.googleusercontent.com/-xb_QasdnsjA/UCLjx-nv-nI/AAAAAAAAAfM/j6PgaP_lcnQ/s800/P1060020.JPG">
-
<span>photos/sea-turtle.jpg</span>
+
            <img src="https://lh5.googleusercontent.com/-6fFuhw2-sf4/T-ywtnqKqbI/AAAAAAAAANs/wN9aqfgc2to/s800/20120620_180232.jpg">
-
<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="https://lh6.googleusercontent.com/-o770FjmW2oI/T-zOwxyS6mI/AAAAAAAAAP0/XSQfCEzgEdY/s800/P1050550.jpg">
-
<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
+
            <img src="https://lh5.googleusercontent.com/-vunnaspAM3Y/UCvzDHzp7EI/AAAAAAAAAg8/Nbei_G9KGWo/s800/P1050993.JPG">
-
</li>
+
            <img src="https://lh4.googleusercontent.com/-5UrHwTMRPiM/UCvyrIlsayI/AAAAAAAAAhc/CKYZHdMvoFo/s800/P1060127.JPG">
-
<li>
+
        </div>
-
<h3>Red Coral</h3>
+
 
-
<span>photos/red-coral.jpg</span>
+
<script>
-
<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>
+
    Galleria.loadTheme('http://washuigemphotogallery.googlecode.com/files/galleria.classic.min.js');
-
<a href="#"><img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
+
    Galleria.run('#galleria', {
-
</li>
+
imageCrop:'landscape',
-
<li>
+
transition: 'fade',
-
<h3>Coral Reef</h3>
+
lightbox: true,
-
<span>photos/coral-reef.jpg</span>
+
autoplay: 5000
-
<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>
</script>
 +
</body>
</body>
</html>
</html>

Latest revision as of 19:55, 15 August 2012

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