[POO] zoom sur image redimensionnée

Version imprimable

Bonjour

une image (dont la taille original est de 400x400) est redimensionnée en 150x150 à l'affichage avec le script php suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Header("Content-type: image/jpeg"); $src_im = ImageCreateFromJpeg($image); $size = GetImageSize($image); $src_w = $size[0]; $src_h = $size[1]; //taille de votre image //$dst_w = 70; // Contraint le rééchantillonage à une largeur fixe // Maintient le ratio de l'image $dst_h = round(($dst_w / $src_w) * $src_h); $dst_im = ImageCreateTrueColor($dst_w,$dst_h); /* ImageCopyResampled copie et rééchantillonne l'image originale*/ ImageCopyResampled($dst_im,$src_im,0,0,0,0,$dst_w,$dst_h,$src_w,$src_h); /* ImageJpeg génère l'image dans la sortie standard (c.à.d le navigateur). Le second paramètre est optionnel ; dans ce cas, l'image est générée dans un fic hier*/ ImageJpeg($dst_im); ImageDestroy($dst_im); imageDestroy($src_im);
Je veux faire un zoom sur evenement clic, cela grace à "popbox.js"
mon probleme est que le zoom se fait sur l'image redimensionnée
et la qualité en devient tres mediocre
voici le code qui appelle la fonction js :
Code:

1 2 <img src="vignette.php?dst_w=150&image=images/dossier/img.jpg" onClick="PopEx(this,-150,-125,400,400,20,null);" alt="Cliquez pour zoomer">
ce qu'il faudrait c'est de remplacer "this" par le lien simple de l'image mais je ne sais pas comment faire
si je fait alert(this), cela m'affiche OBJECT

Merci de votre aide

31/05/2008, 18h19
le_chomeur

Code:

<img src="vignette.php?dst_w=150&image=images/dossier/img.jpg" onClick="PopEx('images/dossier/img.jpg',-150,-125,400,400,20,null);" alt="Cliquez pour zoomer">
02/06/2008, 11h42
nicerico

1 pièce(s) jointe(s)

merci pour la solution mais ça me met une erreur :
objet requis

le fichier js utilisé :
Pièce jointe 31229

merci de votre aide
02/06/2008, 11h47
le_chomeur

sans la fonction popex cela risque d'être difficile ^^
mais je peux t'affirmer que popex récupère ton objet image, il te faut donc créer un objet image et le passer en paramètre a ta méthode , c'est lourd :?

1 pièce(s) jointe(s)

la fonction popex dans le fichier suivant
Pièce jointe 31230

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
function PopEx(obj, newLeft, newTop, newWidth, newHeight, speed, className)
{
	if (typeof obj == "string") obj = GetRawObject(obj);
	if (obj.id == "")
		obj.id = CreateRandomId();
 
	var poppedSrc = obj.getAttribute('pbSrcNL');
	if (poppedSrc != null)
	{
		if (pbSrc[obj.id] != null)
		{
			if (pbSrc[obj.id].src != poppedSrc)
				pbSrc[obj.id].src = poppedSrc;
		}
		else
		{
			pbSrc[obj.id] = new Image();
			pbSrc[obj.id].src = poppedSrc;
		}
	}
	else if (pbSrc[obj.id] == null)
	{
		poppedSrc = obj.getAttribute('pbSrc');
		if (poppedSrc != null)
		{
			pbSrc[obj.id] = new Image();
			pbSrc[obj.id].src = poppedSrc;
		}
	}
 
	var objToPop = (pbSrc[obj.id] != null) ? pbSrc[obj.id] : obj;
	var isReady = (typeof objToPop.readyState != 'undefined') ? (objToPop.readyState == "complete") : ((typeof objToPop.complete != 'undefined') ? (objToPop.complete == true) : true);
	if (isReady == false)
	{
		var imgWait = CreateWaitImage(obj);
		var str = "var imgWait = GetRawObject('" + imgWait.id + "'); imgWait.parentNode.removeChild(imgWait); PopEx('" + obj.id + "'," + newLeft + "," + newTop + "," + newWidth + "," + newHeight + "," + speed + ",'" + className + "');";
		objToPop.onload = new Function("", str);
		return;
	}
 
	var elem = InitPopBox(obj);
 
	if (popBox[elem.id].isPopped == true) return;
 
	if (typeof elem.ondblclick == "function")
		elem.onclick = elem.ondblclick;
 
	var startX = parseInt(elem.style.left);
	var startY = parseInt(elem.style.top);
 
	if (newWidth == 0 || newHeight == 0)
	{
		// get size from original object
		if (pbSrc[obj.id] != null)
		{
			newWidth = pbSrc[obj.id].width;
			newHeight = pbSrc[obj.id].height;
		}
		else if (obj.naturalWidth && obj.naturalHeight)
		{
			newWidth = obj.naturalWidth;
			newHeight = obj.naturalHeight;
		}
		else
		{
			var img = new Image();
			img.src = elem.src;
			newWidth = img.width;
			newHeight = img.height;
			delete img;
		}
 
		// some browsers have a race condition where it still doesn't get set so just fill the window
		if (newWidth == 0 || newHeight == 0)
		{
			var windowSize = GetInsideWindowSize();
			var scale = Math.min(parseFloat(windowSize.x) / parseFloat(elem.width), parseFloat(windowSize.y) / parseFloat(elem.height));
			newWidth = parseInt(elem.width * scale);
			newHeight = parseInt(elem.height * scale);
		}
	}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function GetRawObject(obj) {
    var theObj;
    if (typeof obj == "string") {
		var isCSS = (document.body && document.body.style) ? true : false;
        if (isCSS && document.getElementById) {
            theObj = document.getElementById(obj);
        } else if (isCSS && document.all) {
            theObj = document.all(obj);
        } else if (document.layers) {
            theObj = SeekLayer(document, obj);
        }
    } else {
        // pass through object reference
        theObj = obj;
    }
    return theObj;
}

Citation:

il te faut donc créer un objet image et le passer en paramètre a ta méthode

j'ai essayé ça :

Code:

echo '<img src="vignette.php?dst_w=150&image=images/GA_produits/'.$liste2['fichier1'].'" border="0" onClick=\'javascript : var imgprod= new Image();imgprod.src= "images/GA_produits/_052bisjg15.jpg";PopEx(imgprod,-150,-125,400,400,20,null);\' alt="Cliquez pour zoomer">';

erreur : "erreur non specifie"

encore merci

02/06/2008, 14h16
le_chomeur

essayes :

Code:

echo '<img src="vignette.php?dst_w=150&image=images/GA_produits/'.$liste2['fichier1'].'" border="0" onClick="var imgprod= new Image();imgprod.src=\'images/GA_produits/_052bisjg15.jpg\';PopEx(imgprod,-150,-125,400,400,20,null);" alt="Cliquez pour zoomer">'
02/06/2008, 15h14
nicerico

helas
erreur js : "erreur non specifie"
02/06/2008, 15h32
le_chomeur

. . . quel ligne , comment pourquoi :aie:

aurais tu un exemple complet en ligne ?
02/06/2008, 15h57
nicerico

le numero de ligne ne correspond à rien (un <div>...)

le code source :

Citation:

<div id="part1">
<div class="police_12m" style="text-align:justify">
<img align="left" style="padding-left:0px;padding-right:10px;" src="vignette.php?dst_w=150&image=images/GA_produits/_052bisjg15.jpg" border="0" onClick="var imgprod= new Image();imgprod.src='images/GA_produits/_052bisjg15.jpg';PopEx(imgprod,-150,-125,400,400,20,null);" alt="Cliquez pour zoomer"> Inséparables bicolore or jaune / or blanc
<div style="text-align:left" class="police_14m"><a class="police_14m" href="#" target="_blank">Découvrir toute la collection</a></div>
</div>
</div>

et si je met un alert avant l'appel de la fonction popex il me met :
[object]
normal?

merci
02/06/2008, 16h07
le_chomeur

oui tout a fait normal , si tu fais un alert(tonobjet.type) tu aura image :)

pour moi l'erreur viens de ta méthode PopEx qui a l'air complexe pour ce qu'elle fait ...

ok
donc il vaut mieux que je recherche un autre script pour faire ce foutu zoom
si tu as un nom à me donner, je prend ! :)

et merci encore pour ton aide

derniere minute !
si je test sous firefox, la console d'erreur me renvoie vers le popbox.js
et la fonction

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function CreateWaitImage(obj)
{
	if (typeof obj == "string") obj = GetRawObject(obj);
 
	var newId = "popBoxImgWait" + obj.id;
	var imgWait = GetRawObject(newId);
	if (imgWait != null)
		return imgWait;
 
	var left = 0;
	var top = 0;
	if (obj.style.position == "absolute" || obj.style.position == "relative")
	{
		left = parseInt(obj.style.left, 10);
		top = parseInt(obj.style.top, 10);
	}
	else
	{
		var xy = GetElementPosition(obj);
		left = xy.x;
		top = xy.y
		var padding = GetObjectPadding(obj);
		left -= padding.l;
		top -= padding.t;
	}
 
	var width = parseInt(obj.style.width, 10);
	var height = parseInt(obj.style.height, 10);
	var size = GetObjectSize(obj);
	if (isNaN(width) == true)
		width = size.w;
	else if (size.w > width)
		left += ((size.w - width) / 2);
	if (isNaN(height) == true)
		height = size.h;
	else if (size.h > height)
		top += ((size.h - height) / 2);
 
	var parentNode = obj.parentNode;
 
	imgWait = document.createElement("img");
	imgWait.id = newId;
	imgWait.src = popBoxWaitImage.src;
	imgWait.style.position = "absolute";
	imgWait.style.left = (left + (width / 2) - (popBoxWaitImage.width / 2)) + "px";
	imgWait.style.top = (top + (height / 2) - (popBoxWaitImage.height / 2)) + "px";
	imgWait.style.cursor = obj.style.cursor;
	imgWait.style.zIndex = obj.style.zIndex + 1;
	parentNode.appendChild(imgWait);
 
	return imgWait;
}

erreur : parentNode has no properties

02/06/2008, 16h29
le_chomeur

var parentNode = obj.parentNode; cette ligne la qui doit poser problème :)
puisque ton objet image , n'a pas de parent il a été créé dynamiquement et pas ajouter a la page il n'a donc aucun parent :)

tu peux toujours en spécifié un essayes :

Code:

onClick="var imgprod= new Image();imgprod.parentNode = this.parentNode;imgprod.src='images/GA_produits/_052bisjg15.jpg';PopEx(imgprod,-150,-125,400,400,20,null);"
02/06/2008, 16h55
nicerico

erreur : parentNode has no properties
n'apparait plus mais d'autres erreurs notifier par la console de firefox
concernant :

Citation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

mais ça on s'en fou

et IE me met en erreur
"cette objet ne gere pas cette propriete ou cette methode"
:cry:
02/06/2008, 17h02
le_chomeur

donc on ne peut pas donner un parentNode dynamiquement désolé :oops:

il va falloir insérer ton objet quelques part ...

ou changer de méthode de zoom ( + 1 :yaisse2: )

un effet dans ce genre : http://easynews.free.fr/diaporama2/ ?
02/06/2008, 17h29
nicerico

encore merci pour le coup de main
j'en aurais retenu pas mal de chose

A la prochaine (y en aura une surement :))

je ne lache rien !
me voici confronté de nouveau à ce probleme
qui est maintenant résolu

Code:

1
2
3
4
 
<img id="img_zoom" name="img_zoom" class="PopBoxImageSmall" style="display:none" src="images/produits/<?=$row["fichier1"]?>" onclick="Revert(this, 40, 'zoom');" />
<img class="PopBoxImageSmall" src="vignette.php?dst_w=200&image=images/produits/<?=$row["fichier1"]?>" onclick="
        PopEx(document.images.img_zoom, null, null ,0,0,40,'zoom');" />

voilà si ça peut servir...