Javascript 防止Fancybox缩略图四处移动？

当您选择一个Fancybox缩略图时，有没有办法防止它四处移动？ 当前，每次单击缩略图时，它都会重新定位该行

此行为可在此处的“扩展功能-缩略图帮助器”部分中看到：

---

我只希望整个缩略图行居中且静止。

为了使用缩略图辅助程序，还必须加载以下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);
            } */
        },

---

这将阻止它制作动画。我没有测试它，因为我没有安装它，但是从阅读代码来看，我认为这就是移动缩略图的原因。请试用，并告诉我它是否有效。

要使用缩略图帮助器，还必须加载以下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);
            } */
        },

---

这将阻止它制作动画。我没有测试它，因为我没有安装它，但是从阅读代码来看，我认为这就是移动缩略图的原因。试试看，让我知道它是否有效。

要防止缩略图辅助对象的默认行为（居中），您只需重新定义

onUpdate

方法：

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

就这样，你甚至不必去搞乱Fancybox的源代码

---

测试非常简单：在控制台中打开并执行上面的代码段，然后检查fancybox的工作方式。

要防止缩略图帮助器的默认行为（居中），只需重新定义

onUpdate

方法：

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

就这样，你甚至不必去搞乱Fancybox的源代码

---

测试非常简单：在控制台中打开并执行上面的代码片段，然后检查fancybox的工作方式。

最终要修改以下代码的源代码：

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

在这两种情况下，我都需要它将缩略图列表居中（我不能简单地去掉“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)));
        },

---

归根结底是修改以下内容的来源：

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

在这两种情况下，我都需要它将缩略图列表居中（我不能简单地去掉“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)));
        },

---

如果缩略图列表大于窗口，要保持原始移动，请在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>

//如果不需要，请防止Fancybox缩略图四处移动
$.fancybox.helpers.thumbs.onUpdate\u backup=$.fancybox.helpers.thumbs.onUpdate；
$.fancybox.helpers.thumbs.onUpdate=函数（opts，obj）{
如果（此列表）{
变量thumbs_total_width=（opts.width+4）*obj.group.length；
如果（拇指总宽度>$（窗口）.width（））
$.fancybox.helpers.thumbs.onUpdate\u备份（opts，obj）；
否则{
此.list.stop（true）.设置动画({
“左”：数学地板（$（窗口）.width（）*0.5-（拇指\总宽度*0.5））
}, 150);
}
}
};

要在缩略图列表大于窗口时保持原始移动，请在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>

//如果不需要，请防止Fancybox缩略图四处移动
$.fancybox.helpers.thumbs.onUpdate\u backup=$.fancybox.helpers.thumbs.onUpdate；
$.fancybox.helpers.thumbs.onUpdate=函数（opts，obj）{
如果（此列表）{
变量thumbs_total_width=（opts.width+4）*obj.group.length；
如果（拇指总宽度>$（窗口）.width（））
$.fancybox.helpers.thumbs.onUpdate\u备份（opts，obj）；
否则{
此.list.stop（true）.设置动画({
“左”：数学地板（$（窗口）.width（）*0.5-（拇指\总宽度*0.5））
}, 150);
}
}
};

不太清楚。也许是一些演示？我很抱歉-如果需要更多的澄清，请告诉我。不是很清楚。也许是一些演示？我很抱歉-让我知道是否需要更多的澄清。谢谢-我最终修改了初始化和“onUpdate”代码。我不能仅仅去掉“onUpdate”代码，因为它用于在窗口大小更改时重新计算。谢谢-我最终修改了初始化和“onUpdate”代码。我不能只删除“onUpdate”代码，因为它用于在窗口大小更改时重新计算。你看到我提到的我不能只删除“onUpdate”代码（我也对你的答案发表了评论）了吗？所以，不，你的回答没有给出我想要的行为。你看到我提到我不能摆脱“onUpdate”代码（我也对你的回答发表了评论）了吗？所以，不，你的回答没有给我我想要的行为。我认为这是很酷的方式！我不想更改fancybox源js文件！我认为这是很酷的方式！我不想更改fancybox源js文件！使用此代码，仅当覆盖未锁定时，拇指才精确居中。否则，窗口滚动条（实际上是叠加滚动条）会出现16个像素的小间隙。使用此代码，只有叠加未锁定时，拇指才能精确居中。否则，与窗口滚动条（实际上是叠加滚动条）对应的16个像素的小间隙可能会出现。