Template:WashUPhotoGallery

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<style type = "text/css">
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
/*
+
-
Featured Content Slider
+
-
by: Chris Coyier
+
-
*/
+
-
 
+
-
* { margin: 0; padding: 0; }
+
-
body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
+
-
 
+
-
   
+
-
/*
+
-
UTILITY STYLES
+
-
*/    
+
-
   
+
-
.floatLeft { float: left; margin-right: 10px;}
+
-
.floatRight { float: right; }
+
-
.clear { clear: both; }
+
-
a { outline: none; }
+
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
 +
<title>Featured Content Slider</title>
 +
 +
<link rel="stylesheet" type="text/css" href="style.css" />
-
/*
+
<script type="text/javascript" src="https://2012.igem.org/Template:WashU1.2.6"></script>
-
PAGE STRUCTURE
+
<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>
-
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px; background: url(images/bg.png) top center; }
+
<script type="text/javascript" src="https://2012.igem.org/Template:WashUcoda-slider"></script>
-
 
+
-
 
+
<script type="text/javascript">
-
/*
+
-
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>
+
-
<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">
+
var theInt = null;
-
$(function(){
+
var $crosslink, $navthumb;
 +
var curclicked = 0;
 +
 +
theInterval = function(cur){
 +
clearInterval(theInt);
-
$("#main-photo-slider").codaSlider();
+
if( typeof cur != 'undefined' )
-
 
+
curclicked = cur;
-
});
+
-
</script>
+
$crosslink.removeClass("active-thumb");
 +
$navthumb.eq(curclicked).parent().addClass("active-thumb");
 +
$(".stripNav ul li a").eq(curclicked).trigger('click');
 +
 +
theInt = setInterval(function(){
 +
$crosslink.removeClass("active-thumb");
 +
$navthumb.eq(curclicked).parent().addClass("active-thumb");
 +
$(".stripNav ul li a").eq(curclicked).trigger('click');
 +
curclicked++;
 +
if( 6 == curclicked )
 +
curclicked = 0;
 +
 +
}, 3000);
 +
};
 +
 +
$(function(){
 +
 +
$("#main-photo-slider").codaSlider();
 +
 +
$navthumb = $(".nav-thumb");
 +
$crosslink = $(".cross-link");
 +
 +
$navthumb
 +
.click(function() {
 +
var $this = $(this);
 +
theInterval($this.parent().attr('href').slice(1) - 1);
 +
return false;
 +
});
 +
 +
theInterval();
 +
});
 +
</script>
</head>
</head>
<body>
<body>
-
<div class="slider-wrap">
+
-
<div id="main-photo-slider" class="csw">
+
<div id="page-wrap">
-
<div class="panelContainer">
+
 +
<div class="slider-wrap">
 +
<div id="main-photo-slider" class="csw">
 +
<div class="panelContainer">
-
<div class="panel" title="Panel 1">
+
<div class="panel" title="Panel 1">
-
<div class="wrapper">
+
<div class="wrapper">
-
<!-- REGULAR IMAGE PANEL -->
+
<img src="images/tempphoto-1.jpg" alt="temp" />
-
<img src="images/tempphoto-1.jpg" alt="temp" />
+
<div class="photo-meta-data">
-
<div class="photo-meta-data">
+
Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
-
Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
+
<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
-
<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
+
</div>
</div>
</div>
</div>
</div>
-
</div>
+
<div class="panel" title="Panel 2">
-
<div class="panel" title="Panel 2">
+
<div class="wrapper">
-
<div class="wrapper">
+
<img src="images/tempphoto-2.jpg" alt="temp" />
-
<!-- PANEL CONTENT -->
+
<div class="photo-meta-data">
 +
Chicago Bears at Seattle Seahawks<br />
 +
<span>Fifth field goal, overtime win for the Seahawks</span>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="panel" title="Panel 3">
 +
<div class="wrapper">
 +
 +
<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>
-
</div>
+
<div class="panel" title="Panel 4">
-
<div class="panel" title="Panel 3">
+
<div class="wrapper">
-
<div class="wrapper">
+
<img src="images/tempphoto-4.jpg" alt="temp" />
-
<!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
+
<div class="photo-meta-data">
-
<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
+
A Poem by Shel Silverstein<br />
-
+
<span>Falling Up</span>
-
<h1>How to Cook a Scotch Egg</h1>
+
</div>
-
+
</div>
-
<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>
+
<div class="panel" title="Panel 5">
-
<div class="panel" title="Panel 4">
+
<div class="wrapper">
-
<div class="wrapper">
+
<img src="images/tempphoto-5.jpg" alt="temp" />
-
<!-- PANEL CONTENT -->
+
<div class="photo-meta-data">
 +
New Video on CSS-Tricks<br />
 +
<span>Using Wufoo for Web Forms</span>
 +
</div>
 +
</div>
</div>
</div>
-
</div>
+
<div class="panel" title="Panel 6">
-
<div class="panel" title="Panel 5">
+
<div class="wrapper">
-
<div class="wrapper">
+
<h1>A Tale of Two Cities</h1>
-
<!-- PANEL CONTENT -->
+
<p><em>Charles Dickins</em></p>
-
</div>
+
<blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>
-
</div>
+
</div>
-
<div class="panel" title="Panel 6">
+
-
<div class="wrapper">
+
-
<!-- PANEL CONTENT -->
+
</div>
</div>
 +
</div>
</div>
 +
</div>
 +
<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
 +
<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>
-
</div>
 
-
<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
+
</div>
-
          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>
-
</div>
 
</body>
</body>
 +
</html>
</html>

Revision as of 20:55, 27 June 2012

Featured Content Slider

temp
Photo Credit: Kaustav Bhattacharya
"Free Tibet" Protest at the Olympic Torch Rally
temp
Chicago Bears at Seattle Seahawks
Fifth field goal, overtime win for the Seahawks
scotch egg

How to Cook a Scotch Egg

  • 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)
  • 1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)
  • 1/2 cup AP flour
  • 1-2 eggs, beaten
  • 3/4 cup panko-style bread crumbs
  • Vegetable oil for frying
temp
A Poem by Shel Silverstein
Falling Up
temp
New Video on CSS-Tricks
Using Wufoo for Web Forms

A Tale of Two Cities

Charles Dickins

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.
temp-thumb
temp-thumb
temp-thumb
temp-thumb
temp-thumb
temp-thumb

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