Team:UC Davis/Gallery
From 2013.igem.org
(Difference between revisions)
(Created page with "{{Team:UC_Davis/Head}} <html> <head> <style type="text/css"> .gallerycontainer{ position: relative; /*Add a height attribute and set to largest image's height to prevent over...") |
|||
(58 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
{{Team:UC_Davis/Head}} | {{Team:UC_Davis/Head}} | ||
+ | <!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"--> | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> | ||
+ | <head> | ||
- | < | + | <!-- Start twitter javascript --> |
+ | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}} (document,"script","twitter-wjs"); | ||
+ | </script> | ||
+ | <script type="text/javascript" src="https://2013.igem.org/wiki/skins/common/wikibits.js?270"><!-- wikibits js --></script> | ||
- | < | + | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); |
+ | </script> | ||
+ | |||
+ | |||
+ | <!-- end twitter javascript --> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!-- slide script starts here --> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | function slider() { | ||
+ | var max_slide = 19; | ||
+ | var $current = $('#slides IMG.current'); | ||
+ | $('.backward').css({opacity:0.0}); | ||
+ | if ( $current.length == 0 ) $current = $('#slides IMG:last'); | ||
+ | |||
+ | $('.progress li').click(function(){ | ||
+ | var $ncurrent = $(this); | ||
+ | $('.progress li').removeClass('current').removeClass('previous'); | ||
+ | $('#slides IMG').removeClass('current').removeClass('previous'); | ||
+ | $ncurrent.addClass('current'); | ||
+ | var ncurrentindex = $ncurrent.index(); | ||
+ | $current = $('#slides IMG:eq('+ncurrentindex+')'); | ||
+ | $current.addClass('current'); | ||
+ | if(ncurrentindex===0) $('.backward').css({opacity:0.0}); | ||
+ | if(ncurrentindex>0) $('.backward').css({opacity:0.7}); | ||
+ | if(ncurrentindex===max_slide-1) $('.forward').css({opacity:0.0}); | ||
+ | if(ncurrentindex<max_slide-1) $('.forward').css({opacity:0.7}); | ||
+ | console.log(' progress clicked ncurrentindex:',ncurrentindex); | ||
+ | }); | ||
+ | |||
+ | $('.forward img').click(function(){ | ||
+ | var $current = $('#slides IMG.current'); | ||
+ | if ( $current.length == 0 ) $current = $('#slides IMG:last'); | ||
+ | var $next = $current.next().length ? $current.next() : $('#slides IMG:first'); | ||
+ | $current.addClass('previous'); | ||
+ | $current.removeClass('current previous'); | ||
+ | $next.addClass('current'); | ||
+ | var fcount = $next.index(); | ||
+ | $('.progress li').removeClass('current') | ||
+ | $('.progress li:eq('+fcount+')').addClass('current'); | ||
+ | console.log('forward clicked',fcount); | ||
+ | if(fcount===0) $('.backward').css({opacity:0.0}); | ||
+ | if(fcount>=1) $('.backward').css({opacity:0.7}); | ||
+ | if(fcount===max_slide-1) $('.forward').css({opacity:0.0}); | ||
+ | if(fcount<max_slide-1) $('.forward').css({opacity:0.7}); | ||
+ | |||
+ | }); | ||
+ | |||
+ | $('.backward img').click(function(){ | ||
+ | var $current = $('#slides IMG.current'); | ||
+ | if ( $current.length == 0 ) $current = $('#slides IMG:first'); | ||
+ | var $next = $current.prev().length ? $current.prev() : $('#slides IMG:last'); | ||
+ | $current.addClass('previous'); | ||
+ | $current.removeClass('current previous'); | ||
+ | $next.addClass('current'); | ||
+ | var fcount = $next.index(); | ||
+ | $('.progress li').removeClass('current') | ||
+ | $('.progress li:eq('+fcount+')').addClass('current'); | ||
+ | console.log('backward clicked',fcount); | ||
+ | if(fcount===0) $('.backward').css({opacity:0.0}); | ||
+ | if(fcount>=1) $('.backward').css({opacity:0.7}); | ||
+ | if(fcount===max_slide-1) $('.forward').css({opacity:0.0}); | ||
+ | if(fcount<max_slide-1) $('.forward').css({opacity:0.7}); | ||
+ | |||
+ | }); | ||
+ | } | ||
+ | |||
+ | $(function(){ | ||
+ | slider(); | ||
+ | }); | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | |||
+ | $('a.lightbox').click(function(e) { | ||
+ | $('body').css('display', 'inherit'); // hide scrollbars! | ||
+ | |||
+ | $('<div id="overlay"></div>') | ||
+ | .css('opacity', '0') | ||
+ | .animate({'opacity': '0.7'}, 'slow') | ||
+ | .click(function(){ | ||
+ | removeLightbox(); | ||
+ | }) | ||
+ | .appendTo('body'); | ||
+ | |||
+ | $('<div id="lightbox"></div>') | ||
+ | .hide() | ||
+ | .appendTo('body'); | ||
+ | |||
+ | $('<img>') | ||
+ | .attr('src', $(this).attr('href')) | ||
+ | .load(function() { | ||
+ | positionLightboxImage(); | ||
+ | }) | ||
+ | .click(function() { | ||
+ | removeLightbox(); | ||
+ | }) | ||
+ | .appendTo('#lightbox'); | ||
+ | |||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | function positionLightboxImage() { | ||
+ | var top = ($(window).height() - $('#lightbox').height())/2; | ||
+ | var left = ($(window).width() - $('#lightbox').width())/2; | ||
+ | |||
+ | $('#lightbox') | ||
+ | .css({ | ||
+ | 'top': top, | ||
+ | 'left':left-80 | ||
+ | }) | ||
+ | .fadeIn(); | ||
+ | } | ||
+ | |||
+ | function removeLightbox() { | ||
+ | |||
+ | $('#overlay, #lightbox') | ||
+ | .fadeOut('slow', function() { | ||
+ | $(this).remove(); | ||
+ | $('body').css('overflow-y', 'auto'); // show scrollbars! | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | <!-- slide script ends here --> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | <!-- beginning of slider style --> | ||
+ | #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; | ||
+ | height:auto !important; /* real browsers */ | ||
+ | height:100%; /* IE6: treaded as min-height*/ | ||
+ | min-height:100%; /* real browsers */ | ||
+ | } | ||
+ | |||
+ | #twitter {float:right; width:220px; height:300px; margin-top: 10px;} | ||
- | + | #slides { | |
- | position: relative; | + | position:relative; |
- | + | height:400px; | |
+ | width: 840px | ||
+ | |||
} | } | ||
- | + | #slides IMG { | |
- | + | position:absolute; | |
- | + | opacity:0.0; | |
+ | top:0px; | ||
+ | left:0px; | ||
+ | z-index:1; | ||
+ | border-radius:4px | ||
} | } | ||
- | . | + | #slides .current { |
- | + | z-index:3; | |
+ | opacity:1.0; | ||
} | } | ||
- | . | + | #slides .previous { |
- | + | z-index:2; | |
} | } | ||
- | . | + | .progress { |
- | + | ||
- | + | margin-top:-390px; | |
- | + | margin-left:50px; | |
- | left: | + | position:absolute; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | .progress li{ |
- | border | + | border:1px solid rgba(0,0,0,0.9); |
- | + | border-radius:3px; | |
+ | margin-left: 5px; | ||
+ | float:left; | ||
+ | display:block; | ||
+ | position:relative; | ||
+ | z-index:10; | ||
+ | background-color:rgba(0,0,0,0.9); | ||
} | } | ||
- | . | + | .progress li a{ |
- | + | padding-left: 6px; | |
- | + | padding-right: 6px; | |
- | left: | + | |
- | + | ||
} | } | ||
- | |||
- | |||
+ | .progress li a:hover { | ||
+ | text-decoration:none; | ||
+ | } | ||
- | + | .progress .current { | |
+ | background-color:white; | ||
+ | } | ||
+ | .forward { | ||
+ | position:absolute; | ||
+ | margin-top: -220px; | ||
+ | margin-left: 650px; | ||
+ | z-index:11; | ||
+ | } | ||
+ | .backward { | ||
+ | position:absolute; | ||
+ | margin-top:-220px; | ||
+ | margin-left:22px; | ||
+ | z-index:11; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | #myleftbox | ||
+ | { | ||
+ | position:relative; | ||
+ | width:625px; | ||
+ | float:left; | ||
+ | background-color:; | ||
+ | margin-top: 0px; | ||
+ | border-radius: 4px; | ||
+ | padding: 0px; | ||
+ | font: sans-serif; | ||
+ | font-size: 13px; | ||
+ | color: white; | ||
+ | } | ||
+ | #myleftbox .smallbox | ||
+ | { | ||
+ | width:707px; | ||
+ | float:left; | ||
+ | background-color: rgba(0,0,0,.65); | ||
+ | margin-top: 10px; | ||
+ | border-radius: 4px; | ||
+ | padding: 15px 15px 15px 15px; | ||
+ | font:sans-serif; | ||
+ | font-size:13px; | ||
+ | color:rgba(225,225,225,.9); | ||
+ | |||
+ | } | ||
+ | |||
+ | #myleftbox .smallboxsite | ||
+ | { | ||
+ | width:604px; | ||
+ | position:center; | ||
+ | background-color:rgba(191,191,191,0.6 ); | ||
+ | margin-top: 17px; | ||
+ | border-radius: 4px; | ||
+ | padding: 15px 15px 15px 15px; | ||
+ | font: sans-serif; | ||
+ | font-size: 13px; | ||
+ | line-height:1.5em; | ||
+ | color:black; | ||
+ | |||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | </head> | ||
<body> | <body> | ||
- | |||
- | + | <img src="https://static.igem.org/mediawiki/2013/d/d3/UCD_2013_Galler_Banner.jpg" class="banner" width="967px" height="226/"> | |
- | < | + | <div id="twitter"> |
+ | <a class="twitter-timeline" width=220px height=300px href="https://twitter.com/UCDavisiGEM" data-widget-id="363400889542778880" data-theme="dark"> | ||
+ | Tweets by @UCDavisiGEM</a> | ||
+ | </div> | ||
- | < | + | <div id="myleftbox"> |
+ | <div id="myleftbox" class="smallbox"> | ||
+ | <h1>Gallery</h1> | ||
+ | <p>From the wet lab to the dry lab, our team was hard at work this summer. Take a look!</p> | ||
- | |||
- | < | + | <div id="slides"> |
+ | <img src="https://static.igem.org/mediawiki/2013/3/38/UCD_Slides_2013_2.JPG" style="width:605px; height:400px; margin-left:50px;" class="current"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/c/c3/UCD_Slides_2013_18.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/7/7a/UCD_Slides_2013_3.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/0/03/UCD_Slides_2013_4.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/2/2c/UCD_Slides_2013_11.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/f/f8/UCD_Slides_2013_6.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/3/35/UCD_Slides_2013_7.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/b/ba/UCD_Slides_2013_5.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/a/ae/UCD_Slides_2013_9.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/f/f4/UCD_Slides_2013_10.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/7/73/UCD_Slides_2013_12.JPG" style="width:605px; height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/5/53/UCD_Slides_2013_16.JPG" style="width:605px;height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/1/1d/UCD_Slides_2013_17.JPG" style="width:605px;height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/1/16/UCD_Slides_2013_19.JPG" style="width:605px;height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/8/8b/UCD_Slides_2013_21.JPG" style="width:605px;height:400px; margin-left:50px;" /> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/1/11/UCD_Slides_2013_23.JPG" style="width:605px;height:400px; margin-left:50px;" /> | ||
+ | </div> | ||
- | < | + | <ul class="progress"> |
+ | <li class="current"><a href="#n_0">1</a> </li> | ||
+ | <li><a href="#n_1">2</a> </li> | ||
+ | <li><a href="#n_2">3</a> </li> | ||
+ | <li><a href="#n_3">4</a> </li> | ||
+ | <li><a href="#n_1">5</a> </li> | ||
+ | <li><a href="#n_2">6</a> </li> | ||
+ | <li><a href="#n_3">7</a> </li> | ||
+ | <li><a href="#n_1">8</a> </li> | ||
+ | <li><a href="#n_2">9</a> </li> | ||
+ | <li><a href="#n_3">10</a> </li> | ||
+ | <li><a href="#n_1">11</a> </li> | ||
+ | <li><a href="#n_2">12</a> </li> | ||
+ | <li><a href="#n_3">13</a> </li> | ||
+ | <li><a href="#n_1">14</a> </li> | ||
+ | <li><a href="#n_2">15</a> </li> | ||
+ | <li><a href="#n_3">16</a> </li> | ||
- | < | + | </ul> |
+ | <ul class="forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/1/1d/UCD_Big_arrow_right.png"/> | ||
+ | </ul> | ||
+ | <ul class="backward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/a/a5/UCD_Big_arrow_left.png"/> | ||
+ | </ul> | ||
+ | |||
+ | </div> | ||
- | |||
- | |||
</div> | </div> | ||
+ | <!--Begin Showbox--> | ||
+ | <div class="floatbox"> | ||
+ | <table class="showbox"> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <div><a href="https://2013.igem.org/Team:UC_Davis/Project_Overview"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/b/bf/TALpic_UCDavis.jpg" class="blur"></a> | ||
+ | </div> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/Project_Overview"><h3>Project Overview</h3></a> | ||
+ | <p>Learn about how we combine riboswitches and TALs into robust orthogonal mechanisms for inducible repression. | ||
+ | </p></a> | ||
+ | |||
+ | </td> | ||
+ | |||
+ | <td> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/Data"><img src="https://static.igem.org/mediawiki/2013/d/d5/Resultsicon_UCDavis.jpg" class="blur"></a> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/Data"><h3>Results</h3></a> | ||
+ | <p>Check out the cool results of our experiments with RiboTALs. | ||
+ | </p> | ||
+ | </td> | ||
+ | |||
+ | |||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/HumanPracticesOverview"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/3/35/Humanpracbutton2_UCDavis.jpg" class="blur" /> | ||
+ | <!--img src="https://static.igem.org/mediawiki/2013/9/97/UCD_2013_HO_Button.jpg" class="blur"--></a> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/HumanPracticesOverview"><h3>Human Practices</h3></a> | ||
+ | <p>Take a look at how we promote sharing in iGEM through The Depot, an open BioBrick characterization database.<br /> | ||
+ | <a href="http://dilbert.cs.ucdavis.edu/Depot" class="bold">Visit the Depot!</a> | ||
+ | </p> | ||
+ | </td> | ||
+ | <td> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/Criteria"><img src="https://static.igem.org/mediawiki/2013/f/f3/Judgingbutton_UCDavis.jpg" class="blur"</a> | ||
+ | <a href="https://2013.igem.org/Team:UC_Davis/Criteria"><h3>Judging Criteria</h3></a> | ||
+ | <p>Here's the criteria that we met for this year's team. | ||
+ | </p> | ||
+ | </td> | ||
+ | |||
+ | |||
+ | |||
+ | </tr> | ||
+ | </table> | ||
+ | |||
+ | </div> | ||
+ | <!--End Showbox--> | ||
+ | |||
+ | |||
+ | <div id="sitemapbox" class="floatbox"> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!-- </div> --> | ||
+ | <script>if (window.runOnloadHook) runOnloadHook();</script> | ||
</body> | </body> | ||
+ | <script type="text/javascript"> | ||
+ | $("#sitemapbox").load("https://2013.igem.org/Template:Team:UC_Davis/site_map #sitemap1"); | ||
+ | </script> | ||
+ | |||
</html> | </html> |
Latest revision as of 03:27, 28 September 2013
Project OverviewLearn about how we combine riboswitches and TALs into robust orthogonal mechanisms for inducible repression. |
ResultsCheck out the cool results of our experiments with RiboTALs. |
Human PracticesTake a look at how we promote sharing in iGEM through The Depot, an open BioBrick characterization database. |
Judging CriteriaHere's the criteria that we met for this year's team. |