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}}")
Line 1: Line 1:
{{:Team:Paris_Bettencourt/header}}
{{:Team:Paris_Bettencourt/header}}
-
<div id="grouptitle">Team Gallery</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: 630px;
 +
}
 +
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: 630px;
 +
    height: 502px; /* 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: 630px;
 +
    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: 470px;
 +
}
 +
span.image-caption {
 +
    display: block;
 +
    position: absolute;
 +
    width: 630px;
 +
    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: 470px;
 +
}
 +
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="grouptitle">Team Gallery </div>
<div id="page">
<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/1/1c/PB_Team_Who_big.gif" title="Idonnya Aghoghogbe">
 +
<img src="https://static.igem.org/mediawiki/2013/e/e9/PB_Team_Who.jpg"/>
 +
              </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:                8, // The number of thumbnails to show page
 +
        preloadAhead:              8, // 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:              'Play',
 +
        pauseLinkText:            'Pause',
 +
        prevLinkText:              'Previous',
 +
        nextLinkText:              'Next',
 +
        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>
 +
</html>
</div>
</div>
-
<!-- ########## Don't edit below ########## -->
 
{{:Team:Paris_Bettencourt/footer}}
{{:Team:Paris_Bettencourt/footer}}

Revision as of 16:13, 1 October 2013

<body>

Team Gallery

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"