18041 sujets

Questions générales et questions de débutants

HTML cliquez pour zoomer les photoS

bonjour,
je cherche un code HTML qui se place dans une page pour avoir toutes les photos qui :
je voudrais que quand on clique sur une photo elle zoom en grand

merci
Modifié par to175 (21 Feb 2011 - 22:07)
Bonjour,

Le principe d'alsacréations est d'aider à apprendre, non pas de fournir du code pré-maché.

Si tu as essayé d'implémenter un code et que tu as eu des problèmes avec, merci de nous présenter ce code et d'expliquer ce qui n'a pas fonctionné.

Si tu as zappé cette étape, je suis sûre qu'une recherche Google serait un bon premier pas.
Ceci dit, voici comment cela marche en HTML:
<a href="photos/01-big.jpg">
  <img src="photos/01-small.jpg" alt="Un texte alternatif pertinent et propre à la photo" />
</a>

Ça s'appelle un lien hypertexte (dont le contenu est une petite image, et la destination la grande image correspondante), et c'est bien-sûr le B.A.-ba du langage HTML. Smiley smile
Je crois que ce qu'il cherche est effet style lightbox… En effectuant une recherche sur Google avec les termes "lightbox jquery" on trouve rapidement ce que l'on cherche.

Après il suffit la plupart du temps d'intégrer des liens vers les différents fichiers Javascript requis dans la partie head de la page HTML. Pour déclencher l'effet lightbox, on ajoute un attribut rel à la balise a qui contient aussi le lien vers l'image en grand :

<a href="mon_image_en_grand.jpg" rel="lightbox"><img src="mon_image_en_petit.jpg" alt="Vignette"/></a>


Il y a sans doute aussi moyen d'utiliser la propriété transform (CSS3) avec un événement onClick, mais je ne suis pas un spécialiste pour ce genre de trucs.

Edit : et puis en plus, ça impliquerait de charger les images à grande taille et de les réduire au préalable avec les CSS, pas génial pour le chargement de la page.
Modifié par Shralldam (26 Feb 2011 - 21:56)
Shralldam a écrit :

<img src="mon_image_en_petit.jpg" alt="Vignette"/>


Attention, ce texte alternatif n'est pas pertinent. (Surtout si on se retrouve avec une série d'images ayant toutes pour texte alternatif "Vignette".)
On pourra lire Bien utiliser le texte alternatif.
Sujet clos
Aller à