Team:Imperial College/Templates/Carousel2

From 2013.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<link rel="stylesheet" href="http://www.synbiuk.org/igem/flexslider.css" type="text/css" media="screen" />
+
-
 
+
-
<!-- Modernizr -->
+
-
  <script src="http://www.synbiuk.org/igem/modernizr.js"></script>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<div id="slider" class="flexslider">
+
-
  <ul class="slides">
+
-
    <li>
+
-
      <img src="slide1.jpg" />
+
-
    </li>
+
-
    <li>
+
-
      <img src="slide2.jpg" />
+
-
    </li>
+
-
    <li>
+
-
      <img src="slide3.jpg" />
+
-
    </li>
+
-
    <li>
+
-
      <img src="slide4.jpg" />
+
-
    </li>
+
-
    <!-- items mirrored twice, total of 12 -->
+
-
  </ul>
+
-
</div>
+
-
<div id="carousel" class="flexslider">
+
-
  <ul class="slides">
+
-
    <li>
+
-
      <img src="slide1.jpg" />
+
-
    </li>
+
-
    <li>
+
-
      <img src="slide2.jpg" />
+
-
    </li>
+
-
    <li>
+
-
      <img src="slide3.jpg" />
+
-
    </li>
+
-
    <li>
+
-
      <img src="slide4.jpg" />
+
-
    </li>
+
-
    <!-- items mirrored twice, total of 12 -->
+
-
  </ul>
+
-
</div>
+
-
 
+
-
<!-- jQuery -->
+
-
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
-
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
+
-
 
+
-
  <!-- FlexSlider -->
+
-
  <script defer src="http://www.synbiuk.org/igem/jquery.flexslider.js"></script>
+
-
 
+
-
  <script type="text/javascript">
+
-
    $(function(){
+
-
      SyntaxHighlighter.all();
+
-
    });
+
-
    $(window).load(function(){
+
-
      $('#carousel').flexslider({
+
-
        animation: "slide",
+
-
        controlNav: false,
+
-
        animationLoop: false,
+
-
        slideshow: false,
+
-
        itemWidth: 210,
+
-
        itemMargin: 5,
+
-
        asNavFor: '#slider'
+
-
      });
+
-
 
+
-
      $('#slider').flexslider({
+
-
        animation: "slide",
+
-
        controlNav: false,
+
-
        animationLoop: false,
+
-
        slideshow: false,
+
-
        sync: "#carousel",
+
-
        start: function(slider){
+
-
          $('body').removeClass('loading');
+
-
        }
+
-
      });
+
-
    });
+
-
  </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>
+
-
  <style>
+
-
    #slides {
+
-
      color: #232525;
+
-
      display: none;
+
-
      position: relative;
+
-
      text-align: center;
+
-
      margin-bottom: 1em;
+
-
    }
+
-
 
+
-
    #slides .slidesjs-navigation {
+
-
      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;
+
-
    }
+
-
 
+
-
    a.slidesjs-next,
+
-
    a.slidesjs-previous,
+
-
    a.slidesjs-play,
+
-
    a.slidesjs-stop {
+
-
      background-image: url('/wiki/images/f/f9/UESTC_btns-next-prev.png');
+
-
      background-repeat: no-repeat;
+
-
      display:block;
+
-
      width:12px;
+
-
      height:18px;
+
-
      overflow: hidden;
+
-
      text-indent: -9999px;
+
-
      float: left;
+
-
      margin-right:5px;
+
-
    }
+
-
 
+
-
    a.slidesjs-next {
+
-
      margin-right:10px;
+
-
      background-position: -12px 0;
+
-
    }
+
-
 
+
-
    a:hover.slidesjs-next {
+
-
      background-position: -12px -18px;
+
-
    }
+
-
 
+
-
    a.slidesjs-previous {
+
-
      background-position: 0 0;
+
-
    }
+
-
 
+
-
    a:hover.slidesjs-previous {
+
-
      background-position: 0 -18px;
+
-
    }
+
-
 
+
-
    a.slidesjs-play {
+
-
      width:15px;
+
-
      background-position: -25px 0;
+
-
    }
+
-
 
+
-
    a:hover.slidesjs-play {
+
-
      background-position: -25px -18px;
+
-
    }
+
-
 
+
-
    a.slidesjs-stop {
+
-
      width:18px;
+
-
      background-position: -41px 0;
+
-
    }
+
-
 
+
-
    a:hover.slidesjs-stop {
+
-
      background-position: -41px -18px;
+
-
    }
+
-
 
+
-
    .slidesjs-pagination {
+
-
      margin: 7px 0 0;
+
-
      float: right;
+
-
      list-style: none;
+
-
    }
+
-
 
+
-
    .slidesjs-pagination li {
+
-
      float: left;
+
-
      margin: 0 1px;
+
-
    }
+
-
 
+
-
    .slidesjs-pagination li a {
+
-
      display: block;
+
-
      width: 13px;
+
-
      height: 0;
+
-
      padding-top: 13px;
+
-
      background-image: url('/wiki/images/0/0f/UESTC_pagination.png');
+
-
      background-position: 0 0;
+
-
      float: left;
+
-
      overflow: hidden;
+
-
    }
+
-
 
+
-
    .slidesjs-pagination li a.active,
+
-
    .slidesjs-pagination li a:hover.active {
+
-
      background-position: 0 -13px
+
-
    }
+
-
 
+
-
    .slidesjs-pagination li a:hover {
+
-
      background-position: 0 -26px
+
-
    }
+
-
 
+
-
    #slides a:link,
+
-
    #slides a:visited {
+
-
      color: #333
+
-
    }
+
-
 
+
-
    #slides a:hover,
+
-
    #slides a:active {
+
-
      color: #9e2020
+
-
    }
+
-
 
+
-
    .navbar {
+
-
      overflow: hidden
+
-
    }
+
-
    #slides {
+
-
      display: none
+
-
    }
+
-
 
+
-
    .container {
+
-
      margin: 0 auto
+
-
    }
+
-
 
+
-
  </style>
+
-
 
+
-
  <script type="text/javascript">
+
-
    $(function() {
+
-
      $('#slides').slidesjs({
+
-
        width: 975,
+
-
        height: 548,
+
-
        play: {
+
-
          active: false,
+
-
          auto: true,
+
-
          interval: 4000,
+
-
          pauseOnHover: true,
+
-
          restartDelay: 10000
+
-
        },
+
-
        navigation: {
+
-
          active: false
+
-
        }
+
-
      });
+
-
    });
+
-
  </script>
+
-
 
+
-
<div class="container">
+
-
    <div id="slides">
+
-
      <div class="slidesjs-previous slidesjs-navigation">
+
-
        <i class="icon-chevron-left icon-3x"></i>
+
-
      </div>
+
-
      <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>
+
 +
<link rel="stylesheet" type="text/css" href="http://www.synbiuk.org/igem/gallery/css/style.css" />
 +
<link rel="stylesheet" type="text/css" href="http://www.synbiuk.org/igem/gallery/css/elastislide.css" />
 +
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
 +
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
 +
<noscript>
 +
<style>
 +
.es-carousel ul{
 +
display:block;
 +
}
 +
</style>
 +
</noscript>
 +
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
 +
<div class="rg-image-wrapper">
 +
{{if itemsCount > 1}}
 +
<div class="rg-image-nav">
 +
<a href="#" class="rg-image-nav-prev">Previous Image</a>
 +
<a href="#" class="rg-image-nav-next">Next Image</a>
 +
</div>
 +
{{/if}}
 +
<div class="rg-image"></div>
 +
<div class="rg-loading"></div>
 +
<div class="rg-caption-wrapper">
 +
<div class="rg-caption" style="display:none;">
 +
<p></p>
 +
</div>
 +
</div>
 +
</div>
 +
</script>
 +
 
 +
<div class="container">
 +
<div class="header">
 +
  <div class="clr"></div>
 +
</div><!-- header -->
 +
 +
<div class="content">
 +
  <div id="rg-gallery" class="rg-gallery">
 +
<div class="rg-thumbs">
 +
<!-- Elastislide Carousel Thumbnail Viewer -->
 +
<div class="es-carousel-wrapper">
 +
<div class="es-nav">
 +
<span class="es-nav-prev">Previous</span>
 +
<span class="es-nav-next">Next</span>
 +
</div>
 +
<div class="es-carousel">
 +
<ul>
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2013/3/3c/Thumb_Mountains42.png" alt="image01" width="65" height="65" data-large="https://static.igem.org/mediawiki/2013/5/54/Mountains42.png" data-description="Europe's Newest Mountain, Mount Wasted" /></a></li>
 +
  <li><a href="#"><img src="https://static.igem.org/mediawiki/2013/d/d4/Thumb_Very_stressed_ecoli2.jpg" data-large="https://static.igem.org/mediawiki/2013/2/2f/Very_stressed_ecoli2.jpg" alt="image02" data-description="Production of the red pigment by stress induction. MG1655 were grown with LB media and sterile filtrated WCM for 48 hours." /></a></li>
 +
                                   
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2013/1/15/Thumb_Jar_of_SRF2.jpg" data-large="https://static.igem.org/mediawiki/2013/e/e8/Jar_of_SRF2.jpg" alt="image03" data-description="Solid Recovered Fuel (SRF)" /></a></li>
 +
                                   
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2013/f/f9/Thumb_Waste_cocktail.png" data-large="https://static.igem.org/mediawiki/2013/2/2e/Waste_cocktail2.png" alt="image04" data-description="(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></li>
 +
                                   
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2013/0/08/Thumbs_PBS_Plus_Waste2.jpg" data-large="https://static.igem.org/mediawiki/2013/1/19/PBS_Plus_Waste2.jpg" alt="image05" data-description="(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." /></a></li>
 +
                                    <li><a href="#"><img src="https://static.igem.org/mediawiki/2013/3/3c/Thumb_Mountains42.png" alt="image01" width="65" height="65" data-large="https://static.igem.org/mediawiki/2013/5/54/Mountains42.png" data-description="Europe's Newest Mountain, Mount Wasted" /></a></li>
 +
  <li><a href="#"><img src="https://static.igem.org/mediawiki/2013/d/d4/Thumb_Very_stressed_ecoli2.jpg" data-large="https://static.igem.org/mediawiki/2013/2/2f/Very_stressed_ecoli2.jpg" alt="image02" data-description="Production of the red pigment by stress induction. MG1655 were grown with LB media and sterile filtrated WCM for 48 hours." /></a></li>
 +
                                   
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2013/1/15/Thumb_Jar_of_SRF2.jpg" data-large="https://static.igem.org/mediawiki/2013/e/e8/Jar_of_SRF2.jpg" alt="image03" data-description="Solid Recovered Fuel (SRF)" /></a></li>
 +
                                   
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2013/f/f9/Thumb_Waste_cocktail.png" data-large="https://static.igem.org/mediawiki/2013/2/2e/Waste_cocktail2.png" alt="image04" data-description="(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></li>
 +
                                   
 +
<li><a href="#"><img src="https://static.igem.org/mediawiki/2013/0/08/Thumbs_PBS_Plus_Waste2.jpg" data-large="https://static.igem.org/mediawiki/2013/1/19/PBS_Plus_Waste2.jpg" alt="image05" data-description="(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." /></a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
<!-- End Elastislide Carousel Thumbnail Viewer -->
 +
</div><!-- rg-thumbs -->
 +
</div><!-- rg-gallery -->
 +
<p class="sub">&nbsp;</p>
 +
  </div><!-- content -->
 +
</div><!-- container -->
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 +
<script type="text/javascript" src="http://www.synbiuk.org/igem/gallery/js/jquery.tmpl.min.js"></script>
 +
<script type="text/javascript" src="http://www.synbiuk.org/igem/gallery/js/jquery.easing.1.3.js"></script>
 +
<script type="text/javascript" src="http://www.synbiuk.org/igem/gallery/js/jquery.elastislide.js"></script>
 +
<script type="text/javascript" src="http://www.synbiuk.org/igem/gallery/js/gallery.js"></script>
</html>
</html>

Latest revision as of 13:03, 2 October 2013

 

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