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?Fancybox: aggiungere didascalia e altre cose
risposta
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 +
Grazie, che ha aiutato molto! – Jean
Soluzione elegante perfetta Grazie –
@JFK C'è un modo per mantenere/mantenere la didascalia visibile? Nel mio ambiente, le didascalie scompaiono dopo un po ' secondi –
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
.
- 1. In Prettyphoto.js o Fancybox ... Come aggiungere un collegamento all'interno della didascalia
- 2. Il servomotore reagisce ad altre cose
- 3. Perché node-gyp (e altre cose) richiedono Visual Studio?
- 4. Come archiviare CGRect e altre cose nei dati di base
- 5. Jquery - fancybox e callback
- 6. Come restituire molte promesse in un ciclo e attendere che tutti facciano altre cose
- 7. Come aggiungere una didascalia a un'immagine in Confluence Ondemand?
- 8. Come aggiungere una didascalia immagine in primo piano in Wordpress
- 9. Copia didascalia in UICollectionView
- 10. Didascalia fuori tabella?
- 11. JQGrid set didascalia e nome colonna
- 12. parent.jQuery.fancybox.close(); dall'interno di Fancybox si chiude solo Fancybox una volta
- 13. Instagram da Android aperto su determinati utenti e aggiungere didascalia alle immagini caricate
- 14. Come allineare la didascalia sotto l'immagine
- 15. Come ottenere input dalla tastiera mentre si fanno altre cose allo stesso tempo?
- 16. Come posso ottenere emacs Per far rientrare le altre cose, come si fa rientrare definire?
- 17. Decompilatore Java che funziona con Java 5 (gestisce le enumerazioni tra le altre cose nuove)
- 18. Espandi la ricerca Visualizza poter utilizzare interamente la barra d'azione (nascondere le altre cose)
- 19. jquery fancybox 2.0.3 - previ chiudi al di fuori di fancybox
- 20. Fancybox iframe ridimensiona dinamicamente
- 21. AngularJS Fancybox Popup
- 22. galleria Fancybox gruppi
- 23. FancyBox vs TwitterBootstrap modal?
- 24. fancybox dimensione iframe
- 25. Fancybox "danze" intorno a
- 26. fancybox mostra pdf
- 27. Fancybox 2.0 afterClose evento
- 28. SVG in Fancybox
- 29. Fancybox 2 nuova licenza
- 30. Come distruggere Fancybox?
possibile duplicato di [Fancybox 2 titoli personalizzati e didascalie \ [da A (titolo) e IMG (alt \]] (http://stackoverflow.com/questions/9058442/fancybox-2-custom-titles-and- captions-from-atitle-and-imgalt) – Ankur