web-dev-qa-db-fra.com

FANCYBOX: Ajouter une légende et d'autres choses

J'aimerais savoir comment je peux ajouter plus d'un titre (par exemple une légende ou un lien) à la fantaisie. Je suis conscient que si j'ajoute un titre = "bla", il apparaîtra dans la boîte. Mais si j'ajoute quelque chose comme la légende = "blabla" à mon lien image, quel code dois-je avoir dans jquery.fancybox.js pour tirer cette étiquette de légende?

jqueryfancybox
16
Jean

Vous n'avez pas besoin de déconner avec original jquery.fancybox.js Fichier Depuis que vous pouvez ajouter cette option dans votre propre script de Fancybox personnalisé.

Si vous utilisez HTML5 DOCTYPE, vous pouvez utiliser le data-* Attribut pour votre légende afin que vous puissiez avoir ce HTML:

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

Puis définissez votre script de fantabox personnalisé et obtenez le data-caption utiliser le rappel beforeShow

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

Qui remplacera le title et utilisera le data-caption au lieu.

D'autre part, vous voudrez peut-être garder l'attribut title et construire le title combinant les deux, title et data-caption attributs donc, pour ce HTML

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

Utilisez ce script

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

De plus, vous pourriez aussi obtenir le caption/title à partir d'un autre élément HTML dans votre document (A <div> Par exemple) pouvant avoir des liens ou d'autres éléments HTML. Consultez ces messages pour les exemples de code: https://stackoverflow.com/a/9611664/1055987 et https://stackoverflow.com/a/8425900/1055987

[~ # ~] Remarque [~ # ~] : Ceci est pour FANCYBOX V2.0.6 +

32
JFK

Question ancienne, mais grâce à la réponse de JFK, j'ai découvert que la dernière version de fancybox vous pouvez ajouter une légende simplement en entrant une valeur dans le title="" attribut (par défaut). Assurez-vous simplement qu'il est inclus sur le <a> élément avec la classe fancybox.

9
Brad Adams