Ouvrir une popup agrandissant une image et se ferme automatiquement

Soyez le premier à donner votre avis sur cette source.

Snippet vu 56 062 fois - Téléchargée 29 fois

Contenu du snippet

Permet d'ouvrir une popup avec l'agrandissement d'une image et se ferme s'il y a un click sur une autre fenêtre

Source / Exemple :


<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
	w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');	
	w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
	w.document.write("</BODY></HTML>");
	w.document.close();
}
</script>

sur votre body : 

<a href="javascript:PopupImage('Ici le chemin de votre image)">
<img src="chemin de votre image" width="60" height="30" border="0" alt=""></a>

whidth et height sont à ajuster pour votre convenance.

A voir également

Ajouter un commentaire

Commentaires

Bonjour!

Ce code marche nickel mais par contre mes images en taille reel ne font pas toutes la même taille. Il y a t'il un moyen que le pop up s'adapte de lui même a la taille de l'image?

Merci d'avance
Messages postés
1
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
30 novembre 2010

Bonjour à tous, merci pour ce code sympas !
Mais j'ai un problème de comptabilité sous chrome.
Le lien n'est pas cliquable.
J'ai pas compris pourquoi.

Merci bcp.

NeXaN
Messages postés
36
Date d'inscription
lundi 29 mars 2010
Statut
Membre
Dernière intervention
5 novembre 2011

Bonjour,
Je me permet de relancer la question de bigdoudouille qui n'a pas obtenu de réponse concernant les légendes sous les images dans la popup.
Comment faire lorsqu'on a plusieurs images et que chacune d'elle a une légende différente?
J'ai essayé en modifiant comme tel:

function PopupImage(img,legende) {
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("");
w.document.write("\");
w.document.write(\"");
w.document.write(""+legende+"");
w.document.write("
");
w.document.write("</HTML>");
w.document.close();
}
puis dans ma page html:
[javascript:PopupImage('Ici le chemin de votre image','legende') ]

Ça fonctionne mais, la légende se trouvant dans la balise url, pour être conforme au w3c je dois l'écrire avec des caractères d'échappement pour tous les espaces et les caractères accentués.
C'est pas génial pour les longues légendes.
Y a t il un autre moyen de procéder?

Comment modifier le script pour faire par exemple:

[javascript:PopupImage('Ici le chemin de votre image') ]

Merci d'avance.
Messages postés
5
Date d'inscription
jeudi 7 mai 2009
Statut
Membre
Dernière intervention
18 septembre 2009

Merci c'est super sympa PHPAJAX
Messages postés
27
Date d'inscription
lundi 8 octobre 2007
Statut
Membre
Dernière intervention
17 octobre 2007

les dimensions de l'écran du visiteur :
<script>

var larg= screen.width,
height = screen.height;
</script>
si tu veux que ta popup soit centré, tu la place là ou il faut : x (screen.width-largeur de ta popup)/2 et y (screen.height-hauteur de ta popup)/2
.....
Afficher les 30 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.