Team:Paris Bettencourt/Gallery

From 2013.igem.org

(Difference between revisions)
(Created page with "{{:Team:Paris_Bettencourt/header}} <div id="grouptitle">Team Gallery</div> <div id="page"> </div> <!-- ########## Don't edit below ########## --> {{:Team:Paris_Bettencourt/footer}}")
 
(37 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Paris_Bettencourt/header}}
+
{{:Team:Paris_Bettencourt/Wiki}}
-
<div id="grouptitle">Team Gallery</div>
+
{{:Team:Paris_Bettencourt/Menu}}
<div id="page">
<div id="page">
 +
<html>
 +
    <img src="https://static.igem.org/mediawiki/2013/e/ee/PB_Galleryteambanner.png"/>
 +
  </div>
 +
 +
<!-- Part of this code was based on the templates by Trent Foley (2009)
 +
http://www.twospy.com/galleriffic/
 +
-->
 +
<html>
 +
<head>
 +
<style type="text/css">
 +
div.content {
 +
    /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
 +
    display: none;
 +
    float: right;
 +
    width: 820px;
 +
    height: 533px;
 +
}
 +
div.content a:focus, div.content a:hover, div.content a:active, div.content a, div.navigation a {
 +
    text-decoration: none;
 +
    color:rgb(46,43,52);
 +
}
 +
 +
div.controls {
 +
    margin-top: 5px;
 +
    height: 23px;
 +
    line-height: 1.4em;
 +
    font-size: 17px;   
 +
}
 +
div.controls a {
 +
    padding: 5px;
 +
}
 +
div.ss-controls {
 +
    float: left;
 +
}
 +
div.nav-controls {
 +
    float: right;
 +
}
 +
div.slideshow-container {
 +
  position: relative;
 +
    clear: both;
 +
    height: 240px; /* This should be set to be at least the height of the largest image in the slideshow */
 +
}
 +
div.gloader {
 +
    display:none;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    background-image: url('loader.gif');
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    width: 820px;
 +
    height: 533px; /* This should be set to be at least the height of the largest image in the slideshow */
 +
}
 +
div.slideshow {
 +
   
 +
}
 +
div.slideshow span.image-wrapper {
 +
    display: block;
 +
}
 +
div.slideshow a.advance-link {
 +
    display: block;
 +
    width: 820px;
 +
    height: 240px; /* This should be set to be at least the height of the largest image in the slideshow */
 +
    line-height: 240px; /* This should be set to be at least the height of the largest image in the slideshow */
 +
    text-align: center;
 +
}
 +
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
 +
    text-decoration: none;
 +
}
 +
div.slideshow img {
 +
    vertical-align: middle;
 +
    border: 1px solid #ccc;
 +
}
 +
 +
div.caption-container {
 +
    position: relative;
 +
    clear: left;
 +
    height: 0px;
 +
}
 +
span.image-caption {
 +
    display: block;
 +
    position: absolute;
 +
    width: 820px;
 +
    top: 0;
 +
    left: 0;
 +
}
 +
div.caption {
 +
    padding: 12px;
 +
}
 +
div.image-title {
 +
    font-weight: bold;
 +
    font-size: 25px;
 +
}
 +
div.affiliation {
 +
    font-weight: bold;
 +
    font-style: italic;
 +
    margin-top: 4px;
 +
    font-size: 19px;
 +
}
 +
div.image-desc {
 +
    line-height: 1.4em;
 +
    font-size: 17px;
 +
    padding-top: 12px;
 +
    text-align: justify;
 +
}
 +
div.navigation {
 +
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
 +
}
 +
ul.thumbs {
 +
    clear: both;
 +
    margin: 0;
 +
    padding: 0;
 +
    width: 280px;
 +
    height: 500px;
 +
}
 +
ul.thumbs li {
 +
    float: left;
 +
    padding: 0;
 +
    margin: 5px 10px 5px 0;
 +
    list-style: none;
 +
}
 +
a.thumb {
 +
    padding: 2px;
 +
    display: block;
 +
    border: 1px solid #ccc;
 +
}
 +
ul.thumbs li.selected a.thumb {
 +
    background:rgb(46,43,52);
 +
}
 +
a.thumb:focus {
 +
    outline: none;
 +
}
 +
ul.thumbs img {
 +
    border: none;
 +
    display: block;
 +
}
 +
div.pagination {
 +
    clear: both;
 +
    line-height: 1.4em;
 +
    font-size: 17px;
 +
}
 +
div.navigation div.top {
 +
    margin-bottom: 12px;
 +
    height: 11px;
 +
}
 +
div.navigation div.bottom {
 +
    margin-top: 12px;
 +
}
 +
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
 +
    display: block;
 +
    float: left;
 +
    margin-right: 2px;
 +
    padding: 4px 7px 2px 7px;
 +
    border: 1px solid #ccc;
 +
}
 +
div.pagination a:hover {
 +
    background-color: rgb(46,43,52);
 +
    text-decoration: none;
 +
}
 +
div.pagination span.current {
 +
    font-weight: bold;
 +
    background-color:rgb(46,43,52);
 +
    border-color:rgb(46,43,52);
 +
    color: #fff;
 +
}
 +
div.pagination span.ellipsis {
 +
    border: none;
 +
    padding: 5px 0 3px 2px;
 +
}
 +
div.who-container{
 +
 
 +
}
 +
</style>
 +
 +
<script type="text/javascript" src="https://2013.igem.org/Team:Paris_Bettencourt/js/jquery.galleriffic.js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript" src="https://2013.igem.org/Team:Paris_Bettencourt/js/jquery.opacityrollover.js?action=raw&ctype=text/javascript"></script>
 +
 +
</head>
 +
</html>
 +
 +
<div id="page">
 +
<html>
 +
    <div id="who-container">
 +
<div style="float:left">
 +
<div id="thumbs">
 +
  <ul class="thumbs noscript">
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/f/f1/PB_2013-03-26_18.35.58.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/f/f1/PB_2013-03-26_18.35.58.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/6/60/PB_IMG_1849.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/6/60/PB_IMG_1849.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/b/bf/PB_IMG_1855.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/b/bf/PB_IMG_1855.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/9/97/PB_2013-03-26_18.35.34.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/9/97/PB_2013-03-26_18.35.34.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/f/f1/PB_IMG_1837.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/f/f1/PB_IMG_1837.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/a/a0/PB_2013-03-26_18.34.29.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/a/a0/PB_2013-03-26_18.34.29.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/5/5f/PB_2013-03-09_11.17.00.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/5/5f/PB_2013-03-09_11.17.00.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/3/38/PB_IMG_0107.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/3/38/PB_IMG_0107.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/1/11/PB_2013-03-09_10.36.18.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/1/11/PB_2013-03-09_10.36.18.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/0/07/PB_2013-03-09_12.24.28.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/0/07/PB_2013-03-09_12.24.28.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/d/da/PB_2013-03-09_11.20.32.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/d/da/PB_2013-03-09_11.20.32.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/9/91/PB_2013-03-09_12.18.47.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/9/91/PB_2013-03-09_12.18.47.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/2/25/PB_2013-03-09_12.19.58.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/2/25/PB_2013-03-09_12.19.58.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/0/0b/PB_2013-03-09_11.17.04.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/0/0b/PB_2013-03-09_11.17.04.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/8/89/PB_2013-03-09_10.56.34.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/8/89/PB_2013-03-09_10.56.34.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/4/40/PB_IMG_0953.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/4/40/PB_IMG_0953.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/c/ce/PB_IMG_0955.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/c/ce/PB_IMG_0955.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/6/61/PB_1262635_10151631474063861_185167950_o.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/6/61/PB_1262635_10151631474063861_185167950_o.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/5/56/PB_1236418_658866924132800_41116415_n.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/5/56/PB_1236418_658866924132800_41116415_n.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/5/54/PB_BSM8akJIEAAeXFu.jpg_large.jpg" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/5/54/PB_BSM8akJIEAAeXFu.jpg_large.jpg" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/6/60/PB_CIMG6408.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/6/60/PB_CIMG6408.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <!--<li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/b/bf/PB_CIMG6407.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/b/bf/PB_CIMG6407.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>-->
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/1/16/PB_IMG_0946.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/1/16/PB_IMG_0946.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
    <li>
 +
      <a class="thumb" href="https://static.igem.org/mediawiki/2013/5/50/PB_IMG_0167.JPG" title="">
 +
<img src="https://static.igem.org/mediawiki/2013/5/50/PB_IMG_0167.JPG" width="120px"/>
 +
              </a>
 +
              <div class="caption">
 +
              </div>
 +
    </li>
 +
  </ul>
 +
</div>
 +
</div>
 +
<div id="gallery" class="content">
 +
  <div id="controls" class="controls"></div>
 +
  <div class="slideshow-container">
 +
    <div id="loading" class="loader"></div>
 +
    <div id="slideshow" class="slideshow"></div>
 +
  </div>
 +
  <div id="caption" class="caption-container"></div>
 +
</div>
 +
    </div>
 +
    <div style="clear: both;"></div>
 +
    <script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
$('div.navigation').css({'width' : '200px', 'float' : 'left'});
 +
$('div.content').css('display', 'block');
 +
// Initially set opacity on thumbs and add
 +
      // additional styling for hover effect on thumbs
 +
      var onMouseOutOpacity = 0.67;
 +
      $('#thumbs ul.thumbs li').opacityrollover({
 +
      mouseOutOpacity:  onMouseOutOpacity,
 +
      mouseOverOpacity:  1.0,
 +
      fadeSpeed:        'fast',
 +
      exemptionSelector: '.selected'
 +
      });
 +
 +
var gallery = $('#thumbs').galleriffic({
 +
delay:                    2000, // in milliseconds
 +
        numThumbs:                9, // The number of thumbnails to show page
 +
        preloadAhead:              9, // Set to -1 to preload all images
 +
        enableTopPager:            true,
 +
        enableBottomPager:        true,
 +
        maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
 +
        imageContainerSel:        '#slideshow', // The CSS selector for the element within which the main slideshow image should be rendered
 +
        controlsContainerSel:      '#controls', // The CSS selector for the element within which the slideshow controls should be rendered
 +
        captionContainerSel:      '#caption', // The CSS selector for the element within which the captions should be rendered
 +
        loadingContainerSel:      '#loading', // The CSS selector for the element within which should be shown when an image is loading
 +
        renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered
 +
        renderNavControls:        true, // Specifies whether the slideshow's Next and Previous links should be rendered
 +
        playLinkText:              '',
 +
        pauseLinkText:            '',
 +
        prevLinkText:              '',
 +
        nextLinkText:              '',
 +
        nextPageLinkText:          'Next &rsaquo;',
 +
        prevPageLinkText:          '&lsaquo; Previous',
 +
        enableHistory:            false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
 +
        enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
 +
        autoStart:                false, // Specifies whether the slideshow should be playing or paused when the page first loads
 +
        syncTransitions:          false, // Specifies whether the out and in transitions occur simultaneously or distinctly
 +
        defaultTransitionDuration: 100, // If using the default transitions, specifies the duration of the transitions
 +
        onSlideChange:            function(prevIndex, nextIndex) {
 +
        // 'this' refers to the gallery, which is an extension of $('#thumbs')
 +
      this.find('ul.thumbs').children()
 +
      .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
 +
      .eq(nextIndex).fadeTo('fast', 1.0);
 +
      },
 +
      onPageTransitionOut:      function(callback) {
 +
      this.fadeTo('fast', 0.0, callback);
 +
      },
 +
      onPageTransitionIn:        function() {
 +
      this.fadeTo('fast', 1.0);
 +
      }
 +
    });
 +
});
 +
    </script>
 +
 +
<div style="float:right;font-size:12px;margin-top:20px">
 +
<b>This gallery was based on Trent Foley's <a href="http://www.twospy.com/galleriffic/">code</a></b>
 +
</div>
 +
 +
</html>
</div>
</div>
-
<!-- ########## Don't edit below ########## -->
 
{{:Team:Paris_Bettencourt/footer}}
{{:Team:Paris_Bettencourt/footer}}

Latest revision as of 14:51, 14 October 2013

This gallery was based on Trent Foley's code

Centre for Research and Interdisciplinarity (CRI)
Faculty of Medicine Cochin Port-Royal, South wing, 2nd floor
Paris Descartes University
24, rue du Faubourg Saint Jacques
75014 Paris, France
+33 1 44 41 25 22/25
team2013@igem-paris.org
Hit Counter by Digits
Copyright (c) 2013 igem.org. All rights reserved.
Retrieved from "http://2013.igem.org/Team:Paris_Bettencourt/Gallery"