Discussion :

[jeanLuk]

Bonjour,

J'essaye désespérément de faire en sorte que mes images, lorsque l"on clic dessus s’agrandissent comme un effet lightbox (un fond qui laisse entrevoir le site en fond avec l'image au centre + un bouton pour la fermer).

http://www.casimages.com/img.php?i=1...2507941883.jpg

J'ai essaye fancybox mais je n’y comprend rien et surtout j'ai l’impression que je place mal mes scriptes (j'ai vraiment du mal avec java-script).

Voici ce que je souhaite faire:

1.L'image n'est pas cliquable est restera ainsi pour le visiteur.

2.Si le visiteur veut tout de même la voire en plus grand il peut alors cliquer sur le mot "big" et l'image apparaitra en plus grand avec ce petit effet. (C'est ce que je veut faire).

http://www.casimages.com/img.php?i=1...2424186497.jpg

Quelqu’un pourrait-il m'indiquer un script accepter par la majorité des navigateurs et surtout m'indiquer ou places les éléments du code.

[Spartacusply]

Ce que tu souhaites faire s'appel une fenêtre modale et il est très facile d'en créer une en utilisant la librairie jquery UI : http://jqueryui.com/dialog/#modal

[jeanLuk]

Merci beaucoup de ta réponse mais comment cela fonctionne t-il peut tu m'en dire plus?
Cela a l'air complexe en regardant.
Ou placer tout cela?

Et puis je ne sais pas comment modifier ici, comment manipuler mon "img" et mon "href" pour qu'il corresponde.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="panel" id="panel_1">
	<div class="inside">
		<img src="images/p1_mini.jpg" alt="Photo de montagne" />
		<h2>News Heading</h2>
		<p>Image en plus grand <a href="images/p1.jpg">big</a></p>
	</div>
</div>

[Watilin]

Pas besoin de jQuery pour ça. Sérieusement, faut arrêter d'embrouiller les débutants avec les frameworks.

Une fenêtre modale peut être faite en HTML avec simplement deux choses :

1. Une boîte sombre et semi-transparente qui recouvre toute la page
2. La fenêtre modale elle-même, qui recouvre la boîte sombre

On rajoute éventuellement un lien/bouton pour fermer la modale.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="sombre" style="display: none">
   <section id="modale">
      <a id="bouton-fermer" title="Fermer" href="#">X</a>
      <div id="modale-contenu">Bonjour</div>
   </section>
</div>

Remarque le display: none qui fait que la modale sera initialement masquée.

Et on met ça en forme avec un peu de CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
#sombre {
   position: fixed;
   z-index: 100;
   /* avec left et right à 0, la boîte s'étire sur toute la largeur */
   left: 0;
   right: 0;
   /* pour top et bottom, même astuce */
   top: 0;
   bottom: 0;
   /* un fond semi-transparent avec rgba (le « a » signifie alpha = opacité) */
   background: rgba(32, 32, 32, 0.5);
}
 
#modale {
   position: absolute;
   /* on étire la modale mais sans qu'elle colle aux bords */
   left: 30%;
   right: 30%;
   top: 15%;
   height: 50%;
   /* les 4 lignes qui suivent c'est pour faire plus joli */
   padding: 1ex;
   background: white;
   border: solid thick silver;
   box-shadow: 0 0 1ex rgba(0, 0, 0, 0.5);
}
 
/* le bouton : bizarrement, c'est lui qui a le plus de code CSS */
#bouton-fermer {
   background: white;
   color: black;
   font-size: 110%;
   font-weight: bold;
   text-align: center;
   text-decoration: none;
 
   /* on le met en haut à droite et on le fait déborder un peu */
   position: absolute;
   right: -0.75em;
   top: -0.75em;
   width: 1.2em;
   height: 1.2em;
   line-height: 1.2em;
 
   /* on lui met une bordure ronde */
   border: solid medium black;
   border-radius: 1em;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
 
/* au survol de la souris, on inverse la couleur */
#bouton-fermer:hover {
   background: black;
   color: white;
}

Reste à écrire le JavaScript. C'est pas forcément le plus dur, il faut juste intégrer le concept des gestionnaires d'évènements (addEventListener).
Quand on a un lien comme ça dans le HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="images/p1.jpg" id="lien-big-p1">big</a>

On le récupère en JavaScript avec getElementById et on met un gestionnaire de click dessus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.getElementById("lien-big-p1").addEventListener("click", function( event ){
   // on commence par annuler le comportement par défaut, qui est de suivre le lien
   event.preventDefault();
 
   // on fait apparaître la modale
   document.getElementById("sombre").style.display = "block";
 
   // on récupère le href (par exemple "images/p1.jpg")
   var href = event.target.href;
 
   // on remplit le contenu de la modale
   var $img = document.createElement("img");
   $img.src = href;
   var $contenu = document.getElementById("modale-contenu");
   $contenu.innerHTML = "";
   $contenu.appendChild($img);
});

Et il ne faut pas oublier de gérer le bouton de fermeture :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
document.getElementById("bouton-fermer").addEventListener("click", function( event ){
   event.preventDefault();
   document.getElementById("sombre").style.display = "none";
});

Après il y a moyen de raffiner en délégant la gestion des évènements à un ancêtre commun à tous les liens, ce qui permet de se passer de l'ajout des id et d'écrire moins de code (surtout s'il y a beaucoup de liens). Mais pour l'instant, voilà l'idée de base.