Fancybox中的其他按钮

Question

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

其他的事情是，我必须得到每个A元素的其他属性。所以当我拨打this.rel或this.alt时，我又得到了未定义的错误。

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

Answer 1

您可以尝试使用像afterShow回调追加任何新HTML到.fancybox-wrap容器：

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"); 

或分配directl Ÿ新的大小的fancybox使用这些值像

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

注意：所有这些信息适用于的fancybox v2.x.只要。