Comment agrandir une image en cliquant [Résolu/Fermé]

Signaler
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
-
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014
-
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. http://www.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

Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1306
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+
4
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 78360 internautes nous ont dit merci ce mois-ci

lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

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
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1306
Salut

c est tres simple

voila la base

1: tu relie les js et le css a ta page en mettant ces 3 lignes entre les head de ta page , comme ca
<!-- LIENS VERS LES JS dans le dossier /js -->
  <script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<!-- FIN -->
<!-- LIEN VERS LA CSS dans le dossier /css -->
    <link href="css/lightbox.css" rel="stylesheet">
    <!-- FIN -->
    </head>


2: tu ajoute un data-lightbox au images au quelle tu veux donner l effet , tu met un titre si tu veux avoir une caption ,
<a href="img/image-1.jpg" data-lightbox="image-1" title="caption1">image 1</a>


si tu veux une serie d images tu leurs donne le meme data-lightbox
<a href="img/image-1.jpg" data-lightbox="galerie" title="caption1">image 1</a>
<a href="img/image-2.jpg" data-lightbox="galerie" title="caption2">image 2</a>


voila pour l essentiel !
a+
Messages postés
2854
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
507
Bonjour

1 tu dézip le fichier lightbox2.6.zip avec par exemple 7zip


tu mets le dossier js et ce qu'il contient à la racine de ton site
tu mets le dossier css et ce qu'il contient à la racine de ton site
tu mets le dossier img et ce qu'il contient à la racine de ton site

dans ta page web dans la balise <head> tu insère les lignes de code suivantes

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

pour appliquer lightbox sur les images

tu mets tes images dans le dossier img

tu mets le code suivant dans les balises body de ta page web

<a href="img/image-1.jpg" data-lightbox="image-1" title="image 1">image #1</a>
<a href="img/image-2.jpg" data-lightbox="image-2" title="image 2">image #2</a>
...etc

Voila
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Super :D

Tu as parfaitement répondu à ma question car tu as été "CLAIR" !

Je te remercie Rad zone !

Passes de bonnes fêtes A+

PS : Pour le code de l'image je le colle dans le body où mon image est présente c'est bien ça ?
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Admettons que mon image est :
<img src="IMAGES/Saulalvarez.jpeg" width="203" height="134" />

où et comment dois placer mon data-lightbox ?
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Dois ajouter le data lightbox ou l'intégrer à l'image ?
animostab
Messages postés
2854
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
507
<img src="IMAGES/Saulalvarez.jpeg" data-lightbox="Saulalvarez.jpeg" width="203" height="134" />
mais a tester
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Lorsque je mets le code juste au dessus il n'y a pas de lien sur l'image, donc lorsque je clique dessus il ne se passe rien.

Il nous manque pas quelque chose dans le code ?
animostab
Messages postés
2854
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
507
Oups ce n'est pas img src mais a href
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Merci animostab !!

Je vais essayer ça de suite !

Je pense que tu m'as donné les dernières clefs pour réussir ! :)
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1306
Lorsque je clique dessus, l'image s'ouvre en grand mais dans une autre fenêtre. 
.
c est que tu dois avoir un probleme avec les js !!
liens vers js pas bon ou blocage js par ton navigateur !

voila mon exemple qui fonctionne avec ton dossier IMAGES2 regarde
http://www.solidfiles.com/d/614baf2804/

a+
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

Mon navigateur c'est safari. Tu avais raison je n'avais pas les bons fichiers dans mon dossier JS. La maintenant l'image s'affiche en grand sur la même page, mais c'est pas très esthétique. Le fond ne s'assombri pas, et l'image n'est pas encadrée.
Ce serait à cause de mes fichiers CSS ? J'ai vérifié ils sont ok.
RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1306
???
et sur l exemple que tu as telecharge tout fonctionne chez toi !! ?
lutchi-lutcho
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

SUPER J'AI REUSSI !
Le problème était que les fichiers dans les 3 dossiers (img, css, js) n'étaient pas complets.

Merci à vous tous

Merci RAD ZONE !
Messages postés
23
Date d'inscription
mardi 24 décembre 2013
Statut
Membre
Dernière intervention
7 février 2014

SUPER J'AI REUSSI !
Le problème était que les fichiers dans les 3 dossiers (img, css, js) n'étaient pas complets.

Merci à vous tous

Merci RAD ZONE !!