私はこの優れた例を自分のニーズに適用することができました。
少しひねりを加えて：両方のギャラリーが同じスライドショーコンテナに画像を適用するため、「＃thumbs0」のサムネイルではなく「#slideshow0」の画像を変更し、「＃thumbs1」のサムネイルでは「#slideshow1」の画像を変更します。 「#slideshow」の画像を変更するように両方を設定します。
これは、タブを使用して2つの異なるカテゴリのサムネイルを分離し、1つのスライドショーコンテナ内の画像を変更するためです。
これを行うには、例のように'#slideshow' + iではなく、imageContainerSelを'#slideshow'に設定します。
コードは次のとおりです。
HTML：
<div id="tabs">
<div class="each-gallery">
<div id="thumbs0" class="navigation">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
</ul>
<div id="tabs-1">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="images/1.jpg" title="Title #0">
<img src="images/thumbs/1.jpg" alt="Title #0" />
Title 1
</a>
<div class="caption">
<div class="image-title">Title 1</div>
<div class="image-desc">Description 1</div>
</div>
</li>
<li>
<a class="thumb" href="images/2.jpg" title="Title #0">
<img src="images/thumbs/2.jpg" alt="Title #0" />
Title 2
</a>
<div class="caption">
<div class="image-title">Title 2</div>
<div class="image-desc">Description 2</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="tabs-2">
<div class="each-gallery">
<div id="thumbs1" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="images/3.jpg" title="Title #0">
<img src="images/thumbs/3.jpg" alt="Title #0" />
Title 3
</a>
<div class="caption">
<div class="image-title">Title 3</div>
<div class="image-desc">Description 3</div>
</div>
</li>
<li>
<a class="thumb" href="images/4.jpg" title="Title #0">
<img src="images/thumbs/4.jpg" alt="Title #0" />
Title 4
</a>
<div class="caption">
<div class="image-title">Title 4</div>
<div class="image-desc">Description 4</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Javascript：
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '960px', 'float' : 'left'});
$('div.content').css('display', 'block');
$(".each-gallery").each(function(i){
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs + i + ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs'+i).galleriffic({
delay: 2500,
numThumbs: 20,
preloadAhead: 0,
enableTopPager: false,
enableBottomPager: false,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
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>
問題：
ページの読み込み時に、両方のギャラリーが最初の画像を同時に#slideshowに読み込むため、最初のページの読み込み時に、画像が上下に2回表示されます。別のサムネイルをクリックした後にのみ、2番目の画像が消え、すべてが期待どおりに機能します。
どうすれば修正できますか？