Gallerifficで選択した要素に問題があります。画像を選択すると、正しい親指が強調表示されず、前の親指が強調表示されます。
ウェブサイトのすぐに死んでいるリンクを削除するために編集されました。
JS：
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '100%', 'clear' : 'both'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = .7;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: false,
renderNavControls: false,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ 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>
CSS
div.slideshow a.advance-link {
display: block;
width: 820px;
height: 388px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 0px; /* 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.download {
float: right;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
}
div.navigation {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
text-align: left;
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
background-color: #FFF;
}
ul.thumbs li {
display:inline;
margin-right: 10px;
padding: 0;
list-style: none;
}
a.thumb {
display:inline-block;
text-decoration: none;
}
ul.thumbs li.selected a.thumb {
color: #0C3
}
a.thumb:focus {
outline: none;
text-decoration: none;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
}
div.navigation div.top {
padding-top: 10px;
margin-top: 10px;
text-align: center;
background-color: #fff;
}
div.navigation div.bottom {
text-align: center;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
}
div.pagination a:hover {
background-color: #eee;
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.pagination span.ellipsis {
border: none;
}