Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript centrer une photo en popup

centrer une photo en popup

2 réponses
Avatar
zloup
Bonjour

en cliquant sur une photo (ptaille = petite taille), celle-ci s'ouvre en
popup (gtaille = grande taille) (ça marche super)

j'ai recuperé les codes mais n'etant pas specialiste, je ne sais pas comment
le modifier (ouvre_image) pour ouvrir la photo en milieu de page quelque
soit le PC bien sur
la photo ayant des dimensions variable

voici le code
_______________________________
script type="text/javascript">
<!--
function ouvre_image(img) {
titre="Agrandissement";
w=open("",'image','width=1,height=1,toolbar=no,scrollbars=no,resizable=no');
w.document.write("<script type='text/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("<body onload='checksize()' onblur='window.close()'
onclick='window.close()' topmargin=0 leftmargin=0 marginwidth=0
marginheight=0>");
w.document.write("<img src='"+img+"' border='0' alt='image' />");
w.document.close();
}
//-->
</script>
_______________________________

echo '<a href="javascript:ouvre_image(' . '\'' . $photo_gtaille . '\'' .
')"><img src="' . $photo_ptaille . '"></a>';
_______________________________

pouvez-vous m'aider svp
merci
Signaler un problème avec ce contenu

2 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
zloup a écrit :
Bonjour

en cliquant sur une photo (ptaille = petite taille), celle-ci s'ouvre en
popup (gtaille = grande taille) (ça marche super)

j'ai recuperé les codes mais n'etant pas specialiste, je ne sais pas comment
le modifier (ouvre_image) pour ouvrir la photo en milieu de page quelque
soit le PC bien sur



Si c'est pour faire ouvrir dans la même fenêtre en milieu d'y celle-ci,
voir : <http://www.huddletogether.com/projects/lightbox2/>

la photo ayant des dimensions variable



Attention ! attention !
Certains utilisateurs règlent leur brouteur pour ne pas accepter les
popups ça va leur faire drôle quand ils vont voir leur fenêtre
principale se retailler !

Bon, certains de ces utilisateurs règlent aussi leur brouteur pour
interdire le redimensionnement.

Hors donc, il faut mettre l'image centrée en background du popup.
Le popup sera dimensionné à la taille maxi des images à afficher, ainsi
s'il part dans un onglet ça ne devrait pas redimensionner la fenêtre.


On crée donc un fichier pour l'affichage 'zoomImage.htm' :

<html>
<head>
<title>agrandissement</title>
<style type="text/css">
body { background: no-repeat center center #888; }
h1, p { color: gold; text-align: center }
a { text-decoration: none; color: yellow; font-weight: bold }
a:hover { color: gold }
</style>
<script type="text/javascript">
var url = self.location.tostring().split('?')[1];
window.onload = function() {
document.body.style.backgroundImage = 'url(' +url +')';
setTimeout(function() {
document.getElementById('wait').style.display='none';
}, 2000);
}
function retour() { if(opener) opener.focus(); }
</script>
</head>
<body>
<h1 id="wait">attendre chargement image, merci</h1>
<p><a href="javascript:retour()">retour</a></p>
</body>
</html>

Nota :
puisque tu utilises le php, ce 'zoomImage.htm' pourra devenir un
'zoomImage.php' et le php saura modifier le background-image encore
mieux que le JS

Puis dans le fichier qui doit popupper les grandes vues :

<script type="text/javascript">
w = false;
function pop(img) {
if(!w || w.closed)
w = window.open('','',''widthE0,heightE0,' -
'toolbar=no,scrollbars=no,resizable=1');
w.location = 'zoomImage.htm?'+img.href;
w.focus();
return false;
}
</script>

et ça s'emploie comme suit :

<a href="grde_image.jpg" target="vue_neuve"
onclick="return pop(this)">image truc</a>

ou, puisque tu sembles phpétiser :

echo "<a href='$photo_gtaille' target='vue_neuve'
onclick='return pop(this)'><img src='$photo_ptaille'></a>";


et comme ça, si pas de JS, on peut voir qd même la grande vue.

Et si tout en php (on peut omettre le target):

echo "<a href='zoomImage.php?$photo_gtaille' target='vue_neuve'><img
src='$photo_ptaille'></a>";


pouvez-vous m'aider svp



<script type="text/javascript">
<!--
var w = false;
function ouvre_image(img) {
if(!w || w.closed)
w=window.open('','','widthP0,heightP0,toolbar=no,scrollbars=0,resizable=1');
w.document.open();
w.document.write('<html>n<head>n<title>agrandissement</title>' +
'n<style type="text/css">n'+
'body {height: 100%; background: no-repeat center center #888;}' +
'nimg { width: 1px; }n' +
'</style>n</head>n<body onclick="self.close()" ' +
'title="clic pour me fermer (facultatif)">n<img src="'+img+'" alt="" '+
'onload="document.body.style.backgroundImage='url('+this.src+')';this.style.display='none'">'+
'n</body></html>');
w.document.close();
w.focus();
}
//-->
</script>

--
sm
Avatar
zloup
merci, je vais tester tout ça
a+

"SAM" a écrit dans le message
de news: 48d574cb$0$928$
zloup a écrit :
Bonjour

en cliquant sur une photo (ptaille = petite taille), celle-ci s'ouvre en
popup (gtaille = grande taille) (ça marche super)

j'ai recuperé les codes mais n'etant pas specialiste, je ne sais pas
comment le modifier (ouvre_image) pour ouvrir la photo en milieu de page
quelque soit le PC bien sur



Si c'est pour faire ouvrir dans la même fenêtre en milieu d'y celle-ci,
voir : <http://www.huddletogether.com/projects/lightbox2/>

la photo ayant des dimensions variable



Attention ! attention !
Certains utilisateurs règlent leur brouteur pour ne pas accepter les
popups ça va leur faire drôle quand ils vont voir leur fenêtre principale
se retailler !

Bon, certains de ces utilisateurs règlent aussi leur brouteur pour
interdire le redimensionnement.

Hors donc, il faut mettre l'image centrée en background du popup.
Le popup sera dimensionné à la taille maxi des images à afficher, ainsi
s'il part dans un onglet ça ne devrait pas redimensionner la fenêtre.


On crée donc un fichier pour l'affichage 'zoomImage.htm' :

<html>
<head>
<title>agrandissement</title>
<style type="text/css">
body { background: no-repeat center center #888; }
h1, p { color: gold; text-align: center }
a { text-decoration: none; color: yellow; font-weight: bold }
a:hover { color: gold }
</style>
<script type="text/javascript">
var url = self.location.tostring().split('?')[1];
window.onload = function() {
document.body.style.backgroundImage = 'url(' +url +')';
setTimeout(function() {
document.getElementById('wait').style.display='none';
}, 2000);
}
function retour() { if(opener) opener.focus(); }
</script>
</head>
<body>
<h1 id="wait">attendre chargement image, merci</h1>
<p><a href="javascript:retour()">retour</a></p>
</body>
</html>

Nota :
puisque tu utilises le php, ce 'zoomImage.htm' pourra devenir un
'zoomImage.php' et le php saura modifier le background-image encore mieux
que le JS

Puis dans le fichier qui doit popupper les grandes vues :

<script type="text/javascript">
w = false;
function pop(img) {
if(!w || w.closed)
w = window.open('','',''widthE0,heightE0,' -
'toolbar=no,scrollbars=no,resizable=1');
w.location = 'zoomImage.htm?'+img.href;
w.focus();
return false;
}
</script>

et ça s'emploie comme suit :

<a href="grde_image.jpg" target="vue_neuve"
onclick="return pop(this)">image truc</a>

ou, puisque tu sembles phpétiser :

echo "<a href='$photo_gtaille' target='vue_neuve'
onclick='return pop(this)'><img src='$photo_ptaille'></a>";


et comme ça, si pas de JS, on peut voir qd même la grande vue.

Et si tout en php (on peut omettre le target):

echo "<a href='zoomImage.php?$photo_gtaille' target='vue_neuve'><img
src='$photo_ptaille'></a>";


pouvez-vous m'aider svp



<script type="text/javascript">
<!--
var w = false;
function ouvre_image(img) {
if(!w || w.closed)
w=window.open('','','widthP0,heightP0,toolbar=no,scrollbars=0,resizable=1');
w.document.open();
w.document.write('<html>n<head>n<title>agrandissement</title>' +
'n<style type="text/css">n'+
'body {height: 100%; background: no-repeat center center #888;}' +
'nimg { width: 1px; }n' +
'</style>n</head>n<body onclick="self.close()" ' +
'title="clic pour me fermer (facultatif)">n<img src="'+img+'" alt="" '+
'onload="document.body.style.backgroundImage='url('+this.src+')';this.style.display='none'">'+
'n</body></html>');
w.document.close();
w.focus();
}
//-->
</script>

--
sm