Bonjour,
je souhaiterais que le même texte (de la balise <p>), associé au départ à deux ou trois photos, soit également apparent lors d'un zoom effectué sur une seule des photos...
J'espère être clair dans ma demande !?
Merci d'avance pour vos réponses.
Ci-joint, un exemple de code...
ça semble correspondre à la balise figcaption https://www.alsacreations.com/articl...igcaption.html
(le mieux pour insérer du code c'est d'utiliser les balises [ code ][ /code ] (bouton # dans l'interface avancée)
Bonjour et merci pour votre réponse ainsi que l'indication pour insérer du code !
Je sais bien qu'en utilisant la balise figcaption je peux le faire mais chacune des photos apparaitraient avec le même texte en dessous.
Or, je veux un même commentaire pour deux ou trois photos et que se commentaire apparaisse lors du zoom sur une photo !!!
tu fais comment ton zoom ?
sinon un truc comme ça ? https://www.w3schools.com/howto/howt...ext_blocks.asp
sinon il faudra sans doute passé par du javascript si tu ne veux pas faire de copier/coller du texte
C'est quoi le but ?
<img src="testimage.png" title="Accueil">
Si tu remplis l'attribut title,, ce que tu mets dedans apparaît à l'écran quand la souris est immobile au bout d'une seconde.
C'est d'ailleurs le cas avec l'image que j'ai mis en pièce jointe.
Dernière modification par vgondr98 ; 07/04/2022 à 10h08.
Bonjour,
pour faire mon zoom j'utilise du javascript. Fichier trouvé sur le net car je ne m'y connais en javascript !!!
https://github.com/indrimuska/zoomify
Je pense également avoir besoin d'une autre fonction en javascript !!!!
Bonjour,
je sais bien tout cela mais je veux que le texte soit affiché en même temps que la photo zoomée !!!
En javascript, tu peux ajouter des balises html dans des éléments dont tu connaît l'id.
https://developer.mozilla.org/fr/doc...getElementById
https://www.toutjavascript.com/refer....innertext.php
Donc ce que tu peux faire, c'est sous chaque image, ajouter une balise <div id="label1"></div> et <div id="label2"></div>.
Quand l'utilisateur clique sur le bouton de zoom, de l'image 1, il faut faire appel à une fonction de ce type :
Code:function mettrelabel(id) { var element = document.getElementById(id); element.innerText="Mon label"; } function retirerlabel(id) { var element = document.getElementById(id); element.innerText=""; }
peut-être que ce code te donnera une piste (j'ai vu que quand l'image est zoomée, elle "gagnait" la classe 'zoomed', donc via css on peut essayer cette approche)
Code HTML:<style> figure { position: relative; text-align: center; color: white; } .top-right { position: absolute; top: 8px; left: 50%; visibility:hidden; } .zoomed + .top-right{ visibility:visible; } </style> </head> <body> <h2>Image Text</h2> <p>How to place text over an image:</p> <div class="container"> <figure> <img class="zoomed" src="img_snow_wide.jpg" alt="Snow" style="width:100%;"> <div class="top-right" style>Top Right</div> </figure> <figure> <img class="notzoomed" src="img_snow_wide.jpg" alt="Snow" style="width:100%;"> <div class="top-right" style>Top Right</div> </figure> </div> </body> </html>
Merci à tous pour votre aide,
ne connaissant rien au javascript, je comprends les fonctions mais je ne sais pas comment introduire cela à l'intérieur de mon script "zoom" ainsi que par la suite dans mon code html....
Le but étant de cliquer sur une image, qu'elle s'agrandisse et que le texte de la balise <p> s'affiche sous celle-ci (voir code en photo du premier message)
Merci d'avance
Pour rajouter du code lors du zoom.Code:$('#myImage').on('zoom-in.zoomify', function () { console.debug("coucou"); });
Merci pour votre réponse, je vais essayer de mettre en pratique cela ce week-end.
Je vous tiendrez, bien évidemment, au courant....
Un truc qui fonctionne chez moi, c'est de remplacer l'image par une autre avant le zoom.Code:<script> $('#myImage').zoomify(); $('#myImage').on('zoom-in.zoomify', function (e) { console.debug("coucou"); e.target.src = "testimagelabel.png"; console.debug(e.target.src); }); </script>
tu as déjà implanté l'utilisation de zoomify() ou pas ?
sinon, tu as ces 3 lignes à inclure dans ta page html
tu peux les mettre dans le <head>; le chemin indiqué en src ou href pour les 2 dernières lignes correspondent à l'emplacement "local" du fichier js et css de zoomifiy (donc il faut les avoir télécharger depuis la page github, en particulier le dossier dist)Code HTML:<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="js/vendor/zoomify/dist/zoomify.min.js"></script> <link href="css/vendor/zoomify/dist/zoomify.min.css" rel="stylesheet">
et à la fin (juste avant de fermer </body> , placer le code suivant
on peut aussi appliquer zoomify à figure; un exemple dans le zip en PJ (pas possible de le mettre sur le forum, le forum détecte une malveillance, mais il n'y a aucune, promis)Code HTML:<script> $('img').zoomify(); </script>
zoom.zip
PS: dans mon code, j'ai mis les liens directement vers les fichiers du dépôt git de zoomify (comme il le fait dans son exemple)
Bonjour,
je n'arrive toujours pas à obtenir ce que je souhaite malgré tous vos conseils....
Voici mon script : (désolé mais j'ai essayé avec CODE mais ça me bloque l'envoi !?!?!?)
Merci encore pour l'aide que vous pourriez m'apporter !!!
Dernière modification par JPL ; 09/04/2022 à 13h57. Motif: Pièce jointe supprimée
Ce n’est pas une image qu’il faut mettre entre les balise Code, c’est le texte source du programme.
Recommence.
Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
Bonjour,
Je sais bien, j'ai mis mon code html mais le site refuse l'envoi.... J'ai essayé à plusieurs reprises.
Mon code est-il trop long ?
Il ne faut pas mettre du code html mais du texte brut. Tout le monde y arrive, donc tu y arriveras.
Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
Oups, j’avais zappé le début de la discussion. Si c’est bien du code html que tu veux poster, il faut utiliser les balises [HTML]...[/HTML]
Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
C'est à dire que je ne peux pas faire un copier coller de mon code html entre les balises [code]?
Ok... Merci pour ces indications !!!
Si, tu peux, mais la balise HTML donne une meilleure présentation avec colorisation fonctionnelle.Envoyé par oliviermer
Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
Je viens de refaire en utilisant la balisemais ça ne veut toujours pas envoyer le message !!!!!Code HTML:....
Voici ce que j'obtiens lorsque j'essaie d'envoyer le message :
Je pense que futura n'aime pas un des liens https ou alors le fait qu'il y a du code jquery qui s'activerait ?
D'accord,merci...
voici mon code :
Le zoom fonctionne très bien et je souhaiterais mettre le texte de la balise <p> sous chaque image zoomée !!!Code HTML:<body> <section class="galerie"> <div> <figure> <img alt="" src="https://static.nationalgeographic.fr/files/styles/image_3200/public/t%C3%A9l%C3%A9chargement_12.webp?w=710&h=474" width="100%"/> </figure> <figure> <img alt="" src="https://www.ithaquecoaching.com/wp-content/uploads/2015/10/renverser-montagne-1050x698.jpg" width="100%"/> </figure> <figure> <img alt="" src="https://www.trekmag.com/media/news/2018/06/01-cervin__fit_670x446.jpg" width="100%"/> </figure> </div> <p class="texte">Texte devant apparaitre sous chaque photo lors du zoom</p> </section> <script>$('.galerie figure').zoomify({scale:0.95});</script> </body>
Merci pour votre aide
C’est curieux car ça ne ressemble pas du tout à un message du forum. Peut-être cela vient-il d’une protection de sécurité sur ton ordinateur ?
Rien ne sert de penser, il faut réfléchir avant - Pierre Dac
Bonjour, j'ai fait un test en ajoutant un figcaption en javascript et le label apparaît bien.Code:<body> <section class="galerie"> <div> <figure id="testfigure"> <img id="test" alt="" src="https://static.nationalgeographic.fr/files/styles/image_3200/public/t%C3%A9l%C3%A9chargement_12.webp?w=710&h=474" width="10%"/> </figure> </section> <script>$('#testfigure').zoomify({scale:0.95}); $('#testfigure').on('zoom-in.zoomify', function (e) { var element = document.createElement('figcaption'); element.innerHTML = "label"; var targetElement = document.getElementById("testfigure"); targetElement.appendChild(element); }); </script>
Bonsoir,
merci pour votre réponse. Je ne vois toujours pas comment intégrer le texte de la balise <p> car ce script affiche "label" sous l'image et ne disparait pas par la suite !!!
Je ne m'y connait pas en javascript, désolé !
C'est normal que le script affiche label puisqu'il y a écrit :
element.innerHTML = "label";
Remplace label parce que tu veux.
Sinon pour faire disparaitre le label, il faut faire une autre fonction en remplaçant zoom-in.zoomify par zoom-out.zoomify (ces mots-clefs sont listés dans la page github https://github.com/indrimuska/zoomify). Cette fonction se déclenche lors du dézoom.
J'ai eu le même soucis avec mon post #14, c'est pour ça que j'ai joint mon code dans un zip, il y a un lien qu'il ne doit pas apprécié (peut-être le lien vers le cdn de bootstrap)
