Question

我想在每个fancybox图像下面都有一个按钮，单击时会显示一个隐藏的块。

我做了一个简单的切换示例，但它在fancybox中不起作用：

$(document).ready(function () {
    $("button").click(function () {
        $("p").toggle(1000);
    });

    $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox({
        beforeLoad: function () {
            this.title = $(this.element).attr('caption');
        }
    });
});

http://jsfiddle.net/azuron/koy9x64v/19/

Answer 1

首先，您可能只想设置要在（HTML5）data属性中切换的文本（没有HTML标记），如：

<a href="image01.jpg" data-caption="text to hide and seek" class="fancybox">open image</a>

第二次，在title回调中构建fancybox的beforeLoad并添加 toggler 按钮，如：

beforeLoad: function () {
    var _caption =
        "<button class='toggler'>toggle</button>" +
        "<div style='display:none' class='caption'>" +
        $(this.element).data("caption") + "</div>";
    this.title = _caption;
}

请注意您将在_caption 变量中创建所需的HTML结构，而不是将其写入data属性。另请注意，我们正在为创建的元素添加 classes ，以便我们以后可以对它们进行操作。

第三次，绑定在click回调中触发.toggle()方法的afterShow事件，如：

afterShow: function () {
    $(".fancybox-title").on("click", ".toggler", function () {
        $(".caption").toggle(400);
    });
}

注意我们在其委派的表单中使用.on()方法。

最后但并非最不重要的是，最好将fancybox title type设置为inside以获得更清晰的布局，因此请添加helpers API选项如：

helpers: {
    title: {
        type: "inside"
    }
}

参见 JSFIDDLE

如何在fancybox标题中添加隐藏块和切换按钮？

1 个答案: