Pop up zoom d'une image presque parfait
Soyez le premier à donner votre avis sur cette source.
Snippet vu 29 249 fois - Téléchargée 34 fois
Contenu du snippet
Ce code vous affiche votre image miniature, et permet de zoomer sur celle-ci. Le zoom s'effectue par une pop up dont la taille et déterminée automatiquement par celle de votre photo encadrée d'une bordure de couleur que vous pouvez avec votre site.
Je n'ai pas réussi à centrer automatiquement la fenêtre. Si quelqu'un peut m'aider?
Je n'ai pas réussi à centrer automatiquement la fenêtre. Si quelqu'un peut m'aider?
Je n'ai pas réussi à centrer automatiquement la fenêtre. Si quelqu'un peut m'aider?
Source / Exemple :
Dans le Head
<script language="JavaScript">
function afficheMaxi(chemin)
{
i1 = new Image();
i1.src = chemin;
html = '<HTML><HEAD><TITLE>Nom de la fenêtre</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body bgcolor="#4D5B88"><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+24,document.imageTest.height+40)"></CENTER></BODY></HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0, width=500, height=375, left=250, top=125');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
}
</script>
Dans le Body (pour 1 image)
<a href="javascript:;" onclick="afficheMaxi('images/image_zoom.JPG')">
<img src="images/image_small.JPG" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>;
Conclusion :
Je n'ai pas réussi à centrer automatiquement la fenêtre. Si quelqu'un peut m'aider?
A voir également
- Pop up zoom d'une image presque parfait
- Formulaire pop up ✓ - Forum Javascript / DHTML
- Parfait boucle ✓ - Forum C / C++ / C++.NET
- Pop up js ✓ - Forum Javascript / DHTML
- Zoom image ✓ - Forum Delphi / Pascal
- Zoom image python ✓ - Forum Python
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.
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.