Дополнительные кнопки в Fancybox

Question

Я хочу создать дополнительные кнопки в fancybox (закрыть границу изображения). Я попытался использовать метод beforeShow() и afterShow(), но когда я вызываю внутри this.content или this.inner, я получаю ошибку javascript - эти переменные не определены.

Другое дело, что я должен получить другие атрибуты каждого элемента A. Поэтому, когда я звоню this.rel, или this.alt Я снова получил неопределенную ошибку.

У вас есть идеи, как найти решение для моей проблемы?

Answer 1

Вы можете попробовать добавление какого-либо новый 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"); 
} 

вы можете также использовать 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. только.