Fancybox: aggiungere didascalia e altre cose

Question

Mi piacerebbe sapere come aggiungere più di un titolo (ad esempio una didascalia o un collegamento) alla fancybox. Sono consapevole che se aggiungo un titolo = "Bla" verrà visualizzato nella casella. Ma se aggiungo qualcosa come caption = "Blabla" al mio link immagine, quale codice devo avere in jquery.fancybox.js per estrarre quel tag didascalia?

Answer 1

Non è necessario modificare il file originale jquery.fancybox.js poiché è possibile aggiungere questa opzione all'interno del proprio script fancybox personalizzato.

Se si utilizza HTML5 DOCTYPE, è possibile utilizzare l'attributo data-* per voi didascalia in modo da poter avere questo HTML:

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

Poi impostare lo script fancybox personalizzato e ottenere il data-caption utilizzando il beforeShow callback come

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

Questo sostituirà lo title e utilizzerà lo data-caption.

D'altra parte, si consiglia di mantenere l'attributo title e costruire il title fancybox che unisce entrambi, title e data-caption attributi così, per questo HTML

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

Usa questo script

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

Inoltre, è possibile ottenere lo caption/title da un altro elemento HTML all'interno del documento (ad esempio <div>) che può contenere collegamenti o altro er elementi HTML. Controllare questi posti per esempi di codice: https://stackoverflow.com/a/9611664/1055987 e https://stackoverflow.com/a/8425900/1055987

NOTA: questo è per fancybox v2.0.6 +

Answer 2

vecchia questione, ma grazie alla risposta di JFK ho scoperto che con l'ultima versione di fancybox si può aggiungere una didascalia semplicemente inserendo un valore nell'attributo title="" (per impostazione predefinita). Assicurati che sia incluso nell'elemento <a> con la classe fancybox.