縮略圖幫手的fancybox v2.0.6

Question

我使用最新的fancybox與縮略圖幫手。它工作正常。我想知道我是否可以更改縮略圖選項。當您單擊任何拇指時，當前縮略圖的位置發生變化。如果從第一個圖像到最後一個圖像，流程是從左到右。我希望拇指被固定爲對齊中心。 有誰知道如何實現它？ 感謝

Answer 1

我不得不與我曾在一個自定義腳本thumbnailer的一個類似的問題。您需要編輯助手文件夾中的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的兼容性，使用@ Scottorchard的答案與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的答案（我不能作出評論），如果你想改變德拇指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)))); 

Answer 5

＃替換的fancybox，大拇指的UL

與

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

}