Team:BU Wellesley Software/Social

From 2011.igem.org

(Difference between revisions)
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>
 +
 +
 +
<!-- standalone page styling (can be removed) -->
 +
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
 +
 +
 +
<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 74: Line 105:
<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" class="thumb"></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" class="thumb"></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" class="thumb"></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" class="thumb"></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" class="thumb"></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" class="thumb"></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" class="thumb"></a>  
+
        <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.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" class="thumb"></a></tr>  
+
        <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />  
-
<td></tr>
+
        <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />  
-
<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" class="thumb"></a>  
+
        <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.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" class="thumb"></a>  
+
        <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.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" class="thumb"></a></tr>  
+
      </div>  
-
<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" class="thumb"></a>  
+
     
-
<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" class="thumb"></a>  
+
      <!-- 5-10 -->  
-
<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" class="thumb"></a>
+
      <div>  
-
<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" class="thumb"></a></tr>
+
        <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />  
-
<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" class="thumb"></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" class="thumb"></a>
+
        <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />  
-
<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" class="thumb"></a>
+
        <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.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" class="thumb"></a></tr>
+
        <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />  
-
                </table>
+
        <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />  
-
               
+
      </div>  
-
                </div>  
+
     
-
</div>
+
      <!-- 10-15 -->  
-
+
      <div>  
-
+
        <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />  
-
<!-- InstanceEndEditable --></div>
+
        <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />  
 +
        <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />  
 +
        <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />  
 +
        <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.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>

Revision as of 03:12, 15 September 2011

BU-Wellesley iGEM Team: Meet the Team Members

Team Project Overview Notebook Safety Acknowledgement Fun Medal Fulfillment Outreach Tips & Tricks Downloads/Tutorials Methodology

Fun

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