Team:INSA Toulouse/contenu/extras/gallery

From 2013.igem.org

(Difference between revisions)
Line 64: Line 64:
-
/* Slider (thanks to flowplayer.org) */
+
#slideshow {
-
/*************************************/
+
    position:relative;
 +
    height:350px;
 +
}
 +
#slideshow IMG {
 +
    position:absolute;
 +
    top:0;
 +
    left:0;
 +
    z-index:8;
 +
}
-
</style>
+
#slideshow IMG.active {
 +
    z-index:10;
 +
}
 +
#slideshow IMG.last-active {
 +
    z-index:9;
 +
}
-
<!--/* HTML Contenu*/-->
 
-
<div class="maincontent" style="width: 720px; margin: 25px 0 25px 0; float: right;">
 
-
  <h1 class="title1">Gallery</h1>
 
-
</style>
 
-
    <!-- jQuery Tools (slider) -->
 
-
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
 
-
    <script>
 
-
        $(function() {
 
-
    // initialize scrollable
 
-
    $(".scrollable").scrollable().navigator();
 
-
        });
 
-
    </script>
 
-
<!-- Slider -->
+
</style>
-
            <div class="scrollable">
+
  function slideSwitch() {
-
              <div class="items">
+
    var $active = $('#slideshow IMG.active');
-
                  <div>
+
    var $next = $active.next();   
-
                    <img src="https://static.igem.org/mediawiki/2013/a/a1/DryLab-998.jpg"></img>
+
   
-
                  </div>
+
    $next.addClass('active');
-
                  <div>
+
   
-
                    <img src="https://static.igem.org/mediawiki/2013/8/87/Igem-toulouse.slide1.jpg"></img>
+
    $active.removeClass('active');
-
                  </div>
+
}
-
                  <div>
+
 
-
                    <img src="https://static.igem.org/mediawiki/2013/8/87/Igem-toulouse.slide1.jpg"></img>
+
$(function() {
-
                  </div>
+
    setInterval( "slideSwitch()", 5000 );
-
                  <div>
+
});
-
                    <img src="https://static.igem.org/mediawiki/2013/8/87/Igem-toulouse.slide1.jpg"></img>
+
 
-
                  </div>
+
 
-
              </div>
+
<!--/* HTML Contenu*/-->
-
            </div>
+
 
-
            <div class="prev"></div>
+
<div class="maincontent" style="width: 720px; margin: 25px 0 25px 0; float: right;">
-
            <div class="next"></div>
+
 
-
            <div class="navi"></div>
+
  <h1 class="title1">Gallery</h1>
Line 114: Line 115:
 +
<div id="slideshow">
 +
    <img src="https://static.igem.org/mediawiki/2013/9/9c/Fanny1_440px.jpg" alt="" class="active" />
 +
    <img src="https://static.igem.org/mediawiki/2013/a/a3/Fanny2_440.jpg" alt="" />
 +
    <img src="https://static.igem.org/mediawiki/2013/5/5b/Igem-toulouse-gallery2.jpg" alt="" />
 +
    <img src="https://static.igem.org/mediawiki/2013/c/ce/Igem-toulouse-gallery1.jpg" alt="" />
 +
    <img src="https://static.igem.org/mediawiki/2013/5/5b/Igem-toulouse-gallery2.jpg" alt="" />
 +
    <img src="https://static.igem.org/mediawiki/2013/5/5b/Igem-toulouse-gallery2.jpg" alt="" />
 +
</div>

Revision as of 19:38, 4 October 2013

logo


function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 5000 ); });

Gallery