Question

我有缩略图。如果您点击这些缩略图，fancybox会启动以显示更大的图像。在视口的顶部是一个带箭头的导航栏，可让您单击以在库中向左或向右移动，或者如果缩略图是视频则播放视频。我不想在导航栏中放置这些按钮。我想要的只是调整大小按钮和退出按钮。

我在我的js文件中试过这个：

$(".fancybox:not(.video)").fancybox({
        helpers: {
            buttons: {
                arrows: false,
            }
        }
    });

我也按照其他答案尝试了这个：

$(".fancybox:not(.video)").fancybox({
        arrows : false,
        helpers: {
            buttons: {}
        }
    });

我也尝试过：

    $(".fancybox:not(.video)").fancybox({
        helpers: {
            buttons: {},
            arrows : false
        }
    });

它不起作用，我将不胜感激任何帮助。

Answer 1

您可以使用按钮的tpl选项添加/删除所需的按钮。这是默认模板：

tpl: '<div id="fancybox-buttons"><ul>' +
    '<li><a class="btnPrev" title="Previous" href="javascript:;"></a></li>' +
    '<li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li>' +
    '<li><a class="btnNext" title="Next" href="javascript:;"></a></li>' +
    '<li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li>' +
    '<li><a class="btnClose" title="Close" href="javascript:;"></a></li>' +
    '</ul></div>'

从这里，您可以删除自定义脚本中不需要的按钮，如：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        helpers: {
            buttons: {
                tpl: '<div id="fancybox-buttons"><ul>' +
                    '<li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li>' +
                    '<li><a class="btnClose" title="Close" href="javascript:;"></a></li>' +
                    '</ul></div>'
            }
        }
    }); // fancybox
}); // ready

此外，您可能需要调整fancybox按钮区域的width，因为您要删除其中的一些。您可以添加此CSS规则：

#fancybox-buttons ul {
    /* 166 for 4 buttons */
    width: 86px !important;
}

...适用于剩下的2个按钮（方便时调整）

注意：play按钮不是播放视频，而是启动/暂停fancybox元素库（如果有）

如何删除FancyBox视口顶部导航栏中的FancyBox prev / play / next箭头？

1 个答案: