Team:SydneyUni Australia/Team

From 2013.igem.org

(Difference between revisions)
Line 346: Line 346:
<div id="footer">&copy; 2009 Trent Foley</div>
<div id="footer">&copy; 2009 Trent Foley</div>
<script type="text/javascript">
<script type="text/javascript">
-
// We only want these styles applied when javascript is enabled
+
jQuery(document).ready(function($) {
-
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
+
// We only want these styles applied when javascript is enabled
-
$('div.content').css('display', 'block');
+
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
 +
$('div.content').css('display', 'block');
-
$(document).ready(function() {
+
// Initially set opacity on thumbs and add
-
// Initialize Minimal Galleriffic Gallery
+
// additional styling for hover effect on thumbs
-
$('#thumbs').galleriffic({
+
var onMouseOutOpacity = 0.67;
-
imageContainerSel:     '#slideshow',
+
$('#thumbs ul.thumbs li').opacityrollover({
-
controlsContainerSel:   '#controls'
+
mouseOutOpacity:  onMouseOutOpacity,
 +
mouseOverOpacity:  1.0,
 +
fadeSpeed:        'fast',
 +
exemptionSelector: '.selected'
 +
});
 +
 +
// Initialize Advanced Galleriffic Gallery
 +
var gallery = $('#thumbs').galleriffic({
 +
delay:                    2500,
 +
numThumbs:                15,
 +
preloadAhead:              10,
 +
enableTopPager:            true,
 +
enableBottomPager:        true,
 +
maxPagesToShow:            7,
 +
imageContainerSel:         '#slideshow',
 +
controlsContainerSel:     '#controls',
 +
captionContainerSel:      '#caption',
 +
loadingContainerSel:      '#loading',
 +
renderSSControls:          true,
 +
renderNavControls:        true,
 +
playLinkText:              'Play Slideshow',
 +
pauseLinkText:            'Pause Slideshow',
 +
prevLinkText:              '&lsaquo; Previous Photo',
 +
nextLinkText:              'Next Photo &rsaquo;',
 +
nextPageLinkText:          'Next &rsaquo;',
 +
prevPageLinkText:          '&lsaquo; Prev',
 +
enableHistory:            false,
 +
autoStart:                false,
 +
syncTransitions:          true,
 +
defaultTransitionDuration: 900,
 +
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>
</script>
</html>
</html>

Revision as of 13:10, 26 September 2013


SydneyUniversity Top Banner.jpg SydneyUniversity Bottom Banner.jpg

Galleriffic

Minimal implementation