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 ›', | ||
+ | prevPageLinkText: '‹ 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> | ||
- | |||
{{:Team:Paris_Bettencourt/footer}} | {{:Team:Paris_Bettencourt/footer}} |
Revision as of 16:13, 1 October 2013
<body>
Team Gallery