Comment agrandir une image en cliquant

Résolu/Fermé
lutchi-lutcho Messages postés 23 Date d'inscription mardi 24 décembre 2013 Statut Membre Dernière intervention 7 février 2014 - Modifié par lutchi-lutcho le 24/12/2013 à 19:04
lutchi-lutcho Messages postés 23 Date d'inscription mardi 24 décembre 2013 Statut Membre Dernière intervention 7 février 2014 - 26 déc. 2013 à 02:11
Bonsoir la compangie,

Je reviens vers un topic qui a déjà été résolu, mais qui n'est pas très bien expliqué pour les débutants. https://forums.commentcamarche.net/forum/affich-11179466-agrandir-image-sur-clic
J'ai de petites bases en HTML, CSS, PHP et SQL, je voudrais savoir comment agrandir une image en cliquant dessus.

La solution est proposée par ce blog : http://www.huddletogether.com/projects/lightbox2/

Le problème que je rencontre, et je ne pense pas être le seul, est que je ne sais pas quoi faire après avoir téléchargé le dossier.
Il est dit de charger le fichier dans notre page HTML (Comment faire clairement ?)

Est ce que quelqu'un pourrait m'éclairer et me proposer un "mode d'emploi" clair ! :)
Disons comme cadeau de noël !

Merci pour vos réponses

Bonnes fêtes à tous !!

Lutchi-Lutcho

7 réponses

RAD ZONE Messages postés 5205 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 19 avril 2020 1 347
25 déc. 2013 à 00:14
une page complette avec le lien image , tu remarquera que pour la miniature j ai mis petite_Saulalvarez.jpeg car il est tres fortement deconseille de redimensionner une image en CSS , tu doit faire une miniature a 203px/134px !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- LIENS VERS LES JS dans le dossier /js -->
    <script src="js/jquery-1.10.2.min.js" type="text/javascript">
</script>
    <script src="js/lightbox-2.6.min.js" type="text/javascript">
</script>
     <!-- FIN -->
    <!-- LIEN VERS LA CSS dans le dossier /css -->
    <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
    <!-- FIN -->
  </head>
  <body>
    <a href="IMAGES/Saulalvarez.jpeg" data-lightbox="Saulalvarez" title="Saulalvarez"><img src=
    "IMAGES/petite_Saulalvarez.jpeg" width="203" height="134" alt="img" /></a>
  </body>
</html>


a+
6
lutchi-lutcho Messages postés 23 Date d'inscription mardi 24 décembre 2013 Statut Membre Dernière intervention 7 février 2014
25 déc. 2013 à 03:06
J'ai fait comme tu m'as inscris RAD et oui c'est mieux.
Désormais il y a un lien sur la photo.
Lorsque je clique dessus, l'image s'ouvre en grand mais dans une autre fenêtre.
Elle ne s'affiche pas dans la même fenêtre avec cette sorte de zoom et le site en fond, comme dans l'exemple : http://www.huddletogether.com/projects/lightbox2/

Qu'est ce que j'ai raté ?

Je récapitule ce que j'ai fait :
1- J'ai téléchargé le dossier (Sur mac donc pas décompressé)
2- J'ai mis les dossiers CSS, JS et IMAGES (que j'ai renommé IMAGES2) dans mon dossier de site racine
3- J'ai mis les photos concernées dans le dossier IMAGES2
4- J'ai inscrit dans Head les 3 lignes de code :
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/lightbox-2.6.min.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />

5- J'ai inclus une lightbox dans la photo choisie avec le code suivant :
<a href="IMAGES/Saulalvarez.jpeg" data-lightbox="Saulalvarez" title="Saulalvarez"><img src=
"IMAGES/petite_Saulalvarez.jpeg" width="203" height="134" alt="img" /></a>

6- Et là l'image souvrait dans un nouvel onglet
0