Fancybox: Добавить надпись и другие вещи

Я хотел бы знать, как добавить в fancybox больше, чем заголовок (например, подпись или ссылку). Я знаю, что если я добавлю заголовок = "Бла", он появится в поле. Но если я добавлю что-то вроде caption = "Blabla" к моей ссылке на изображение, какой код мне нужно иметь в jquery.fancybox.js, чтобы вытащить этот тег субтитров?

Ответ 1

Вам не нужно связываться с исходным файлом jquery.fancybox.js, так как вы можете добавить этот параметр в свой собственный настраиваемый fancybox script.

Если вы используете HTML5 DOCTYPE, вы можете использовать атрибут data-* для заголовка, чтобы вы могли иметь этот HTML-код:

<a class="fancybox" href="images/01.jpg" data-caption="This is the caption" >Open fancybox</a>

Затем установите свой собственный fancybox script и получите data-caption с помощью обратного вызова beforeShow, например

$(document).ready(function() {
 $('.fancybox').fancybox({
  beforeShow : function(){
   this.title =  $(this.element).data("caption");
  }
 });
}); // ready

Это приведет к переопределению title и вместо этого используйте data-caption.

С другой стороны, вы можете сохранить атрибут title и создать fancybox title, объединяющий оба атрибута title и data-caption, поэтому для этого HTML

<a class="fancybox" href="images/01.jpg" title="This is the title" data-caption="This is the caption">Open fancybox</a>

Используйте этот script

$(document).ready(function() {
 $('.fancybox').fancybox({
  beforeShow : function(){
   this.title =  this.title + " - " + $(this.element).data("caption");
  }
 });
}); // ready

Кроме того, вы также можете получить caption/title из другого HTML-элемента в вашем документе (например, <div>), который может иметь ссылки или другие элементы HTML. Проверьте эти сообщения для примеров кода: fooobar.com/questions/482573/... и fooobar.com/questions/482576/...

ПРИМЕЧАНИЕ: это для fancybox v2.0.6 +

Ответ 2

Старый вопрос, но благодаря ответу JFK я узнал, что с последней версией fancybox вы можете добавить заголовок просто, введя значение в атрибуте title="" (по умолчанию). Просто убедитесь, что он включен в элемент <a> с классом fancybox.