Ouvrir une popup agrandissant une image et se ferme automatiquement

Soyez le premier à donner votre avis sur cette source.

Snippet vu 61 650 fois - Téléchargée 31 fois

Commenter

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
Kiarie
19 avril 2015 à 17:29
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
NeXaN Messages postés 1 Date d'inscription mardi 22 janvier 2008 Statut Membre Dernière intervention 30 novembre 2010
30 nov. 2010 à 20:57
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
cs_Chris31000 Messages postés 36 Date d'inscription lundi 29 mars 2010 Statut Membre Dernière intervention 5 novembre 2011
30 mars 2010 à 14:25
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.
agreph2009 Messages postés 5 Date d'inscription jeudi 7 mai 2009 Statut Membre Dernière intervention 18 septembre 2009
20 janv. 2010 à 14:11
Merci c'est super sympa PHPAJAX
phpajax Messages postés 27 Date d'inscription lundi 8 octobre 2007 Statut Membre Dernière intervention 17 octobre 2007
20 janv. 2010 à 14:05
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
.....
S'inscrire maintenant

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.

Du même auteur (Aurelyyy)