Team:Johns Hopkins/Team/Gallery

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team:Johns_Hopkins/Templates/tpl1}}
{{:Team:Johns_Hopkins/Templates/tpl1}}
<html><br/><br/>
<html><br/><br/>
-
<div id="primarycontent">
+
<!-- Start Advanced Gallery Html Containers -->
-
<h1>Project Description</h1></html>
+
<div class="navigation-container">
 +
<div id="thumbs" class="navigation">
 +
<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
 +
 +
<ul class="thumbs noscript">
 +
<li>
 +
<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
 +
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #0</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
 +
<img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
 +
</a>
 +
<div class="caption">
 +
Any html can be placed here ...
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
 +
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #3</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
 +
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #4</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
 +
<img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #5</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
 +
<img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #6</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
 +
<img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #7</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
 +
<img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #8</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
 +
<img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #9</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
 +
<img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #10</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
 +
<img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #11</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
 +
<img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #12</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
 +
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #13</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
 +
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #14</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
 +
<img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #15</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
 +
<img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #16</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
 +
<img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #17</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
 +
<img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #18</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
 +
<img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #19</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
 +
<img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #20</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
 +
<img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #21</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
 +
<img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #22</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
 +
<li>
 +
<a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
 +
<img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
 +
</a>
 +
<div class="caption">
 +
<div class="image-title">Title #23</div>
 +
<div class="image-desc">Description</div>
 +
<div class="download">
 +
<a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
<a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
 +
</div>
 +
</div>
 +
<div class="content">
 +
<div class="slideshow-container">
 +
<div id="controls" class="controls"></div>
 +
<div id="loading" class="loader"></div>
 +
<div id="slideshow" class="slideshow"></div>
 +
</div>
 +
<div id="caption" class="caption-container">
 +
<div class="photo-index"></div>
 +
</div>
 +
</div>
 +
<!-- End Gallery Html Containers -->
 +
<div style="clear: both;"></div>
 +
</div>
 +
</div>
 +
<div id="footer">&copy; 2009 Trent Foley</div>
 +
<script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
// We only want these styles applied when javascript is enabled
 +
$('div.content').css('display', 'block');
-
Vitamin and mineral deficiencies are estimated to affect one out of every three people in developing countries. Vitamin A deficiency alone is estimated to claim the lives of 670,000 children under five annually. While increasing the availability of foods with vital nutrients is often limited by the resources in the affected areas, we envision a simple and economic solution through our 2011 iGEM project: VitaYeast. The goal of VitaYeast is to implement vitamin and mineral production pathways in S. cerevisiae (baker’s yeast). The engineered yeast will be able to produce vital nutrients in significant amounts while being used in bread-making, and thus placing additional nutrients into one of the most commonly-eaten staples in the world. We foresee VitaYeast as a cheap and elegant way to supplement the diets of those who live in impoverished communities where food is limited in either quantity or nutritional value.
+
// Initially set opacity on thumbs and add
 +
// additional styling for hover effect on thumbs
 +
var onMouseOutOpacity = 0.67;
 +
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
 +
mouseOutOpacity:   onMouseOutOpacity,
 +
mouseOverOpacity:  1.0,
 +
fadeSpeed:        'fast',
 +
exemptionSelector: '.selected'
 +
});
 +
 +
// Initialize Advanced Galleriffic Gallery
 +
var gallery = $('#thumbs').galleriffic({
 +
delay:                    2500,
 +
numThumbs:                10,
 +
preloadAhead:              10,
 +
enableTopPager:            false,
 +
enableBottomPager:        false,
 +
imageContainerSel:        '#slideshow',
 +
controlsContainerSel:      '#controls',
 +
captionContainerSel:      '#caption',
 +
loadingContainerSel:      '#loading',
 +
renderSSControls:          true,
 +
renderNavControls:        true,
 +
playLinkText:              'Play Slideshow',
 +
pauseLinkText:            'Pause Slideshow',
 +
prevLinkText:              '&lsaquo; Previous Photo',
 +
nextLinkText:              'Next Photo &rsaquo;',
 +
nextPageLinkText:          'Next &rsaquo;',
 +
prevPageLinkText:          '&lsaquo; Prev',
 +
enableHistory:            true,
 +
autoStart:                false,
 +
syncTransitions:          true,
 +
defaultTransitionDuration: 900,
 +
onSlideChange:            function(prevIndex, nextIndex) {
 +
// 'this' refers to the gallery, which is an extension of $('#thumbs')
 +
this.find('ul.thumbs').children()
 +
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
 +
.eq(nextIndex).fadeTo('fast', 1.0);
-
As part of this project we are developing a yeast expression platform which is to include a library of promoters, termination sequences, and shuttle vectors. While the Parts Registry has a many well characterized basic parts for E. Coli, yeast remains a largely untapped resource. The inclusion of shuttle vectors in our platform will allow future genetic engineers to take advantage of E. coli's ability to rapidly replicate while still being able to deploy their construct in S. cerevisiae. We hope our work will facilitate the use of yeast in future iGEM projects.
+
// Update the photo index display
 +
this.$captionContainer.find('div.photo-index')
 +
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
 +
},
 +
onPageTransitionOut:      function(callback) {
 +
this.fadeTo('fast', 0.0, callback);
 +
},
 +
onPageTransitionIn:        function() {
 +
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
 +
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
 +
 +
// Show appropriate next / prev page links
 +
if (this.displayedPage > 0)
 +
prevPageLink.css('visibility', 'visible');
-
The final component of our platform is the synthosome: an entire synthetic chromosome. These chromosomes hold the potential to deploy synthetic systems with many more building blocks than a standard vector could. Since chromosomes are replicated and divided between offspring in an controlled and deliberate manner, the stability of constructs is improved as well.
+
var lastPage = this.getNumPages() - 1;
 +
if (this.displayedPage < lastPage)
 +
nextPageLink.css('visibility', 'visible');
-
Despite the promise of VitaYeast, its reception might still be hindered by the public's concerns with genetically modified food. These concerns typically include, but are not limited to, safety and environmental impact. Debates about genetically modified food have historically revolved around crops, but have recently broadened to animals as the technology advances and as natural resources deplete over the years. Therefore, in addition to wet lab experiments, we want to gather data to help us understand the concerns held by both local communities and the developing world regarding genetic modification and the global food supply. While we stand firm in our faith that synthetic biology can be a powerful tool for addressing global health needs, it is critical that we seek to place our solution on a firm path to global adoption.
+
this.fadeTo('fast', 1.0);
-
<br/><br/><br/>
+
}
-
<html></div>
+
});
-
<div id="secondarycontent">
+
 
-
<div id="boxheading">
+
/**************** Event handlers for custom next / prev page links **********************/
-
Lorem ipsum dolor sit amet
+
 
-
</div>
+
gallery.find('a.prev').click(function(e) {
-
<div id="boxcontent">
+
gallery.previousPage();
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac mollis risus. Vivamus nisi est, elementum id porta in, mollis sit amet lorem. Sed nulla tortor, mattis nec cursus pulvinar, dictum vel odio. Aenean eu ultrices felis. Donec cursus, sem vitae ornare dictum, eros mi iaculis nisl, sit amet facilisis turpis sem ut lorem. Sed dictum facilisis massa eu ultrices. Cras quis orci ut ligula porta eleifend.
+
e.preventDefault();
-
+
});
-
</div>
+
 
 +
gallery.find('a.next').click(function(e) {
 +
gallery.nextPage();
 +
e.preventDefault();
 +
});
 +
 
 +
/****************************************************************************************/
 +
 
 +
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
 +
 
 +
// PageLoad function
 +
// This function is called when:
 +
// 1. after calling $.historyInit();
 +
// 2. after calling $.historyLoad();
 +
// 3. after pushing "Go Back" button of a browser
 +
function pageload(hash) {
 +
// alert("pageload: " + hash);
 +
// hash doesn't contain the first # character.
 +
if(hash) {
 +
$.galleriffic.gotoImage(hash);
 +
} else {
 +
gallery.gotoIndex(0);
 +
}
 +
}
 +
 
 +
// Initialize history plugin.
 +
// The callback is called at once by present location.hash.
 +
$.historyInit(pageload, "advanced.html");
 +
 
 +
// set onlick event for buttons using the jQuery 1.3 live method
 +
$("a[rel='history']").live('click', function(e) {
 +
if (e.button != 0) return true;
 +
 
 +
var hash = this.href;
 +
hash = hash.replace(/^.*#/, '');
 +
 
 +
// moves to a new page.  
 +
// pageload is called at once.  
 +
// hash don't contain "#", "?"
 +
$.historyLoad(hash);
 +
 
 +
return false;
 +
});
 +
 
 +
/****************************************************************************************/
 +
});
 +
</script>
</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body></html>
</body></html>

Revision as of 20:07, 11 August 2011

VitaYeast - Johns Hopkins University, iGEM 2011
































Retrieved from "http://2011.igem.org/Team:Johns_Hopkins/Team/Gallery"