Fancybox中的其他按钮

Question

我想在fancybox中创建其他按钮（靠近图像的边框）。 我尝试使用beforeShow()和afterShow()方法，但当我在this.content或this.inner内调用时，我收到一个javascript错误 - 这些变量未定义。

其他的是，我必须得到每个A元素的其他属性。因此，当我致电this.rel或this.alt时，我又遇到了未定义的错误。

您是否有一些想法如何为我的问题找到解决方案？

Answer 1

您可以尝试使用.fancybox-wrap回调将任何新的 html 附加到afterShow容器，例如：

afterShow : function(){
 var myContent = '<div id="myContent">{my html content here}</div>'; 
 $(".fancybox-wrap").append(myContent);
}

使用CSS定位（绝对）框中的新内容

删除它afterClose也是一个好主意，否则下次打开fancybox时会再次添加

afterClose: function(){
 $(".fancybox-wrap #myContent").remove();
}

另一方面，为了从触发fancybox的选择器中获取其他属性，请在任何回调函数中使用$(this.element)，如：

beforeShow: function(){
 var thisAlt = $(this.element).attr("alt");
 var thisRel = $(this.element).attr("rel");
}

您还可以使用HTML5 data-*属性，例如

<a class="fancybox" data-width="500" data-height="320" ....

并获得像

这样的值

var thisWidth = $(this.element).data("width");
var thisHeight = $(this.element).data("height");

或使用像

这样的值直接为fancybox分配新尺寸

afterShow: function(){
   this.width = $(this.element).data("width");
   this.height = $(this.element).data("height");
}

注意：所有这些信息都适用于fancybox v2.x.仅