Fancybox: Agregar título y otras cosas

Question

Me gustaría saber cómo puedo agregar más de un título (por ejemplo, un título o un enlace) a la fancybox. Soy consciente de que si agrego un título = "Bla" aparecerá en el cuadro. Pero si agrego algo como caption = "Blabla" al enlace de mi imagen, ¿qué código necesito tener en jquery.fancybox.js para obtener esa etiqueta de título?

Answer 1

No necesita meterse con el archivo original jquery.fancybox.js ya que podría agregar esta opción dentro de su propia secuencia de comandos personalizada de fancybox.

Si está utilizando HTML5 DOCTYPE, se puede utilizar el atributo data-* para que muestre texto para que pueda tener este código HTML:

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

asentando después la secuencia de comandos FancyBox personalizada y obtener el data-caption mediante la devolución de llamada beforeShow como

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

Eso anulará el title y usará el data-caption en su lugar.

Por otro lado, es posible que desee mantener el atributo title y construir de title la FancyBox combinando ambos, title y data-caption atributos así, por este código HTML

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

Usar este comando de

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

Además, también puede obtener el caption/title de otro elemento HTML dentro de su documento (un <div> por ejemplo) que puede tener enlaces u otros er elementos HTML. Compruebe estos mensajes para los ejemplos de código: https://stackoverflow.com/a/9611664/1055987 y https://stackoverflow.com/a/8425900/1055987

NOTA: esto es para FancyBox v2.0.6 +

Answer 2

vieja pregunta, pero gracias a la respuesta de JFK descubrí que con la última versión de fancybox que pueda agregue un título simplemente ingresando un valor en el atributo title="" (de manera predeterminada). Solo asegúrese de que esté incluido en el elemento <a> con la clase fancybox.