Team:UC Davis/Gallery

From 2013.igem.org

(Difference between revisions)
 
(50 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>
-
<html>
+
<!-- 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>
-
<head>
+
<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 */
 +
}
-
.gallerycontainer{
+
#twitter {float:right; width:220px; height:300px; margin-top: 10px;}
-
position: relative;
+
 
-
/*Add a height attribute and set to largest image's height to prevent overlaying*/
+
#slides {
 +
    position:relative;
 +
    height:400px;
 +
    width: 840px
 +
   
}
}
 +
#slides IMG {
 +
        position:absolute;
 +
        opacity:0.0;
 +
        top:0px;   
 +
        left:0px;
 +
        z-index:1;
 +
        border-radius:4px   
 +
}
-
.thumbnail img{
+
#slides .current {
-
border: 1px solid white;
+
    z-index:3;
-
margin: 0 5px 5px 0;
+
    opacity:1.0;
}
}
-
.thumbnail:hover{
+
#slides .previous {
-
background-color: transparent;
+
    z-index:2;
}
}
-
.thumbnail:hover img{
+
.progress {
-
border: 1px solid blue;
+
 
 +
margin-top:-390px;
 +
margin-left:50px;
 +
position:absolute;
 +
 
}
}
-
.thumbnail span{ /*CSS for enlarged image*/
+
.progress li{
-
position: absolute;
+
border:1px solid rgba(0,0,0,0.9);
-
background-color: none;
+
border-radius:3px;
-
padding: 5px;
+
margin-left: 5px;
-
left: -1000px;
+
float:left;
-
border: 4px solid rgba(0,0,0,.65);
+
display:block;
-
border-radius:4px;
+
position:relative;
-
visibility: hidden;
+
z-index:10;
 +
background-color:rgba(0,0,0,0.9);
 +
}
 +
 
 +
.progress li a{
 +
    padding-left: 6px;
 +
    padding-right: 6px;
 +
}
 +
 
 +
.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;
color: white;
-
text-decoration: none;
 
}
}
 +
#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);
-
.thumbnail span img{ /*CSS for enlarged image*/
 
-
border-width: 0;
 
-
padding: 2px;
 
}
}
-
.thumbnail:hover span{ /*CSS for enlarged image*/
+
#myleftbox .smallboxsite
-
visibility: visible;
+
{
-
top: 0;
+
width:604px;
-
left: 230px; /*position where enlarged image should offset horizontally */
+
position:center;
-
z-index: 50;
+
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;
 +
 
}
}
-
/*Credit to Dynamic Drive CSS Library gallery */
 
-
</style>
 
 +
</style>
</head>
</head>
 +
<body>
 +
<img src="https://static.igem.org/mediawiki/2013/d/d3/UCD_2013_Galler_Banner.jpg" class="banner" width="967px" height="226/">
-
<body>
+
<div id="twitter">
-
<div class="floatboxwide">
+
<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 class="gallerycontainer">
+
<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>
-
<a class="thumbnail" href="#thumb">
 
-
<img src="media/tree_thumb.jpg"></img>
 
-
<span>
 
-
<img src="media/tree.jpg" /><br />Simply beautiful.
 
-
</span>
 
-
</a>
 
-
<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
+
<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>
-
<br />
+
    <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>
-
<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a>  
+
    </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>
-
<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>
 
-
<br />
 
</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>
</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

Gallery

From the wet lab to the dry lab, our team was hard at work this summer. Take a look!

Project Overview

Learn about how we combine riboswitches and TALs into robust orthogonal mechanisms for inducible repression.

Results

Check out the cool results of our experiments with RiboTALs.

Human Practices

Take a look at how we promote sharing in iGEM through The Depot, an open BioBrick characterization database.
Visit the Depot!

Judging Criteria

Here's the criteria that we met for this year's team.

Retrieved from "http://2013.igem.org/Team:UC_Davis/Gallery"