Question

有没有办法让Fancybox缩略图在您选择时不会移动？目前，每次单击缩略图时，它都会重新定位缩略图行。

此行为可以在“扩展功能 - 缩略图帮助程序”部分下看到：http://fancyapps.com/fancybox/

我只想让整个缩略图行居中和静止。

Answer 1

要使用缩略图助手，还必须加载以下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 2

要防止缩略图助手的默认行为（居中），您只需重新定义onUpdate方法：

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

就是这样，你甚至不必乱用Fancybox源代码。

测试非常简单：打开http://fancyapps.com/fancybox/#examples，在控制台中执行上面的代码段，然后查看fancybox的工作原理。

Answer 3

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

Answer 4

归结为修改源代码：

<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);
            }
        },

保持Fancybox缩略图不移动？

4 个答案: