thumbnail helper fancybox v2.0.6

Question

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

Answer 1

我在使用自定义缩略图脚本时遇到了类似的问题。您需要在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))

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

Answer 2

对于iOS兼容性，请使用@jctorchard的答案与javascript的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))

Answer 3

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

ul {
    margin: 0 auto;
} 

就像你对任何普通网页一样。这对我很有用。

Answer 4

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

＆＃39; 3＆＃39;是指边界，以及0.71＆＃39;表示拇指的宽度尺寸。更改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))));

Answer 5

替换#fancybox-thumbs ul

与

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

}