2

ページ上で 2 つの異なる方法で fancybox を呼び出す必要があります。1 つは " fitToView : false" で、もう 1 つは " fitToView : true" です。これらの画像を同じギャラリーに入れたいのですが、2 つの別個の fancybox 関数から呼び出されているため、これらが同じギャラリーにあるかのように動作することはできません。" " を動的に適用する方法、fitToView : falseまたは探しているものを達成するのに役立つ別のソリューションはありますか?

ここに私の2つの機能があります：

$('.fancybox')
    .attr('rel', 'gallery')
    .fancybox({
        padding : 5,
        fitToView : true,
        openEffect  : 'elastic'
    });
$('.fancyboxer')
    .attr('rel', 'gallery')
    .fancybox({
        padding : 5,
        fitToView : false,
        openEffect  : 'elastic'
    });
4

1 に答える 1

1

コールバックを使用して、各要素の fancybox API オプションを拡張できafterLoadます。

ただし、最初に、どの要素がfitToView設定されるかを区別する方法が必要falseです (デフォルト値は ですtrue) 。

これは、fancybox にバインドされたアンカーにスペシャルclassを設定することで実現できます (実際には、fancybox をすべての要素に対して単一で呼び出します)。 class

<a class="fancybox" href="{target}">open image with fitToView : true (default)</a>
<a class="fancybox nofit" href="{target}">open image with fitToView : false</a>

2 番目の要素には class があることに注意nofitしてください。次に、afterLoadコールバック内で、現在の要素にクラスがあるかどうかを評価し、オプションセットをif so likenofitに拡張します。fitToViewfalse

$(function () {
    $(".fancybox")
    .attr("rel", "gallery")
    .fancybox({
        padding : 5,
        openEffect  : 'elastic',
        afterLoad: function () {
            if ($(this.element).hasClass("nofit")) {
                $.extend(this, {
                    fitToView: false
                });
            }
        }
    });
});

JSFIDDLEを参照してください

于 2013-03-29T08:03:01.150 に答える