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

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 选项来 add/remove 您想要的按钮。这是默认模板：

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 按钮不是用来 播放视频 而是 start/pause 一个 fancybox 画廊元素（如果有）

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

How can I remove the FancyBox prev/play/next arrows in the navbar at the top of the FancyBox viewport?

jquery

viewport

fancybox

navbar

fancybox-2