Team:Johns Hopkins/Team/Gallery
From 2011.igem.org
(Difference between revisions)
(Created page with "{{:Team:Johns_Hopkins/Templates/tpl1}} <html> <div id="primarycontent"> <h1>Project Description</h1></html> Vitamin and mineral deficiencies are estimated to affect one out ...") |
|||
(21 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{:Team:Johns_Hopkins/Templates/tpl1}} | {{:Team:Johns_Hopkins/Templates/tpl1}} | ||
- | <html> | + | <html><br/> |
- | + | <!-- Start Advanced Gallery Html Containers --> | |
- | + | <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="igem" href="http://farm7.static.flickr.com/6084/6043486647_98152218e1_z.jpg" title="iGEM Logo"> | ||
+ | <img src="http://farm7.static.flickr.com/6088/6040498235_9a40e2808c_t.jpg" alt="iGEM Logo" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">This sample of Petri Dish art was created using the yeast strain containing β-Carotene.</div> | ||
+ | </div> | ||
+ | </li> | ||
- | + | <li> | |
+ | <a class="thumb" name="battlestation" href="https://static.igem.org/mediawiki/2011/4/4c/IMG_0039_2.jpg" title="Presentation Battlestation"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/1/1a/IMG_0039_2_s.jpg" alt="Presentation Battlestation" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Everyone is working hard on their respective parts of the presentation. </div> | ||
+ | </div> | ||
+ | </li> | ||
- | + | <li> | |
+ | <a class="thumb" name="Group" href="https://static.igem.org/mediawiki/2011/6/66/IMG_8868.jpg" title="Group"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/5/5e/IMG_8868_small.jpg" alt="Group" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Group picture of the team. Unfortunately, not all team members were able to make it. :(</div> | ||
+ | </div> | ||
+ | </li> | ||
- | + | <li> | |
+ | <a class="thumb" name="noahboard" href="https://static.igem.org/mediawiki/2011/2/2d/IMG_0037_2.jpg" title="Noah Writing"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/f/f1/IMG_0037_2_s.jpg" alt="Noah Writing" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Noah writing on the whiteboard during the battlestation. </div> | ||
+ | </div> | ||
+ | </li> | ||
- | + | <li> | |
- | < | + | <a class="thumb" name="meeting" href="https://static.igem.org/mediawiki/2011/5/55/IMG_0051_2.jpg" title="Meeting with Advisors"> |
- | + | <img src="https://static.igem.org/mediawiki/2011/d/db/IMG_0051_2_s.jpg" alt="Meeting with Advisors" /> | |
- | + | </a> | |
- | + | <div class="caption"> | |
- | + | <div class="image-desc">The advisors and team watch intently as different aspects of the project are presented to them.</div> | |
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="advisors" href="https://static.igem.org/mediawiki/2011/9/99/IMG_0050_2.jpg" title="Advisors Commenting"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/7/7f/IMG_0050_2_s.jpg" alt="Advisors Commenting" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Dr. Jef Boeke and Dr. Patrick Cai, our advisors, comment on the team's presentation. </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="vitayeast" href="http://farm7.static.flickr.com/6132/6044034584_04a064a9d6_z.jpg" title="VitaYeast"> | ||
+ | <img src="http://farm7.static.flickr.com/6079/6041046646_fc9c47d07c_t.jpg" alt="VitaYeast" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">This sample of Petri Dish art was created using the yeast strain containing β-Carotene. The VitaYeast design was created by Justine Yu.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="Orioles" href="http://farm7.static.flickr.com/6071/6044034816_4eb60841d0_z.jpg" title="Orioles Dish"> | ||
+ | <img src="http://farm7.static.flickr.com/6148/6041046624_89a010e3e1_t.jpg" alt="Orioles Dish" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">This sample of Petri Dish art was created using the yeast strain containing β-Carotene.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="robertowriting" href="https://static.igem.org/mediawiki/2011/9/98/IMG_7488_2.jpg" title="Roberto Writing"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/2/2d/IMG_7488_2_s.jpg" alt="Roberto Writing" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Roberto writes down the results from his experiments.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="robertopcr" href="https://static.igem.org/mediawiki/2011/9/90/IMG_7498_2.jpg" title="Roberto"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/c/c3/IMG_7498_2_s.jpg" alt="Roberto" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Roberto checks up on the PCR machine.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="notebook" href="http://farm7.static.flickr.com/6122/6043486739_e9695f9ebe_z.jpg" title="Notebook"> | ||
+ | <img src="http://farm7.static.flickr.com/6087/6041046778_a081087650_t.jpg" alt="Notebook" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">A close-up shot of James Chuang's lab notebook</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="ashan" href="https://static.igem.org/mediawiki/2011/2/2f/IMG_7506_2.jpg" title="Ashan"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/4/48/IMG_7506_2_s.jpg" alt="Ashan" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Ashan checks the concentration of PCR products. </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="ashanboard" href="https://static.igem.org/mediawiki/2011/e/e5/IMG_7512_2.jpg" title="Ashan Explains"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/e/e7/IMG_7512_2_s.jpg" alt="Ashan Explains" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Ashan explains his part of the project.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="onice" href="https://static.igem.org/mediawiki/2011/3/37/IMG_7511_2.jpg" title="Tubes on Ice"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/1/1e/Tubes_small.jpg" alt="Tubes on Ice" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Eppendorf tubes on ice, as Ashan prepares for PCR.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="Xuejing" href="http://farm7.static.flickr.com/6066/6044034682_9ffe4ce7d5_z.jpg" title="Xuejing Working"> | ||
+ | <img src="http://farm7.static.flickr.com/6185/6040498021_8244393280_t.jpg" alt="Xuejing Working" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Xuejing Guo works in the Bader lab. </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="stackedplates" href="http://farm7.static.flickr.com/6150/6043487103_c4acc57515_z.jpg" title="Stacked Plates"> | ||
+ | <img src="http://farm7.static.flickr.com/6090/6040498439_4c0e09e420_t.jpg" alt="Stacked Plates" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Plates of yeast that produce lycopene and β-Carotene are stacked. </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="danw" href="https://static.igem.org/mediawiki/2011/7/78/IMG_7521_2.jpg" title="Dan W Pipetting"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/a/ab/IMG_7521_2_s.jpg" alt="Dan W Pipetting" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Daniel Wolozny prepares materials in the Boeke lab. </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="danwfront" href="https://static.igem.org/mediawiki/2011/5/5a/IMG_7523_2.jpg" title="Frontal Shot of Dan W"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/a/ae/IMG_7523_2_s.jpg" alt="Frontal Shot of Dan W" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Frontal shot of Daniel W. preparing for his reaction. </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="Noah Modeling" href="https://static.igem.org/mediawiki/2011/3/37/IMG_7553_2.jpg" title="Noah Modeling"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/5/5f/IMG_7553_2_s.jpg" alt="Noah Modeling" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Noah Young models the production of vitamins in our VitaYeast.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="Spectroscopy" href="https://static.igem.org/mediawiki/2011/9/99/IMG_0198.jpg" title="Spectroscopy"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/f/f0/IMG_0198_small.jpg" alt="Spectroscopy" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Omar Hadzipasic and Daphne Chan use the spectrometer.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="James and Dan B" href="https://static.igem.org/mediawiki/2011/e/ed/IMG_0203.jpg" title="James and Dan B"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/9/91/IMG_0203_small.jpg" alt="James and Dan B" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">James Chuang and Dan Bibl work in the Boeke lab.</div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a class="thumb" name="Justine" href="https://static.igem.org/mediawiki/2011/0/07/IMG_0206.jpg" title="Justine"> | ||
+ | <img src="https://static.igem.org/mediawiki/2011/a/a4/IMG_0206_small.jpg" alt="Justine" /> | ||
+ | </a> | ||
+ | <div class="caption"> | ||
+ | <div class="image-desc">Justine Yu runs a gel.</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> | |
- | + | <script type="text/javascript"> | |
- | + | jQuery(document).ready(function($) { | |
- | + | // We only want these styles applied when javascript is enabled | |
- | + | $('div.content').css('display', 'block'); | |
- | + | ||
- | </div> | + | // 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: '‹ Previous Photo', | ||
+ | nextLinkText: 'Next Photo ›', | ||
+ | nextPageLinkText: 'Next ›', | ||
+ | prevPageLinkText: '‹ 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); | ||
+ | |||
+ | // 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'); | ||
+ | |||
+ | var lastPage = this.getNumPages() - 1; | ||
+ | if (this.displayedPage < lastPage) | ||
+ | nextPageLink.css('visibility', 'visible'); | ||
+ | |||
+ | this.fadeTo('fast', 1.0); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | /**************** Event handlers for custom next / prev page links **********************/ | ||
+ | |||
+ | gallery.find('a.prev').click(function(e) { | ||
+ | gallery.previousPage(); | ||
+ | e.preventDefault(); | ||
+ | }); | ||
+ | |||
+ | 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></div> | ||
</body></html> | </body></html> |
Latest revision as of 06:13, 24 September 2011