Une popup à la taille d'une image

Ne vous cassez plus la tête à faire des scripts particuliers et des pages html pour les ouvertures d'images en popup ! 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.

On utilise donc la fonction write() pour générer la page recevant l'image.

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()'

Pour éviter que l'on puisse faire un clic droit sur l'image un onclick='window.close()' a été rajouté dans le body.

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) :

<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 :

<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à

Tutorial de piloue

Forums Développement Multimédia

Une popup à la taille d'une image