Fancybox: добавить заголовок и другие вещи

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

13
fancybox jquery

2 ответов

вам не нужно возиться с оригинала С помощью jQuery.fancybox.js файл, так как вы можете добавить эту опцию в свой собственный настроенный скрипт fancybox.

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

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

затем установите пользовательский скрипт fancybox и получите 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>

использовать этот скрипт

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

кроме того, вы также можете получить caption/title из другого элемента HTML в вашем документе (a <div> например), которые могут иметь ссылки или другие элементы HTML. Проверьте эти сообщения для примеров кода: https://stackoverflow.com/a/9611664/1055987 и https://stackoverflow.com/a/8425900/1055987

Примечание: это для fancybox v2.0.6+

29

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

8