FancyBox - affichage descriptif image
vendredi 30 décembre 2011 à 17h47
par
ben29
Bonjour,
Lors de l’affichage d’une image en portfolio en en galerie via fancybox je voudrais afficher en plus du champ titre de l’image, le champ descriptif de cette image. Quelqu’un sait-il comment il faut procéder ?
Mon site : http://vbcq.levillage.org/
Réponses
|
1er janvier 2012 à 14h56
|
Bonjour Ben29 et bonne année !
Je suppose que ce que tu veux, c’est par exemple sur cette page de ton site http://vbcq.levillage.org/spip.php?article906, il y a plusieurs photos dans le portfolio et que tu voudrais que lorsque on affiche la photo en cliquant dessus, les informations titre et descriptif soit affichées par fancybox
Si c’est ça, est-ce que le plus simple n’est pas d’entrer les "descriptifs" comme si c’était un titre ? Quitte à modifier le code d’affichage si le texte est limité en longueur de caractères (juste un nombre à changer) ?
Je ne me souviens plus si tu peux le faire sans pb, mais essaye de mettre <br /> pour aller à la ligne, je crois que ça accepte de le prendre en compte et de ne pas l’afficher comme caractère.
Ou alors tu ajoutes dans le code de l’affichage de l’image que tu veux que ça affiche aussi le commentaire, mais je ne sais pas si tu dois toucher fancybox et/ou sarka. Un autre de l’équipe saura peut-être ?
Pétarel
|
|
2 janvier 2012 à 10h47
|
Bonjour Pétarel et bonne année,
Comme je te l’ai dit je m’étais en effet mal exprimé : je veux afficher le descriptif de l’image non pas dans le portfolio mais dans l’affichage de l’image proprement dire. Pour être plus clair mon site vbcq comporte beaucoup de photos d’équipes pour lesquelles j’ai renseigné dans le champ descriptif les noms de joueurs présents sur la photo et j’aimerais que ce descriptif soit affiché à chaque affichage d’image via fancybox. çà fonctionne avec des retours chariot <br /> dans le titre de l’image. Il reste à trouver où le texte est limité en longueur. Je pense que c’est dans sarkaspip_options.php. Ensuite il faudra modifier le code pour que le champ descriptif soit ajouté au champ titre, mais pour l’instant je ne sais pas ou le faire.
Encore Merci.
|
|
6 janvier 2012 à 12h09
|
J’ai fait la modif. que je voulais ; Pour ceux que çà intéresse, j’ai juste modifié le fichier inc_images_jointes.html de la façon suivante :
– avant modif :
[(#SET{titre,(#TITRE|.....}|sinon{[(#TYPE_DOCUMENT) - ][(#TAILLE|taille_en_octets)]})]})]
[<a href="#FICHIER"[ class="(#ENV{effet_galerie})"][ title="(#GET{titre})"]>
#FICHIER|copie_locale|....|inserer_attribut{alt, #GET{titre}})
</a>]
|
|
6 janvier 2012 à 12h29
|
OUPS : j’ai cliquer trop tôt... donc je reprends mon post.
J’ai fait la modif. que je voulais. Vous pouvez voir le résultat ici par exemple : http://vbcq.levillage.org/spip.php?article134 puis en cliquant sur les images du portfolio.
Pour ceux que çà intéresse, j’ai juste modifié le fichier inc_images_jointes.html de la façon suivante :
– S’il n’y a pas de titre dans l’image alors j’affiche le nom du fichier plutôt que son type et sa taille en octets.
– Si le champ descriptif existe alors je créé la variable titre_long avec le titre en gras et le champ descriptif à la suite.
– Il reste juste un problème c’est que fancybox box affiche ce champ de titre aussi au survol (toolTip) de la vignette, mais que ce n’est pas interprété. Il faudrait pouvoir mettre titre et non pas titre_long pour le toolTip, mais là je ne sais pas où chercher. Si quelqu’un peut me l’indiquer, ce serait sympa.
– avant modif :
[(#SET{titre,(#TITRE|.....}|sinon{[(#TYPE_DOCUMENT) - ][(#TAILLE|taille_en_octets)]})]})]
[<a href="#FICHIER"[ class="(#ENV{effet_galerie})"][ title="(#GET{titre})"]>
#FICHIER|copie_locale|....|inserer_attribut{alt, #GET{titre}})
</a>]
– après modif :
[(#SET{titre,(#TITRE|.....}|sinon{[(#FICHIER|basename)]})]})]
[(#DESCRIPTIF|=={''}|?{' '})
[(#SET{titre_long, #GET{titre}})]
]
[(#DESCRIPTIF|!={''}|?{' '})
[(#SET{descriptif, [(#DESCRIPTIF|texte_backend)]})]
[(#SET{titre_long, [<strong>(#GET{titre})</strong>][(#DESCRIPTIF|texte_backend)]})]
]
[<a href="#FICHIER"[ class="(#ENV{effet_galerie})"][ title="(#GET{titre_long})"]>
#FICHIER|copie_locale|....|inserer_attribut{alt, #GET{titre}})
</a>]
|
|
27 février 2012 à 13h47
|
Je poursuis et vous fais part de mes modifications. L’affichage du champ title est géré directement par le navigateur, on ne peut donc pas modifier l’affichage info-bulle. En cherchant un peu il s’avère qu’il existe dans la librairie fancybox une option titleFromAlt qui n’est pas gérée par le plugin spip fancybox. Le principe est de gérer normalement le champ title et de passer le texte descriptif dans le champ alt, en indiquant à fancybox qu’il doit afficher le titre présent dans le champ alt [1].
Donc il suffit de garder le code précédent en passant le titre_long dans le champ alt. Il faut aussi modifier le fichier fancybox_pipelines.php en y insérant "titleFromAlt": true . Il faut enfin modifier jquery.fancybox-1.3.4.js car l’option titleFromAlt n’est bizarrement prise en compte que si le champ title est vide :
if (title === '' && selectedOpts.orig && selectedOpts.titleFromAlt) devient
if (selectedOpts.orig && selectedOpts.titleFromAlt)
En espérant que çà peut servir à quelqu’un,
Benoît
|
|
27 février 2012 à 13h49
|
Vous pouvez voir le résultat ici par exemple : http://vbcq.levillage.org/spip.php?article1165
|
|
7 septembre 2012 à 13h10
|
bonjour à tous,
pour faire afficher automatiquement à la place du nom de titre, le nom du fichier sous l’image il faut mettre
(#FICHIER
quelqu’un sait-il comment faire pour afficher le nom du fichier sans en faire apparaître l’extension .jpg (ou . png .gif etc.) ?
D’avance merci et yeah et yoh
|
|
7 septembre 2012 à 20h03
|
Hello,
Il faut passer le suffixe à la fonction basename, par exemple, ".png". Cela supprime l’extension et tu obtiendras ce que tu souhaites. Si tu es dans une boucle et que tu ne connais pas le suffixe a priori, il faut utiliser la balise #EXTENSION en oubliant pas de rajouter le ".".
|
|
15 octobre 2012 à 11h00
|
Merci pour la réponse. Comme je suis plus bidouilleur que programmeur, j’ai pas réussi.
chez moi le code dans la boucle album qui affiche l’image et son titre est : (voir image jointe)
que me faudrait-il changer ou ajouter dans ce code pour que l’extension .jpg ne s’affiche pas en dessous de l’image ?
acode.jpg
|
|
15 octobre 2012 à 11h08
|
oups, je savais pas comment introduire du code, je reprends
Merci pour la réponse. Comme je suis plus bidouilleur que programmeur, j’ai pas réussi.
chez moi le code dans la boucle album qui affiche l’image et son titre est :
<a href="#URL_DOCUMENT" type="#MIME_TYPE" class="thickbox" rel="album">
<img src="[(#URL_DOCUMENT||image_reduire{200,300}|extraire_attribut{src})]"
class="photo" alt="#FICHIER|basename" title="#TITRE" />
<a> [<h3 class="texte2">(#FICHIER|basename)</h3>]</a>
que me faudrait-il changer ou ajouter dans ce code pour que l’extension .jpg ne s’affiche pas en dessous de l’image ?
|
