保持Fancybox縮略圖移動？

Question

有沒有辦法讓Fancybox縮略圖在你選擇的時候四處移動？ 當前，每次單擊縮略圖時，它都會重新定位縮略圖。

這種行爲在這裏可以看到在「擴展功能 - 縮略圖幫手」部分：http://fancyapps.com/fancybox/

我只想整個縮略圖行的中心位置，是靜態的。

Answer 1

它來到了修改的源：

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.1.4"></script> 

目前選擇的縮略圖（obj.index）用於計算縮略圖列表中的「左」的CSS屬性，無論是在初始化和更新：

 init: function (opts, obj) { 
      ... 
      this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))); 
     }, 

...

 //Center list 
     onUpdate: function (opts, obj) { 
      if (this.list) { 
       this.list.stop(true).animate({ 
        'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)) 
       }, 150); 
      } 
     }, 

在這兩個場合，我需要它拉澤以縮略圖列表爲中心（我不能簡單地刪除'onUpdate'代碼，因爲它用於重新計算窗口大小何時更改以及何時選擇縮略圖）。

因此，使用 'obj.group.length/2' 而不是 'obj.index' 的伎倆：

 init: function (opts, obj) { 
      ... 
      this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.group.length/2 * this.width + this.width * 0.5))); 
     }, 

...

 //Center list 
     onUpdate: function (opts, obj) { 
      if (this.list) { 
       this.list.stop(true).animate({ 
        'left': Math.floor($(window).width() * 0.5 - (obj.group.length/2 * this.width + this.width * 0.5)) 
       }, 150); 
      } 
     }, 

Answer 2

爲了使用縮略圖幫手，還必須加載以下JS文件：

<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.1.4"></script> 

接近底部是下面的代碼：

//Center list 
     onUpdate: function (opts, obj) { 
      if (this.list) { 
       this.list.stop(true).animate({ 
        'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)) 
       }, 150); 
      } 
     }, 

它改成這樣：

//Center list 
     onUpdate: function (opts, obj) { 
      /* if (this.list) { 
       this.list.stop(true).animate({ 
        'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)) 
       }, 150); 
      } */ 
     }, 

而這應該阻止它從動畫。我沒有測試它，因爲我沒有安裝它，但從閱讀代碼，我認爲這是什麼在移動縮略圖。試試看，讓我知道它是否有效。

Answer 3

爲了防止縮略圖幫手（中心）的默​​認行爲，你可以簡單地重新定義onUpdate方法：

// Include this somewhere after main fancybox scripts 
$.fancybox.helpers.thumbs.onUpdate = function() {}; 

就是這樣，你甚至不必用的fancybox源代碼的混亂。

這是超級簡單的測試：打開http://fancyapps.com/fancybox/#examples，在控制檯中執行上面的代碼片段，然後檢查fancybox的工作方式。

Answer 4

保持原來的運動，如果縮略圖列表大於窗口，請在jquery.fancybox-thumbs.js聲明後插入此代碼：

<script type="text/javascript"> 
    // keep the Fancybox thumbnails from moving around if not needed 
    $.fancybox.helpers.thumbs.onUpdate_backup = $.fancybox.helpers.thumbs.onUpdate; 
    $.fancybox.helpers.thumbs.onUpdate = function(opts, obj) { 
     if (this.list) { 
      var thumbs_total_width = (opts.width + 4) * obj.group.length; 
      if(thumbs_total_width > $(window).width()) 
       $.fancybox.helpers.thumbs.onUpdate_backup(opts, obj); 
      else { 
       this.list.stop(true).animate({ 
        'left': Math.floor($(window).width() * 0.5 - (thumbs_total_width * 0.5)) 
       }, 150); 
      } 
     } 
    }; 
</script>