OUVRIR UNE POPUP AGRANDISSANT UNE IMAGE ET SE FERME AUTOMATIQUEMENT
cs_zzzzzz
Messages postés408Date d'inscriptionlundi 16 décembre 2002StatutMembreDernière intervention18 décembre 2012
-
3 août 2004 à 21:19
Kiarie -
19 avril 2015 à 17:29
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
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és1Date d'inscriptionmardi 22 janvier 2008StatutMembreDernière intervention30 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és36Date d'inscriptionlundi 29 mars 2010StatutMembreDerniè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és5Date d'inscriptionjeudi 7 mai 2009StatutMembreDernière intervention18 septembre 2009 20 janv. 2010 à 14:11
Merci c'est super sympa PHPAJAX
phpajax
Messages postés27Date d'inscriptionlundi 8 octobre 2007StatutMembreDernière intervention17 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
.....
agreph2009
Messages postés5Date d'inscriptionjeudi 7 mai 2009StatutMembreDernière intervention18 septembre 2009 20 janv. 2010 à 12:01
Merci pour votre réponse rapide mais si on voulait que la popup reste placée à l'intérieur du navigateur et non défini sur l'écran étant donné que l'on ne sait pas les dimensions de l'écran de l'internaute.
Merci de votre infos
phpajax
Messages postés27Date d'inscriptionlundi 8 octobre 2007StatutMembreDernière intervention17 octobre 2007 20 janv. 2010 à 11:12
ajouter sa avant :
if (document.images[0].complete) {....
----------
var x=150, y=150; // x et y défini la position de la popup
top.moveTo(x,y);
agreph2009
Messages postés5Date d'inscriptionjeudi 7 mai 2009StatutMembreDernière intervention18 septembre 2009 20 janv. 2010 à 11:07
Merci phpajax pour ce script qui fonctionne parfaitement et sous tous les navigateurs. Cependant j'aurai une petite question : Comment peut on faire pour la Popup s'ouvre à l'endroit désirer et non pas en haut à gauche du navigateur.
Merci pour votre réponse
karine2903
Messages postés3Date d'inscriptionmardi 2 décembre 2008StatutMembreDernière intervention17 décembre 2008 17 déc. 2008 à 09:00
Bonjour, est-ce que ce code ressemble aux popup lightbox avec texte, fond flou sombre et bouton fermer ? j'ai déjà essayer plusieurs codes (pas encore celui-ci) mais je ne trouve pas encore mon bonheur. Ya t-il une démo ? Merci.
lassad_haddaji
Messages postés141Date d'inscriptionmardi 24 avril 2007StatutMembreDernière intervention 6 avril 2012 21 févr. 2008 à 17:42
merci pour le script tres utiles
phpajax
Messages postés27Date d'inscriptionlundi 8 octobre 2007StatutMembreDernière intervention17 octobre 2007 24 oct. 2007 à 04:26
-----> le popup se ferme si on clique sur limage, la taille du popup=la taille réelle de l'image
vlxsources
Messages postés1Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention20 septembre 2007 20 sept. 2007 à 11:13
Salut à tous,
J'ai pour ma part résolu le problème sous IE et incluant un focus sur la fenêtre lors de l'ouverture :
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=520, height=354');
w.focus();
w.document.write("<HTML>");
w.document.write("</HTML>");
w.document.close();
}
</script>
dandvp
Messages postés30Date d'inscriptionmardi 17 mai 2005StatutMembreDernière intervention21 janvier 2007 10 sept. 2007 à 03:43
Bonjour à tous !!
Même question que BRW (post précédant)
MErci d'avance...
Cdt
cs_brw
Messages postés1Date d'inscriptiondimanche 26 février 2006StatutMembreDernière intervention11 août 2007 11 août 2007 à 18:45
bonjour,
merci pour ce script. Il marche très bien sur mozilla, sur safari mais sur internet explorer le pop-up reste à l'arrière-plan, comment fiare pour éviter ça ?
merci de votre aide.
Ego4
Messages postés1Date d'inscriptionmercredi 18 octobre 2006StatutMembreDernière intervention18 octobre 2006 18 oct. 2006 à 00:37
Alors moi je souhaiterais pouvoir paramétrer la pop-up qui s'ouvrira (image de fond, ou couleurs...)
Est-ce possible ? Comment ?
bigdoudouille
Messages postés25Date d'inscriptiondimanche 13 juin 2004StatutMembreDernière intervention19 janvier 2011 10 sept. 2006 à 21:45
Ok tu me donnes des code smais est-ce que le texte ets modifiable si j'ai une possbilité d'avoir 5 pop up sur une même page. Ici le cas que tu me présentes c'est pour juste un seul popup possible non??
ttropnull
Messages postés1Date d'inscriptionjeudi 30 juin 2005StatutMembreDernière intervention 3 septembre 2006 3 sept. 2006 à 21:14
bonjour,
bon alors moi c'est un peu particulier car mon image vient d'un chemin enregistré dans ma base mysql donc d'une variable donc d'une page en php (et je debute en php).
quand je click sur mon image, rien ne se passe...
Ce doit etre un probleme de code car j'ai un beau "erreur sur la page" dans la barre d'état (meme en metant le chemin en 'dur' dans le code).
ps:
1) tu mets directement w=open, java sait que w est un popup?
2) si un internaute a un bloquage publicitaire sur son fire wall, le popup va t'il s'ouvrir quand meme?
Merci d'avance....
dandvp
Messages postés30Date d'inscriptionmardi 17 mai 2005StatutMembreDernière intervention21 janvier 2007 24 juil. 2006 à 20:14
re bigdoudouille:
regarde un peu plus haut, on a déjà donné la réponse a ta 1ère question. bon aller jte l'indique quand même ci dessous:
Balise script a inclure dans le code entre les balises <head>:
Concernant ta 2ème question je pense que tu dois vraiment être débutant pour poser ce genre de question. Un conseil, vas sur google et recherche "apprendre html" ou encore "débuter en html", ces cours te seront vraiment profitable pour la suite de tes travaux.
Je te donne quand même la solution dans le cas où tu n'as vraiment pas le temps de lire quelques cours html...
Donc pour mettre du texte au dessus de l'image pop up, il suffit simplement que tu ecrives ton texte entre les balises dans le <script>. Voilà ce que ca donnerai :
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');
w.document.write("<HTML>TAPEZ ICI LE TEXTE QUE TU VEUX AU DESSUS DE L'IMAGE");
w.document.write("</HTML>");
w.document.close();
}
</script>
Voilà j'espère tout de meme que tu prendras le temps pour apprendre l'html qui est la base essentiel pour un jeune webmaster ;)
PS: envoi d'autres questions s'il y en a avant le 29 juillet, car ensuite je serais en vacance :D
++
bigdoudouille
Messages postés25Date d'inscriptiondimanche 13 juin 2004StatutMembreDernière intervention19 janvier 2011 22 juil. 2006 à 14:40
Rebonjour
bon moi mon code en fait me permet d'ouvrir une image en dans un popup.
Ok très bine mais
1. Je voudrais que dès que l'on clique sur une autre image. le premier popu se ferme automatiquement
2. Je voudrais aussi mettre du texte au-dessus de l'image dans le popup.
Comment faire
merci
bigdoudouille
Messages postés25Date d'inscriptiondimanche 13 juin 2004StatutMembreDernière intervention19 janvier 2011 29 mai 2006 à 19:39
merci bcp ca marche
merci
dandvp
Messages postés30Date d'inscriptionmardi 17 mai 2005StatutMembreDernière intervention21 janvier 2007 29 mai 2006 à 19:24
Salut bigdoudouille !
pour que le pop up soit une autre image que celle en petit, il suffit de changer le lien de la balise .
Voilà!
concernant Feloute,
il faudrait que je test ton code mais là jsuis en plein période de partiels donc désolé... essaye de faire avec le code que j'ai donné...
Bone continuation ++
feloute
Messages postés1Date d'inscriptionjeudi 6 avril 2006StatutMembreDernière intervention29 mai 2006 29 mai 2006 à 18:12
Salut
j'utilise un onmouseover pour pour mes images, et l'ajout de ce script fonctionne mais annule completement la fonction onmouse.
Est que quelqu'un pourrait m'aider?? merci par avance.
Feloute
[javascript:PopupImage('Ici le chemin de votre image')
]
whidth et height sont à ajuster pour votre convenance.
Mylo ++
kikong
Messages postés23Date d'inscriptionsamedi 6 août 2005StatutMembreDernière intervention 9 janvier 2008 26 déc. 2005 à 11:37
Et les gars j'ai rien compris comment on mets votre script!!
En gros j'ai des images et je voudrais que quant on clique dessus, un agrandissement en popup se fasse
J'ai essayer de choper des codes mais j'ai toujours pa réussi help!!!!
Merci!
cs_zzzzzz
Messages postés408Date d'inscriptionlundi 16 décembre 2002StatutMembreDernière intervention18 décembre 2012 3 août 2004 à 21:24
10/10
cs_zzzzzz
Messages postés408Date d'inscriptionlundi 16 décembre 2002StatutMembreDernière intervention18 décembre 2012 3 août 2004 à 21:19
19 avril 2015 à 17:29
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
30 nov. 2010 à 20:57
Mais j'ai un problème de comptabilité sous chrome.
Le lien n'est pas cliquable.
J'ai pas compris pourquoi.
Merci bcp.
NeXaN
30 mars 2010 à 14:25
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.
20 janv. 2010 à 14:11
20 janv. 2010 à 14:05
<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
.....
20 janv. 2010 à 12:01
Merci de votre infos
20 janv. 2010 à 11:12
if (document.images[0].complete) {....
----------
var x=150, y=150; // x et y défini la position de la popup
top.moveTo(x,y);
20 janv. 2010 à 11:07
Merci pour votre réponse
17 déc. 2008 à 09:00
21 févr. 2008 à 17:42
24 oct. 2007 à 04:26
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("
");
w.document.write("</HTML>");
w.document.close();
}
-----> le popup se ferme si on clique sur limage, la taille du popup=la taille réelle de l'image
20 sept. 2007 à 11:13
J'ai pour ma part résolu le problème sous IE et incluant un focus sur la fenêtre lors de l'ouverture :
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=520, height=354');
w.focus();
w.document.write("<HTML>");
w.document.write("</HTML>");
w.document.close();
}
</script>
10 sept. 2007 à 03:43
Même question que BRW (post précédant)
MErci d'avance...
Cdt
11 août 2007 à 18:45
merci pour ce script. Il marche très bien sur mozilla, sur safari mais sur internet explorer le pop-up reste à l'arrière-plan, comment fiare pour éviter ça ?
merci de votre aide.
18 oct. 2006 à 00:37
Est-ce possible ? Comment ?
10 sept. 2006 à 21:45
3 sept. 2006 à 21:14
bon alors moi c'est un peu particulier car mon image vient d'un chemin enregistré dans ma base mysql donc d'une variable donc d'une page en php (et je debute en php).
quand je click sur mon image, rien ne se passe...
Ce doit etre un probleme de code car j'ai un beau "erreur sur la page" dans la barre d'état (meme en metant le chemin en 'dur' dans le code).
ps:
1) tu mets directement w=open, java sait que w est un popup?
2) si un internaute a un bloquage publicitaire sur son fire wall, le popup va t'il s'ouvrir quand meme?
Merci d'avance....
24 juil. 2006 à 20:14
regarde un peu plus haut, on a déjà donné la réponse a ta 1ère question. bon aller jte l'indique quand même ci dessous:
Balise script a inclure dans le code entre les balises <head>:
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');
w.document.write("<HTML>");
w.document.write("</HTML>");
w.document.close();
}
</script>
Concernant ta 2ème question je pense que tu dois vraiment être débutant pour poser ce genre de question. Un conseil, vas sur google et recherche "apprendre html" ou encore "débuter en html", ces cours te seront vraiment profitable pour la suite de tes travaux.
Je te donne quand même la solution dans le cas où tu n'as vraiment pas le temps de lire quelques cours html...
Donc pour mettre du texte au dessus de l'image pop up, il suffit simplement que tu ecrives ton texte entre les balises dans le <script>. Voilà ce que ca donnerai :
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');
w.document.write("<HTML>TAPEZ ICI LE TEXTE QUE TU VEUX AU DESSUS DE L'IMAGE");
w.document.write("</HTML>");
w.document.close();
}
</script>
Voilà j'espère tout de meme que tu prendras le temps pour apprendre l'html qui est la base essentiel pour un jeune webmaster ;)
PS: envoi d'autres questions s'il y en a avant le 29 juillet, car ensuite je serais en vacance :D
++
22 juil. 2006 à 14:40
bon moi mon code en fait me permet d'ouvrir une image en dans un popup.
Ok très bine mais
1. Je voudrais que dès que l'on clique sur une autre image. le premier popu se ferme automatiquement
2. Je voudrais aussi mettre du texte au-dessus de l'image dans le popup.
Comment faire
merci
29 mai 2006 à 19:39
merci
29 mai 2006 à 19:24
pour que le pop up soit une autre image que celle en petit, il suffit de changer le lien de la balise .
Voilà!
concernant Feloute,
il faudrait que je test ton code mais là jsuis en plein période de partiels donc désolé... essaye de faire avec le code que j'ai donné...
Bone continuation ++
29 mai 2006 à 18:12
j'utilise un onmouseover pour pour mes images, et l'ajout de ce script fonctionne mais annule completement la fonction onmouse.
Est que quelqu'un pourrait m'aider?? merci par avance.
Feloute
Voila le code avant modif .
du palais guell mosaique art nouveau gaudi.jpg</td>
25 mai 2006 à 19:59
29 avril 2006 à 12:38
<html>
<head>
<title></title>
</head>
[javascript:PopupImage('Ici le chemin de votre image')
]
</html>
En fait tu le place là où tu souhaites faire ton lien (là où il y a ton image) et tout ca entre les balise
Bon courage...
Mylo ++
29 avril 2006 à 09:48
donc je mets ça dans ma page web :
<head> :
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');
w.document.write("<HTML>");
w.document.write("</HTML>");
w.document.close();
}
</script>
et ça où?
[javascript:PopupImage('Ici le chemin de votre image')
]
29 avril 2006 à 09:48
donc je mets ça dans ma page web :
<head> :
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');
w.document.write("<HTML>");
w.document.write("</HTML>");
w.document.close();
}
</script>
et ça où?
[javascript:PopupImage('Ici le chemin de votre image')
]
28 avril 2006 à 14:55
Ca fonctionne bien mais y'a une petite erreur oubli de cote '
voici le bon:
entre <head> :
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');
w.document.write("<HTML>");
w.document.write("</HTML>");
w.document.close();
}
</script>
sur votre body :
[javascript:PopupImage('Ici le chemin de votre image')
]
whidth et height sont à ajuster pour votre convenance.
Mylo ++
26 déc. 2005 à 11:37
En gros j'ai des images et je voudrais que quant on clique dessus, un agrandissement en popup se fasse
J'ai essayer de choper des codes mais j'ai toujours pa réussi help!!!!
Merci!
3 août 2004 à 21:24
3 août 2004 à 21:19