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

我想在每个fancybox图片下面有一个按钮，当点击时显示一个隐藏块。如何添加隐藏块和切换按钮到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/

来源

2014-11-23 Viktor Erepanov

您的代码显示没有尝试创建您所解释的内容，并且您想要执行的操作尚不清楚。 – MrUpsidown 2014-11-23 21:23:30

这就是我想创建的 [链接]（http://jsfiddle.net/koy9x64v/20/） – 2014-11-24 06:30:51

首先，你可能反而设置文本只（不包含HTML标签）要切换一个（HTML5）内data属性，如：

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

二，打造的fancybox的title从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属性中。另外请注意，我们将类添加到创建的元素，以便稍后操作它们。

第三，绑定click事件触发afterShow回调像内的.toggle()方法：

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

通知我们使用在其委托的形式.on()方法。

而且最后但并非最不重要的，倒不如设定的fancybox 标题type作为inside一个清晰的布局，从而增加像助手API选项：

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

见JSFIDDLE

来源

2014-11-24 07:40:30 JFK

非常感谢你这就是你需要的！一切正常！ – 2014-11-24 08:06:31

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

回答

相关问题