Ajouter un titre à la boîte de fantaisie

Bonjour, vous pensez probablement qu’il s’agit d’une question idiote, mais j’essaie d’obtenir des titres ajoutés à Fancy Box 2. Je sais très peu de choses sur javascript, mais je l’ai au bas de mon code HTML.

 $(document).ready(function() { $(".fancybox").fancybox(); });

ET si j’essaie d’append

 $(".fancybox") .attr('rel', 'gallery') .fancybox({ beforeLoad: function() { this.title = $(this.element).attr('caption'); } });

Je reçois toutes sortes d’erreurs de syntaxe.

Le site est: http://bit.ly/Wan5kr

Votre script actuel est:

  $(document).ready(function() { $(".fancybox").fancybox({ helpers : { title : { type : 'inside' } }, // helpers afterLoad : function() { this.title = (this.title ? '' + this.title + '
' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length; } // afterLoad }); // fancybox }); // ready

… mais devrait l’être (si vous ne voulez pas avoir “la page 1 sur 6”):

  $(document).ready(function() { $(".fancybox").fancybox({ helpers : { title : { type : 'inside' } } // helpers }); // fancybox }); // ready

D’autre part, si vous préférez utiliser un atsortingbut de caption (car le title apparaît sous la forme d’une info – bulle lorsque vous survolez les images), modifiez le title par caption comme

et utiliser ce script

  $(document).ready(function() { $(".fancybox").fancybox({ helpers : { title : { type : 'inside' } }, // helpers beforeLoad: function() { this.title = $(this.element).attr('caption'); } }); // fancybox }); // ready

Une option (et la plus simple) consiste à définir l’atsortingbut tittle du parent href.

Juste comme:

Si vous souhaitez placer le titre dans la lightbox au lieu de juste en dessous, vous devez modifier l’atsortingbut ‘titlePostion’. Juste comme ça:

 $("a.fancybox").fancybox({ 'titlePosition' : 'inside' });

Au lieu de “sur”, vous pouvez également le placer “à l’intérieur” ou “à l’extérieur”. Outside est le comportement par défaut de fancybox. Il place votre titre juste en dessous (à l’extérieur) de la lightbox. “Sur” place le titre dans la lightbox, mais au-dessus de votre image avec un arrière-plan alpha transparent foncé. “Inside” place votre titre dans la lightbox, mais sous l’image, dans la bordure blanche de la lightbox.

Vous pouvez voir les différents résultats sur la page d’ accueil de fancybox.net . Voir les trois images sous: ” Différentes positions de titre – ‘extérieur’, ‘intérieur’ et ‘terminé’ ”