画廊 具有单个幻灯片容器的多个缩略图库
Galleriffic Multiple thumbnail galleries with single slideshow container
我设法将这个优秀的示例应用于我的需求：
http://code.google.com/p/galleriffic/issues/attachmentText?id=76&aid=-3045121742886940548&name=example-2.html&token=4nlvmgAfVpc5whcXC9UEqHZaSz0%3A1339257750721
有一个小小的转折：两个画廊都将图像应用于同一个幻灯片容器，因此不是让"#thumbs0"缩略图更改"#slideshow0"中的图像，而不是让"#thumbs1"缩略图更改"#slideshow1"中的图像，我将它们都设置为在"#slideshow"中更改图像。
这是因为我使用选项卡来分隔 2 种不同类别的缩略图，这些缩略图会在一个幻灯片容器中更改图像。
我通过将imageContainerSel设置为"#slideshow"而不是像示例中的"#slideshow"+i来做到这一点。
这是代码：
.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，因此在初始页面加载时，图像出现两次，一个在另一个下面。只有在单击不同的缩略图后，第二张图像才会消失，一切都按预期工作。
我该如何解决？
我设法自己解决了这个问题。
如果有人感兴趣，这是解决方案：
我给第一个画廊的第一个拇指起了一个独特的名字：
<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"则不会运行。
就我而言，这样做只会隐藏第一个图像。我有不同数量的画廊/文件夹将被使用，因此在 3 个画廊的情况下，其他 2 张图像正在显示。
现在，当我将其从：
var buuga = this.data[nextIndex].hash;
自：
var buuga = this.data[imageData.index].hash;
它在页面加载时完美运行。除了第一个图像是单击缩略图时显示的唯一图像。最终发生的事情是，画廊试图将三幅图像附加到第一个跨度。
我最终做的是添加两个全局变量：计数数字和文件夹总数。
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++;
然后我让它首先显示系列中的最后一个文件夹，因为这是加载的图像。
相关文章：
- Javascript，有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- 如何使用javascript获取嵌套对象中所有子对象的单个属性
- 是否可以禁用jquery中的单个单选按钮
- 引导程序:在导航栏中，显示悬停在单个位置的基于Li Link的不同内容
- 通过点击按钮翻转缩略图
- 使用jquery选中/取消选中单个复选框
- 单个页面上有多个标记表单
- 在不破坏未定义函数的情况下，对多个视图使用单个js文件
- 用于多个类事件Jquery的单个函数
- 仅使用文件对象选择单个文件
- 如何使用单个表单填写多个表单
- 如何将html打包到单个应用程序中
- 更改图层中单个矢量特征的图标
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 在ES6中，模块将导致多个网络调用，因为两个模块不能在单个文件中定义
- 如何解析Brightcove视频中的视频缩略图
- SIMPLE Javascript代码，用于显示谷歌电子表格中单个字段的数据
- 如何删除视频's缩略图时's加载在JW Player's闪光模式
- 画廊 具有单个幻灯片容器的多个缩略图库
- 用于小图像(或用于更多图像）的引导缩略图单个图像滑块
