1

ファンシーボックス2。

HTML:

<p><b><h3>Gallery</h3></b></p>   
<br />
<p><a class="Image" rel="group" href="http://farm4.staticflickr.com/3787/9028269192_9b4ddf345d_b.jpg" title="Tolpis barbata (mariluzpicado)">
<img src="http://farm4.staticflickr.com/3787/9028269192_9b4ddf345d_m.jpg" alt="" />
</a>
<a class="Image" rel="group" href="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_b.jpg" title="(dSavin)">
<img src="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_m.jpg" alt="" />
</a>
<a class="Image" rel="group" href="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_b.jpg" title="a ride in blue? (cembayir_photography)">
<img src="http://farm9.staticflickr.com/8522/8478415115_152c6f5e55_m.jpg" alt="" />
</a>
<a class="Image" rel="group" href="http://farm9.staticflickr.com/8366/8483546751_86494ae914_b.jpg" title="reedit... (h_di)">
<img src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg" alt="" />
</a></p>
<br /> 
<p><h3><b>Single Image</b></h3></p>
<br />
<p><a class="Image" rel="single" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg" title="Singapore from the air (Andrew Tan 2011)">
<img src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_m.jpg" alt="" />
 </a></p>

デフォルトでは、循環ナビゲーションが有効になっており (「ループ」オプションの値は「true」に設定されています)、ギャラリーと単一の画像の場合と同様に、すべてのボタン ヘルパー ボタンが表示されます。
例

CSS: 

$(document).ready(function() {
$(".Image").fancybox({
    prevEffect: 'none',
    nextEffect: 'none',
    closeBtn: false,
    helpers: {
    title   : { type : 'inside' },
    buttons : {}
    }
});
});

「ループ」オプションの値が「false」に設定されている場合、ギャラリー、単一画像、および単一画像の場合と同様に循環ナビゲーションが無効になり、ボタン ヘルパー ボタンは表示されません。
例

CSS: 

$(document).ready(function() {
$(".Image").fancybox({
    prevEffect: 'none',
    nextEffect: 'none',
    closeBtn: false,
    loop : false,
    helpers: {
    title   : { type : 'inside' },
    buttons : {}
    }
});
});

1) ボタン ヘルパーの [次へ]、[再生/一時停止]、[前へ] ボタンを単一の画像に対してのみ無効にする方法は?
+
2) ギャラリーでこのすべてのボタンを有効にし、最後の画像の [次へ] ボタンと最後の画像の [前]、[再生/一時停止] ボタンを含める方法は?

私はこのようなことを試みていますが、何も起こりません:

afterShow: function () {
    if (this.group.length < 2) {
    $("#fancybox-buttons").find('.btnPrev').addClass('btnDisabled');
    $("#fancybox-buttons").find('.btnNext').addClass('btnDisabled');
    $("#fancybox-buttons").find('.btnPlay').addClass('btnDisabled');}

else if (!this.group.length > 1){
    $("#fancybox-buttons").find('.btnPrev').removeClass('btnDisabled');
    $("#fancybox-buttons").find('.btnNext').removeClass('btnDisabled');
    $("#fancybox-buttons").find('.btnPlay').removeClass('btnDisabled');}
}
4

1 に答える 1