如何从Button Helper中禁用单个图像的按钮，并为图库启用所有这些按钮？ （Fancybox 2）

Question

Fancybox 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”），就像图库一样，单个图像，所有按钮帮助按钮都可见。
Example

CSS：

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

如果“loop”选项设置为值“false”，则循环导航将被禁用，就像图库一样，单个图像和单个图像按钮助手按钮不可见。
Example

CSS：

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

1）如何禁用Button Helper上的Next，Play / Pause，Previous按钮仅用于单张图像？
+
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');}
}

Answer 1

忘记查找元素和/或添加 btnDisabled 类等。只需在afterShow回调中添加此条件：

afterShow: function () {
    if(this.group.length < 2){
        // gallery has a single element so disable loop
        $.extend(this,{
            loop: false
        });
    }
    // more options, etc. 
} // END afterShow

查看 JSFIDDLE ....或您更新的 JSFIDDLE