保持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>