jquery - Fancybox 中的附加按钮

Question

我想在 fancybox 中创建额外的按钮（靠近图像的边框）。我尝试使用beforeShow()andafterShow()方法，但是当我在内部调用this.contentor时this.inner，我得到一个 javascript 错误 - 这些变量是未定义的。

另一件事是，我必须获取每个 A 元素的其他属性。所以当我打电话时this.rel，或者this.alt我再次遇到未定义的错误。

你有一些想法如何找到我的问题的解决方案吗？

score 0 · Accepted Answer

您可以尝试使用回调将任何新的html附加到.fancybox-wrap容器中，例如：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");
}

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

<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。只要。

1 回答 1