我是jQuery的新手，所以请跟我一起玩：
情况：
我设法将这个优秀的例子应用于我的需求：
稍微扭曲：两个图库都将图像应用于同一幻灯片容器
所以不要让“＃thumbs0”缩略图更改“＃slideshow0”中的图像，而“＃thumbs1”缩略图更改“＃slideshow1”中的图像，我将它们都设置为更改“#slideshow”中的图像
这是因为我使用标签分隔2个不同类别的缩略图，这些缩略图会在一个幻灯片容器中更改图像。
我是通过将imageContainerSel设置为'#slideshow'来代替'＃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，因此在初始页面加载时，图像会出现两次，一个在另一个之下。只有在点击不同的缩略图后，第二张图像才会消失，一切都按预期工作。
我该如何解决？
答案 0 :(得分：1)
所以..等了几天才得到答案，我最终设法自己解决了这个问题。
如果有人感兴趣，这是解决方案：
我在第一个图库中给了第一个拇指一个独特的名字：
<a class="thumb" name="first" href="images/1.jpg" title="Title #0">
并修改了jquery.galleriffic.js：
var buuga = this.data[nextIndex].hash;
if(buuga !== 'first') {
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'"> </a></span>')
.find('span.current').css('opacity', '0');
}
我更改的是添加'buuga'变量来存储名称，并在“if”条件下包装构建图像的新隐藏范围的部分，如果名称为“first”，则不会运行。< / p>
答案 1 :(得分：0)
在我的情况下，这样做只会隐藏第一个图像。我将使用不同数量的画廊/文件夹，因此在3个画廊的情况下，其他2个图像正在显示。
现在，当我从：
更改它时var buuga = this.data[nextIndex].hash;
要：
var buuga = this.data[imageData.index].hash;
它在页面加载时完美运行。除了第一个图像是单击缩略图时显示的唯一图像。最终发生的事情是，galleriffic试图在第一个跨度上附加三张图像。
我最终做的是添加两个全局变量：一个计数数字和一个总文件夹数量。
firstImageCount = 0;
totalFolderCount = 3; // this number is generated with php
以及我最终对jquery.galleriffic.js做了什么：
// Construct new hidden span for the image
var firstHash = this.data[nextIndex].hash; // I changed buuga to this more descriptive name
if(firstImageCount >= totalFolderCount-1){
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'"> </a></span>')
.find('span.current').css('opacity', '0');
}
firstImageCount++;
然后我让它首先显示系列中的最后一个文件夹，因为那是加载的图像。