Team:Imperial College/Templates/Carousel

From 2013.igem.org

(Difference between revisions)
 
(81 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" type="text/css">
<script src="//cdn.jsdelivr.net/slidesjs/3.0.1/jquery.slides.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/slidesjs/3.0.1/jquery.slides.min.js" type="text/javascript"></script>
   <style>
   <style>
-
     #slides
+
     #slides {
-
      -webkit-font-smoothing: antialiased;
+
-
      font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+
       color: #232525;
       color: #232525;
-
       display: none
+
       display: none;
 +
      position: relative;
 +
      text-align: center;
 +
      margin-bottom: 1em;
     }
     }
     #slides .slidesjs-navigation {
     #slides .slidesjs-navigation {
-
       margin-top:5px;
+
       cursor: pointer;
 +
      -webkit-transition: all 300ms ease;
 +
      -moz-transition: all 300ms ease;
 +
      -ms-transition: all 300ms ease;
 +
      -o-transition: all 300ms ease;
 +
      transition: all 300ms ease;
 +
    }
 +
 
 +
    #slides .slidesjs-navigation.slidesjs-previous,
 +
    #slides .slidesjs-navigation.slidesjs-next {
 +
      position: absolute;
 +
      top: 0;
 +
      bottom: 0;
 +
      height: 100%;
 +
      line-height: 548px;
 +
      width: 100px;
 +
      opacity: 0.75;
 +
      padding: 0 10px 0 10px;
 +
      z-index: 1000;
 +
      background: transparent;
 +
    }
 +
 
 +
    #slides .slidesjs-navigation.slidesjs-previous > i.icon-3x,
 +
    #slides .slidesjs-navigation.slidesjs-next > i.icon-3x {
 +
      line-height: 548px;
 +
    }
 +
 
 +
    #slides .slidesjs-navigation:hover {
 +
      opacity: 1;
 +
    }
 +
 
 +
    #slides .slidesjs-navigation.slidesjs-previous {
 +
      left: 0;
 +
      text-align: left;
 +
    }
 +
 
 +
    #slides .slidesjs-navigation.slidesjs-previous:hover {
 +
      background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
 +
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
 +
      background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
 +
      background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
 +
      background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
 +
      background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
 +
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
 +
    }
 +
 
 +
    #slides .slidesjs-navigation.slidesjs-next {
 +
      right: 0;
 +
      text-align: right;
 +
    }
 +
 
 +
    #slides .slidesjs-navigation.slidesjs-next:hover {
 +
      background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
 +
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
 +
      background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
 +
      background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
 +
      background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
 +
      background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
 +
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
 +
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80ffffff',GradientType=1 ); /* IE6-9 */
 +
    }
 +
 
 +
    #slides .slidesjs-pagination {
 +
      float: none;
 +
      text-align: center;
 +
      display: inline-block;
 +
    }
 +
 
 +
    #slides .slide {
 +
      position: relative;
 +
      width: 975px;
 +
      height: 548px;
 +
    }
 +
 
 +
    #slides .slide span.background {
 +
      width: 100%;
 +
      height: 100%;
 +
    }
 +
 
 +
    #slides .slide span.background > * {
 +
      width: 100%;
 +
      height: 100%;
 +
    }
 +
 
 +
    #slides .slide span.text {
 +
      text-align: left;
 +
      color: #ffffff;
 +
      background: rgba(0, 0, 0, 0.75);
 +
      border-left: 5px solid #008AC3;
 +
      padding: 10px;
 +
      position: absolute;
 +
      bottom: 30px;
 +
      left: 20px;
 +
      max-width: 65%;
 +
      z-index: 1000;
 +
      -webkit-transition: all 300ms ease;
 +
      -moz-transition: all 300ms ease;
 +
      -ms-transition: all 300ms ease;
 +
      -o-transition: all 300ms ease;
 +
      transition: all 300ms ease;
 +
      opacity: 1;
 +
    }
 +
 
 +
    #slides .slide span.text:hover {
 +
      opacity: 0.25;
     }
     }
Line 18: Line 123:
     a.slidesjs-play,
     a.slidesjs-play,
     a.slidesjs-stop {
     a.slidesjs-stop {
-
       background-image: url(img/btns-next-prev.png);
+
       background-image: url('/wiki/images/f/f9/UESTC_btns-next-prev.png');
       background-repeat: no-repeat;
       background-repeat: no-repeat;
       display:block;
       display:block;
Line 80: Line 185:
       height: 0;
       height: 0;
       padding-top: 13px;
       padding-top: 13px;
-
       background-image: url(img/pagination.png);
+
       background-image: url('/wiki/images/0/0f/UESTC_pagination.png');
       background-position: 0 0;
       background-position: 0 0;
       float: left;
       float: left;
Line 116: Line 221:
     }
     }
-
    /* For tablets & smart phones */
 
-
    @media (max-width: 767px) {
 
-
      body {
 
-
        padding-left: 20px;
 
-
        padding-right: 20px;
 
-
      }
 
-
      .container {
 
-
        width: auto
 
-
      }
 
-
    }
 
-
 
-
    /* For smartphones */
 
-
    @media (max-width: 480px) {
 
-
      .container {
 
-
        width: auto
 
-
      }
 
-
    }
 
-
 
-
    /* For smaller displays like laptops */
 
-
    @media (min-width: 768px) and (max-width: 979px) {
 
-
      .container {
 
-
        width: 724px
 
-
      }
 
-
    }
 
-
 
-
    /* For larger displays */
 
-
    @media (min-width: 1200px) {
 
-
      .container {
 
-
        width: 1170px
 
-
      }
 
-
    }
 
   </style>
   </style>
-
   <script>
+
   <script type="text/javascript">
     $(function() {
     $(function() {
       $('#slides').slidesjs({
       $('#slides').slidesjs({
-
         width: 940,
+
         width: 975,
-
         height: 528,
+
         height: 548,
         play: {
         play: {
-
           active: true,
+
           active: false,
           auto: true,
           auto: true,
           interval: 4000,
           interval: 4000,
-
           swap: true
+
           pauseOnHover: true,
 +
          restartDelay: 10000
 +
        },
 +
        navigation: {
 +
          active: false
         }
         }
       });
       });
Line 166: Line 244:
<div class="container">
<div class="container">
     <div id="slides">
     <div id="slides">
-
       <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
+
       <div class="slidesjs-previous slidesjs-navigation">
-
       <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
+
        <i class="icon-chevron-left icon-3x"></i>
-
       <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
+
      </div>
-
       <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
+
      <div class="slidesjs-next slidesjs-navigation">
 +
        <i class="icon-chevron-right icon-3x"></i>
 +
      </div>
 +
      <!--   
 +
      <div class="slide">
 +
        <span class="background"><iframe width="975" height="548" src="//www.youtube.com/embed/RfiQYRn7fBg?rel=0" frameborder="0" allowfullscreen></iframe></span>
 +
        <span class="text">Put text here</span>
 +
       </div>
 +
      -->   
 +
<div class="slide">
 +
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/4/44/Mountains4.png" style="width: 100%; height: 100%"></span>
 +
        <span class="text">Europe's Newest Mountain, Mount Wasted</span>
 +
      </div>
 +
    <div class="slide">
 +
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/f/f8/Very_stressed_ecoli.jpg"></span>
 +
        <span class="text">Production of the red pigment by stress induction. MG1655 were grown with LB media and sterile filtrated WCM for 48 hours.</span>
 +
       </div>
 +
    <div class="slide">
 +
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/0/0e/Jar_of_SRF.jpg" style="width: 100%; height: 100%"></span>
 +
        <span class="text">Solid Recovered Fuel (SRF)</span>
 +
      </div>
 +
    <div class="slide">
 +
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/2/25/Waste_cocktail.png"></span>
 +
        <span class="text"><b>(A)</b> WCM precursor material, this sterilised media made from LB and SRF was used to produce all WCM utilised. <b>(B)</b> Cells containing mCherry pigment grown in SRF <b>(A)</b> over 3 days, then streaked in a qualitative assay to check for growth. <b>(C)</b> mCherry cells were streaked again after 7 days growth in SRF. </span>
 +
       </div> 
 +
    <div class="slide">
 +
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/2/2b/PBS_Plus_Waste.jpg"></span>
 +
        <span class="text"><b>(A)</b> SRF in PBS (phosphate buffered saline), a buffer. We can see from this experiment whether our bacteria can grow solely on the waste SRF. <b>(B)</b> Cells containing mCherry pigment grown in SRF <b>(A)</b> over 3 days, then streaked in a qualitative assay to check for growth. <b>(C)</b> mCherry cells were streaked again after 6 days growth in SRF. </span>
 +
      </div>
 +
      <div class="slide">
 +
        <span class="background"><img src="https://static.igem.org/mediawiki/2013/9/9e/CombinedBacteriaArt.jpg"></span>
 +
        <span class="text">Cultured bacteria performing arts.</span>
 +
      </div> 
     </div>
     </div>
-
   </div
+
   </div>
</div>
</div>
</html>
</html>

Latest revision as of 12:14, 30 September 2013

Europe's Newest Mountain, Mount Wasted
Production of the red pigment by stress induction. MG1655 were grown with LB media and sterile filtrated WCM for 48 hours.
Solid Recovered Fuel (SRF)
(A) WCM precursor material, this sterilised media made from LB and SRF was used to produce all WCM utilised. (B) Cells containing mCherry pigment grown in SRF (A) over 3 days, then streaked in a qualitative assay to check for growth. (C) mCherry cells were streaked again after 7 days growth in SRF.
(A) SRF in PBS (phosphate buffered saline), a buffer. We can see from this experiment whether our bacteria can grow solely on the waste SRF. (B) Cells containing mCherry pigment grown in SRF (A) over 3 days, then streaked in a qualitative assay to check for growth. (C) mCherry cells were streaked again after 6 days growth in SRF.
Cultured bacteria performing arts.

Retrieved from "http://2013.igem.org/Team:Imperial_College/Templates/Carousel"