Template:WashUPhotoGallery

From 2012.igem.org

(Difference between revisions)
 
(42 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" />
-
/*
+
-
Featured Content Slider
+
-
by: Chris Coyier
+
-
*/
+
-
* { margin: 0; padding: 0; }
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-
body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
+
<script src="http://washuigemphotogallery.googlecode.com/files/galleria-1.2.7.min.js"></script>
 +
</head>
-
   
+
<body>
-
/*
+
-
UTILITY STYLES
+
-
*/    
+
-
   
+
-
.floatLeft { float: left; margin-right: 10px;}
+
-
.floatRight { float: right; }
+
-
.clear { clear: both; }
+
-
a { outline: none; }
+
 +
<!--Content Start-->
 +
    <div id="content1-topcenter">
-
/*
 
-
PAGE STRUCTURE
 
-
*/
 
-
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px; background: url(images/bg.png) top center; }
 
-
 
-
 
-
/*
 
-
TYPOGRAPHY
 
-
*/
 
-
ul { list-style: square inside; }
 
-
a, a:visited { color: #729dff; text-decoration: none; }
 
-
a:hover, a:active { color: white; }
 
-
blockquote { padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; font-family: Georgia, serif; font-style: italic; margin-top: 10px;}
 
-
 
-
/*
 
-
SLIDER
 
-
*/
 
-
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; }
 
-
.stripViewer .panelContainer
 
-
.panel ul { text-align: left; margin: 0 15px 0 30px; }
 
-
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
 
-
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
 
-
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
 
-
.stripNavL, .stripNavR, .stripNav { display: none; }
 
-
.nav-thumb { border: 1px solid black; margin-right: 5px; }
 
-
#movers-row { margin: -43px 0 0 62px; }
 
-
#movers-row div { width: 20%; float: left; }
 
-
#movers-row div a.cross-link { float: right; }
 
-
.photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 30px; margin-top: -50px; position: relative; z-index: 100; color: white; }
 
-
.photo-meta-data span { font-size: 13px; }
 
-
.cross-link { display: block; width: 62px; margin-top: -14px; position: relative; padding-top: 15px; z-index: 100; }
 
-
.active-thumb { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }
 
-
</style>
 
-
</head>
 
-
 
-
<body>
 
-
<div class="slider-wrap">
 
-
<div id="main-photo-slider" class="csw">
 
-
<div class="panelContainer">
 
-
<div class="panel" title="Panel 1">
 
-
<div class="wrapper">
 
-
<!-- REGULAR IMAGE PANEL -->
 
-
<img src="images/tempphoto-1.jpg" alt="temp" />
 
-
<div class="photo-meta-data">
 
-
Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
 
-
<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
 
-
</div>
 
-
</div>
 
-
</div>
 
-
<div class="panel" title="Panel 2">
 
-
<div class="wrapper">
 
-
<!-- PANEL CONTENT -->
 
-
</div>
 
-
</div>
 
-
<div class="panel" title="Panel 3">
 
-
<div class="wrapper">
 
-
<!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
 
-
<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
 
-
 
-
<h1>How to Cook a Scotch Egg</h1>
 
-
 
-
<ul>
 
-
<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
 
-
<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
 
-
<li>1/2 cup AP flour</li>
 
-
<li>1-2 eggs, beaten</li>
 
-
<li>3/4 cup panko-style bread crumbs</li>
 
-
<li>Vegetable oil for frying</li>
 
-
</ul>
 
-
</div>
 
-
</div>
 
-
<div class="panel" title="Panel 4">
 
-
<div class="wrapper">
 
-
<!-- PANEL CONTENT -->
 
-
</div>
 
-
</div>
 
-
<div class="panel" title="Panel 5">
 
-
<div class="wrapper">
 
-
<!-- PANEL CONTENT -->
 
-
</div>
 
-
</div>
 
-
<div class="panel" title="Panel 6">
 
-
<div class="wrapper">
 
-
<!-- PANEL CONTENT -->
 
-
</div>
 
-
</div>
 
-
</div>
+
        <div id="galleria">
-
</div>
+
            <img src="https://lh3.googleusercontent.com/-wRfqEDxRJM4/T-yvPE9SkVI/AAAAAAAAANU/FKW9buabxH4/s800/P1050501.JPG">
 +
            <img src="https://lh3.googleusercontent.com/-4OxZtCS6lX4/T_WTV9vubmI/AAAAAAAAARI/Im7ADpihvWs/s800/P1050634.JPG">
 +
            <img src="https://lh5.googleusercontent.com/-xb_QasdnsjA/UCLjx-nv-nI/AAAAAAAAAfM/j6PgaP_lcnQ/s800/P1060020.JPG">
 +
            <img src="https://lh5.googleusercontent.com/-6fFuhw2-sf4/T-ywtnqKqbI/AAAAAAAAANs/wN9aqfgc2to/s800/20120620_180232.jpg">
 +
            <img src="https://lh6.googleusercontent.com/-o770FjmW2oI/T-zOwxyS6mI/AAAAAAAAAP0/XSQfCEzgEdY/s800/P1050550.jpg">
 +
            <img src="https://lh5.googleusercontent.com/-vunnaspAM3Y/UCvzDHzp7EI/AAAAAAAAAg8/Nbei_G9KGWo/s800/P1050993.JPG">
 +
            <img src="https://lh4.googleusercontent.com/-5UrHwTMRPiM/UCvyrIlsayI/AAAAAAAAAhc/CKYZHdMvoFo/s800/P1060127.JPG">
 +
        </div>
-
<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
+
<script>
-
          AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
+
    Galleria.loadTheme('http://washuigemphotogallery.googlecode.com/files/galleria.classic.min.js');
 +
    Galleria.run('#galleria', {
 +
imageCrop:'landscape',
 +
transition: 'fade',
 +
lightbox: true,
 +
autoplay: 5000
 +
});
-
<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
+
</script>
-
<div id="movers-row">
+
-
<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
+
-
<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
+
-
<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
+
-
<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
+
-
<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
+
-
</div>
+
-
</div>
 
</body>
</body>
</html>
</html>

Latest revision as of 19:55, 15 August 2012

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