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”），对于画廊，对于单个图像，并且所有 Button Helper 按钮都是可见的。
例子

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

2

忘记查找元素和/或添加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

于 2013-08-01T18:21:28.417 回答