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
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
A voir également:
- Agrandir une image en cliquant dessus html
- Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
- Comment agrandir une image - Guide
- Image cliquable html ✓ - Forum Réseaux sociaux
- Image iso - Guide
- Editeur html - Télécharger - HTML
7 réponses
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
25 déc. 2013 à 00:14
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 !
a+
<!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+
25 déc. 2013 à 03:06
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