jquery - 缩略图助手 fancybox v2.0.6

Question

我正在使用带有缩略图助手的最新幻想框。它工作正常。我想知道我是否可以更改缩略图选项。当前，当您单击任何缩略图时，缩略图的位置会发生变化。如果您从第一个图像到最后一个图像，则流程是从左到右的。我希望将拇指固定为对齐中心。有谁知道如何实现它？谢谢

score 3 · Accepted Answer

我在处理的自定义缩略图脚本中遇到了类似的问题。您需要编辑 helpers 文件夹中的 jquery.fancybox-thumbs.js。

将第 116 行更改为：

this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - ((this.width * (obj.group.length) * 0.5))));

然后第 148 行到：

'left': Math.floor($(window).width() * 0.5 - (this.width * (obj.group.length) * 0.5))

这应该使拇指居中并在更改图像时删除动画，同时在调整窗口大小时保持拇指居中。

score 2 · Accepted Answer

对于 iOS 兼容性，请使用带有 javascript 属性的@Scottorchard 答案，window.innerWidth而不是$(window).width()：

第 116 行：

this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor(window.innerWidth * 0.5 - ((this.width * (obj.group.length) * 0.5))));

第 148 行：

'left': Math.floor(window.innerWidth * 0.5 - (this.width * (obj.group.length) * 0.5))

score 1 · Accepted Answer

实际上有一个更简单的解决方案。进入缩略图的 CSS 并更改 ul 的边距：

ul {
    margin: 0 auto;
}

就像您对任何普通网页一样。这对我来说非常有效。

score 0 · Accepted Answer

替换#fancybox-thumbs ul

和

#fancybox-thumbs ul {
position: relative;
list-style: none;
margin: auto;
padding: 0;
left: 0 !important;

}

score 0 · Accepted Answer

只是补充 scottorchard 的答案（我还不能发表评论），如果您想更改拇指的 de css 规范，请注意第 116 行：

“3”表示边框，“0.71”表示拇指的宽度。更改 css 属性后，您也必须更改此 js 行。

我的是这样的：

this.list.width(this.width * (obj.group.length + 3)).css('left', Math.floor($(window).width() * 0.71 - ((this.width * (obj.group.length) * 0.71))));

5 回答 5