2

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

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

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

4

4 回答 4

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

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

于 2013-02-16T16:06:52.573 回答
1

为了防止缩略图助手（居中）的默认行为，您可以简单地重新定义onUpdate方法：

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

就是这样，您甚至不必弄乱 Fancybox 源代码。

它非常容易测试：打开http://fancyapps.com/fancybox/#examples，在控制台中执行上面的代码段，然后检查fancybox 是如何工作的。

于 2013-02-16T16:19:45.553 回答
1

如果缩略图列表大于窗口，要保持原始移动，请在 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>
于 2014-06-20T09:18:56.313 回答
0

它归结为修改以下来源：

<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);
            }
        },
于 2013-02-16T17:10:03.133 回答