Pop up zoom d'une image presque parfait

Soyez le premier à donner votre avis sur cette source.

Snippet vu 28 133 fois - Téléchargée 31 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?

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

Ajouter un commentaire

Commentaires

Messages postés
24
Date d'inscription
jeudi 22 juillet 2004
Statut
Membre
Dernière intervention
6 août 2010

Petit problème corrigé...

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:;
]

-----
Messages postés
24
Date d'inscription
jeudi 22 juillet 2004
Statut
Membre
Dernière intervention
6 août 2010

J'ai encore amélioré le code :

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:;
]

----
Messages postés
24
Date d'inscription
jeudi 22 juillet 2004
Statut
Membre
Dernière intervention
6 août 2010

Essayez avec mes quelques modifications...

<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:;
]
Messages postés
3
Date d'inscription
mercredi 19 avril 2006
Statut
Membre
Dernière intervention
21 août 2009

il y a une petite erreur de syntaxe dans le dernier code de BOUILLOU32 :

il faut remplacer :
left=" + Left + ", top=" + Top + "

par :
left='+Left+', top='+Top+'

et ça marche parfaitement !

Merci de votre aide.
Messages postés
7
Date d'inscription
lundi 4 avril 2005
Statut
Membre
Dernière intervention
4 mai 2006

MDR ça casse ! lol.
En tout cas c'est très utile quand même comme code.
Afficher les 9 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.