Question

我正在尝试向FancyBox 2的按钮助手添加自定义按钮。新的按钮显示正常，但我无法获得任何点击行为...绑定在点击上什么都不做。添加自己的按钮有什么秘诀？

这是我试图做的只是测试点击按钮以查看它是否有效。没有任何事情发生。

// init the screenshots
$(".fancybox-screenshots").fancybox({
    prevEffect      : 'none',
    nextEffect      : 'none',
    helpers     : {
        title   : { type : 'inside' },
        buttons : {}
    },
    afterShow: function(){
        $('#fancybox-buttons').on("click", "#btnTest", function(event){
            event.preventDefault();
            alert('testing');
        });
    } //  afterShow
});

这是按钮助手的输出：

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

编辑：

我已经包含了一个jsfiddle - fiddle - 我在小提琴中添加的按钮是倒数第二个...在这种情况下，它是切换和关闭之间的另一个切换。我不想为我的按钮添加图像。更正了css。

Answer 1

这是您的小提琴更新jsfiddle

afterShow: function (opts, obj) {
  $('#fancybox-buttons').on("click", "#btnTest", function(event){
        event.preventDefault();
        alert('testing');
}

fancybox - 自定义按钮

1 个答案: