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

サムネイル リストがウィンドウよりも大きい場合に元の動きを維持するには、次のコードを 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 に答える
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 に答える
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.index」の代わりに「obj.group.length / 2」を使用すると、次のようになります。

        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 に答える