Longue est fastidieuse peut être la tâche lorsque l'on a une gallerie d'imagettes qui permettent d'ouvrir en grand une image...
L'idée est la suivante : un javascript va ouvrir et créer une fenêtre qui accueillera votre image, et cette fenêtre sera aux bonnes dimensions !
En plus, lorsque la popup perd le focus, ou lorsque l'on clique sur la grande image, la popup se ferme automatiquement.
:arrow: On utilise donc la fonction write() pour générer la page recevant l'image.
:arrow: Lorsque la popup s'ouvre, elle fait 400 sur 400 puis la taille de l'image est récupérée et la fenêtre se resize automatiquement grâce à onload='checksize()'
:arrow: Pour éviter que l'on puisse faire un clic droit sur l'image un onclick='window.close()' a été rajouté dans le body.
:arrow: Enfin, pour éviter la multiplication des popup, j'ai placé un onblur='window.close()' dans le body. Le OnBlur correspond à la perte de focus : dès que l'on clique en dehors de la popup, celle-ci se ferme.
Ajouter cette portion de code dans le head de votre page (modifier si nécessaire le titre de la fenêtre - Pour les connaisseurs, le script est évidement modifiable à souhait) :
| CODE |
| <SCRIPT LANGUAGE="JavaScript"> <!-- function PopupImage(img) { titre="Agrandissement"; w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=no'); w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>"); w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+10,document.images[0].height+30); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>"); w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>"); w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>"); w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt='Mon image'>"); w.document.write("</TD></TR></TABLE>"); w.document.write("</BODY></HTML>"); w.document.close(); } //--> </SCRIPT> |
Saisir le lien de cette manière dans le body à l'endroit voulu :
| CODE |
| <A href="javascript:PopupImage('img/grandes/numero1.jpg')"><IMG src="img/petites/numero1.jpg" class="image" alt="Cliquer pour agrandir"></A> |
Dans le lien on met la grande image, dans la balise img on met la petite image !
Voilà
img:coupe img:remarque A voir également :