Template:WashUPhotoGallery

From 2012.igem.org

(Difference between revisions)
 
(40 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; }
 
-
/*
+
        <div id="galleria">
-
TYPOGRAPHY
+
            <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">
-
ul { list-style: square inside; }
+
            <img src="https://lh5.googleusercontent.com/-xb_QasdnsjA/UCLjx-nv-nI/AAAAAAAAAfM/j6PgaP_lcnQ/s800/P1060020.JPG">
-
a, a:visited { color: #729dff; text-decoration: none; }
+
            <img src="https://lh5.googleusercontent.com/-6fFuhw2-sf4/T-ywtnqKqbI/AAAAAAAAANs/wN9aqfgc2to/s800/20120620_180232.jpg">
-
a:hover, a:active { color: white; }
+
            <img src="https://lh6.googleusercontent.com/-o770FjmW2oI/T-zOwxyS6mI/AAAAAAAAAP0/XSQfCEzgEdY/s800/P1050550.jpg">
-
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;}
+
            <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>
-
/*
+
<script>
-
SLIDER
+
    Galleria.loadTheme('http://washuigemphotogallery.googlecode.com/files/galleria.classic.min.js');
-
*/
+
    Galleria.run('#galleria', {
-
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; }
+
imageCrop:'landscape',
-
.stripViewer .panelContainer
+
transition: 'fade',
-
.panel ul { text-align: left; margin: 0 15px 0 30px; }
+
lightbox: true,
-
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
+
autoplay: 5000
-
.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>
+
-
<script type="text/javascript" src="https://2012.igem.org/Template:WashU1.2.6"></script>
+
-
<script type="text/javascript" src="https://2012.igem.org/Template:WashU1.3"></script>
+
-
<script type="text/javascript" src="https://2012.igem.org/Template:WashU1.2"></script>
+
-
<script type="text/javascript" src="https://2012.igem.org/Template:WashUcoda-slider"></script>
+
-
+
-
<script type="text/javascript">
+
-
$(function(){
+
-
+
-
$("#main-photo-slider").codaSlider();
+
-
});
 
</script>
</script>
-
</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>
 
-
 
-
<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
 
-
          AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
 
-
 
-
<a href="#1" class="cross-link active-thumb"><img src="https://lh3.googleusercontent.com/-isttUszXwEc/T9YLHslO0JI/AAAAAAAAAB4/39xJI1mH57k/s640/P1050389.JPG" class="nav-thumb" alt="temp-thumb" /></a>
 
-
<div id="movers-row">
 
-
<div><a href="#2" class="cross-link"><img src="https://2012.igem.org/Team:WashU/Team/Caleb"><img height=150px width=150px src="http://www.follybeach.com/Dolphin-face.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
 
-
<div><a href="#3" class="cross-link"><img src="http://25.media.tumblr.com/tumblr_m0gr8dHPbM1r837azo1_400.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"