POP UP ZOOM D'UNE IMAGE PRESQUE PARFAIT
cs_jlbrenas
Messages postés
43
Date d'inscription
vendredi 31 mai 2002
Statut
Membre
Dernière intervention
6 avril 2009
-
4 févr. 2004 à 08:59
Vyse69 Messages postés 24 Date d'inscription jeudi 22 juillet 2004 Statut Membre Dernière intervention 6 août 2010 - 6 août 2010 à 22:30
Vyse69 Messages postés 24 Date d'inscription jeudi 22 juillet 2004 Statut Membre Dernière intervention 6 août 2010 - 6 août 2010 à 22:30
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/20107-pop-up-zoom-d-une-image-presque-parfait
https://codes-sources.commentcamarche.net/source/20107-pop-up-zoom-d-une-image-presque-parfait
6 août 2010 à 22:30
Effectivement, la première ouverture du "zoom" ne se faisait pas correctement.
J'ai donc procédé autrement, ce qui oblige à renseigner, pour chaque image, la taille de celle-ci dans le lien à cet endroit : onclick= "Zoom(...);
Je pense que cette fois-ci, nous sommes proches du code parfait ;)
-----
<script language="JavaScript">
function Zoom(url,ilargeur,ihauteur)
{
var largeur;
var hauteur;
var left;
var top;
var scroll;
image = new Image();
image.src = url;
slargeur=screen.width;
shauteur=screen.height;
left=(slargeur-ilargeur)/2;
top=(shauteur-ihauteur)/2;
scroll='scrollbars=0';
if(ilargeur>slargeur) { largeur=screen.width*0.9;scroll='scrollbars=1';left=0; } else { largeur=ilargeur; }
if(ihauteur>shauteur) { hauteur=screen.height*0.9;scroll='scrollbars=1';top=0; } else { hauteur=ihauteur; }
html = '<HTML><HEAD><TITLE>Zoom</TITLE></HEAD> <CENTER>[javascript:self.close() ]</CENTER> </HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,'+scroll+',resizable=0, width='+largeur+', height='+hauteur+', left='+left+', top='+top+'');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close();
}
</script>
Petite image :
[javascript:;
]
Grande image :
[javascript:;
]
-----
6 août 2010 à 20:04
1- Pour résumer, les fenêtres s'adaptent à la dimension de l'image sans dépasser la taille de l'écran et s'ajustent pour bien voir les barres de scroll.
2- Les barres de scroll disparaissent pour les images qui s'affichent en entier à l'écran.
3- La fenêtre se centre sur l'écran. Si l'image est plus grande que l'écran, la fenêtre s'ajuste dans le coin supérieur gauche.
4- Il est possible de fermer la fenêtre en cliquant sur l'image.
Et maintenant, le code presque parfait encore un peu plus parfait :
----
<script language= "JavaScript">
function afficheMaxi(chemin)
{
var largeur;
var hauteur;
var left;
var top;
var scroll;
image = new Image();
image.src = chemin;
ilargeur = image.width+22;
ihauteur = image.height+60;
slargeur=screen.width;
shauteur=screen.height;
left=(slargeur-ilargeur)/2;
top=(shauteur-ihauteur)/2;
scroll='scrollbars=0';
if(ilargeur>slargeur) { largeur=screen.width*0.9;scroll='scrollbars=1';left=0; } else { largeur=ilargeur; }
if(ihauteur>shauteur) { hauteur=screen.height*0.9;scroll='scrollbars=1';top=0; } else { hauteur=ihauteur; }
html = '<HTML><HEAD><TITLE>Zoom</TITLE></HEAD> <CENTER>[javascript:self.close() ]</CENTER> </HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,'+scroll+',resizable=0, width='+largeur+', height='+hauteur+', left='+left+', top='+top+'');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
}
</script>
Petite image :
[javascript:;
]
Grande image :
[javascript:;
]
----
6 août 2010 à 19:12
<script language= "JavaScript">
function afficheMaxi(chemin)
{
var scroll;
scroll='scrollbars=0';
i1 = new Image();
i1.src = chemin;
largeur = i1.width+22;
hauteur = i1.height+60;
var slargeur;
var shauteur;
slargeur=screen.width;
shauteur=screen.height;
if(largeur>slargeur) { largeur=screen.width*0.9;scroll='scrollbars=1'; }
if(hauteur>shauteur) { hauteur=screen.height*0.9;scroll='scrollbars=1'; }
html = '<HTML><HEAD><TITLE>Zoom</TITLE></HEAD> <CENTER>[javascript:self.close() ]</CENTER> </HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,'+scroll+',resizable=0, width='+largeur+', height='+hauteur+', left=0, top=0');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
}
</script>
Petite image :
[javascript:;
]
Grande image :
[javascript:;
]
19 août 2009 à 11:31
il faut remplacer :
left=" + Left + ", top=" + Top + "
par :
left='+Left+', top='+Top+'
et ça marche parfaitement !
Merci de votre aide.
4 mai 2006 à 03:10
En tout cas c'est très utile quand même comme code.
13 févr. 2004 à 09:04
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
Ne copiez ce code qu'une fois dans votre page
*/
5 févr. 2004 à 13:10
Alors ça, j'y avais pensé mais je devais mal initialiser mes variables ou je ne sais quoi parceque l'image ce centrait juste uniquement la deuxième fois que je l'ouvrais?!
Je m'y étais pris comme suis:
Si qqn voit une erreur dans ce script?
<script language= "JavaScript">
function afficheMaxi(chemin)
{
//Déclaration des variables
var largeur = 0;
var hauteur = 0;
var Left = 0;
var Top = 0;
//Main
i1 = new Image();
i1.src = chemin;
largeur = i1.width;
hauteur = i1.height;
Left=(screen.width-largeur)/2;
Top=(screen.height-hauteur)/2;
html = '<HTML><HEAD><TITLE>Image jeunesse de Bottens</TITLE></HEAD> <CENTER></CENTER> </HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0, width=500, height=375, left=" + Left + ", top=" + Top + "');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
}
</script>
4 févr. 2004 à 14:10
posx = largeur de l'écran - largeur de la fenetre / 2;
et pareil pr posy, ça donnera les coord de la fenetre
j'espère que c t intelligible ;-)
4 févr. 2004 à 08:59
Une autre amélioration que je vois, serait d'empêcher l'ouverture de plusieurs popup.
Merci et je vais chercher de mon côté.