Team:BU Wellesley Software/Social

From 2011.igem.org

(Difference between revisions)
 
(24 intermediate revisions not shown)
Line 43: Line 43:
     }
     }
-
img .thumb {
+
.thumb {
width: 200px;
width: 200px;
}
}
Line 50: Line 50:
<link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/Team.css">
<link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/Team.css">
 +
<!-- include the jQuery Tools -->
 +
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
 +
 +
 +
 +
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-horizontal.css" />
 +
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" />
 +
 +
<style>
 +
 +
 +
/* styling for the image wrapper  */
 +
#image_wrap {
 +
/* dimensions */
 +
width:677px;
 +
margin:15px 0 15px 40px;
 +
padding:15px 0;
 +
 +
/* centered */
 +
text-align:center;
 +
 +
/* some "skinning" */
 +
background-color:#efefef;
 +
border:2px solid #fff;
 +
outline:1px solid #ddd;
 +
-moz-ouline-radius:4px;
 +
}
 +
</style>
</head>
</head>
Line 57: Line 85:
<p  style="text-align:center;"><a href="https://2011.igem.org/Team:BU_Wellesley_Software"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/banner.png" width="800px"></a></p>
<p  style="text-align:center;"><a href="https://2011.igem.org/Team:BU_Wellesley_Software"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/banner.png" width="800px"></a></p>
-
<div class="navbar">
+
<ul id="nav">  
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Team">Team</a>  
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Team">Team</a></li>  
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Project_Overview">Project Overview</a>  
+
<li><a href="#">Project</a>
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Notebook">Notebook</a>
+
<ul>
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Safety">Safety</a>  
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Project_Overview">Overview</a></li>  
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Acknowledgement">Acknowledgement</a>  
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Clotho">Clotho</a></li>  
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Social">Fun</a>  
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/G-nomeSurferPro">G-nome Surfer Pro</a></li>  
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Gold">Medal Fulfillment</a>  
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/OptimusPrimer">Optimus Primer</a></li>  
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Outreach">Outreach</a>
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Trumpet">Trumpet</a></li>  
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Tips">Tips & Tricks</a>  
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Puppetshow">Puppetshow</a></li>  
-
<a href="https://2011.igem.org/Team:BU_Wellesley_Software/Downloads_and_Tutorials">Downloads/Tutorials</a>  
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/eLabNotebook">eLabNotebook</a></li>
-
</div>
+
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Wet_Lab">Wet Lab</a></li>
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Downloads_and_Tutorials">Downloads and Tutorials</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">Process</a>
 +
<ul>
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Methodology">Methodology</a></li>
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Safety">Safety</a></li>
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Notebook">Notebook</a></li>
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Outreach">Outreach</a></li>  
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Tips">Tips and Tricks</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Gold">Medal Fulfillment</a></li>
 +
<li><a href="#">Additional Info</a>
 +
<ul>
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Acknowledgement">Acknowledgement</a></li>
 +
<li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Social">Fun</a></li>
 +
</ul>
 +
</li>
 +
</ul>  
<br>
<br>
<h6>Fun</h6>
<h6>Fun</h6>
<br>
<br>
-
After prying the keyboards out of the computational teams' hands and the pipettes out of the wet lab team's hands, we participated in a variety of activities:
 
-
<div id="content"><!-- InstanceBeginEditable name="content" -->
+
<div id="image_wrap">  
-
<!--going to change this into a SSI file to avoid repetition in the html files-->  
+
-
+
<!-- Initially the image is a simple 1x1 pixel transparent GIF -->  
-
<div>
+
<img src="http://static.flowplayer.org/tools/img/blank.gif" width="500" height="375" />  
-
<!--displays three HCI Lab photos-->
+
-
<div id="tannerimages">
+
</div>
-
<table width="100%">
+
 
-
<tr><td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/all_camp.png"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/all_camp.png" class="thumb"></a> </td>
+
<a class="prev browse left"></a>  
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/bigtent.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/bigtent.JPG" class="thumb"></a>  
+
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_doug.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_doug.JPG" class="thumb"></a>  
+
<!-- root element for scrollable -->  
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_doug1.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_doug1.JPG" class="thumb"></a>
+
<div class="scrollable">  
-
<tr><td width="20%"><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_girls.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_girls.JPG"></a>  
+
 
-
                <td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_jenh.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_jenh.JPG"></a>  
+
  <!-- root element for the items -->
-
                <td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/doug_evan.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/doug_evan.JPG"></a>  
+
  <div class="items">  
-
                <td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/games.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/games.JPG"></a></tr>  
+
 
-
<tr><td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/grp_camp.png"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/grp_camp.png"></a>  
+
      <!-- 1-5 -->  
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/grp_croquet.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/grp_croquet.JPG"></a>  
+
      <div>
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/grp_tent.png"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/grp_tent.png"></a>  
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/brainstorm.jpg" />  
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/hotdogs.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/hotdogs.JPG"></a></tr>  
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/triptosbux.jpg" />
-
<td></tr>
+
 
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/night_crzy.png"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/night_crzy.png"></a>  
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tracikathy.jpg" />
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/igemfun/night_nrm.png"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/night_nrm.png"></a>  
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/bigtent.JPG" />
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/startfire.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/startfire.JPG"></a></tr>  
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_girls.JPG" />  
-
<a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tent_boys.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tent_boys.JPG"></a>  
+
      </div>  
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tenting.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tenting.JPG"></a>  
+
     
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/triptosbux.jpg"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/triptosbux.jpg"></a>  
+
      <!-- 5-10 -->  
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/triptosbux2.jpg"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/triptosbux2.jpg"></a></tr>
+
      <div>  
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab1.jpg"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab1.jpg"></a><td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab2.jpg"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab2.jpg"></a>
+
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab3.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab3.JPG"></a>
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/kelseyandmikey.jpg" />
-
<td><a href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab4.JPG"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab4.JPG"></a></tr>
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_jenh.JPG" />  
-
                </table>
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/triptosbux2.jpg" />  
-
               
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/games.JPG" />  
-
                </div>  
+
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/grp_croquet.JPG" />  
-
</div>
+
      </div>  
-
+
     
-
+
      <!-- 10-15 -->  
-
<!-- InstanceEndEditable --></div>
+
      <div>  
 +
 
 +
          <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/beachattack.jpg" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/hotdogs.JPG" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/night_crzy.png" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab3.JPG" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/startfire.JPG" />  
 +
      </div>  
 +
 
 +
<!-- 15-20 -->  
 +
      <div>  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tent_boys.JPG" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/frisbee.jpg" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/hp1.jpg" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tenting.JPG" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab4.JPG" />  
 +
      </div>  
 +
 
 +
<!-- 20-25 -->  
 +
      <div>
 +
 
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/all_camp.png" />  
 +
        <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/beachday.jpg" />
 +
      </div>  
 +
     
 +
  </div>  
 +
 
 +
</div>  
 +
 +
<!-- "next page" action -->  
 +
<a class="next browse right"></a>  
 +
 
 +
<script>  
 +
$(function() {
 +
 +
$(".scrollable").scrollable();
 +
 +
$(".items img").click(function() {
 +
 +
// see if same thumb is being clicked
 +
if ($(this).hasClass("active")) { return; }
 +
 +
// calclulate large image's URL based on the thumbnail URL (flickr specific)
 +
var url = $(this).attr("src").replace("_t", "");
 +
 +
// get handle to element that wraps the image and make it semi-transparent
 +
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
 +
 +
// the large image from www.flickr.com
 +
var img = new Image();
 +
 +
 +
// call this function after it's loaded
 +
img.onload = function() {
 +
 +
// make wrapper fully visible
 +
wrap.fadeTo("fast", 1);
 +
 +
// change the image
 +
wrap.find("img").attr("src", url);
 +
 +
};
 +
 +
// begin loading the image from www.flickr.com
 +
img.src = url;
 +
 +
// activate item
 +
$(".items img").removeClass("active");
 +
$(this).addClass("active");
 +
 +
// when page loads simulate a "click" on the first image
 +
}).filter(":first").click();
 +
});
 +
</script>  
 +
 
 +
 
 +
 
</div><!--end bu-wellesley_wiki_content div-->
</div><!--end bu-wellesley_wiki_content div-->
</body>
</body>
</html>
</html>

Latest revision as of 23:43, 28 September 2011

BU-Wellesley iGEM Team: Meet the Team Members


Fun

Retrieved from "http://2011.igem.org/Team:BU_Wellesley_Software/Social"