Code Source pour effectuer un Zoom

Question

Bonjour à toutes et à tous,

J'essaie en ce moment de trouver le code source pour un certain type de Zoom. J'ai déjà une sorte de mini-zoom, mais c'est pas celui-là que je cherche. 
Vous savez, de nombreux sites ont celui qui permet de naviguer sur l'article pour visionner la partie que l'on souhaite.
Je sais pas si j'ai été assez clair, est-ce que vous voyez de quoi je parle.

Merci =)

Harricote · Answer

Pourrais-tu mettre un exemple ? (si tu en as bien sûr...)

fuk-san · Answer

Bien sûr, ça tombe bien, je viens tout juste de retrouver le lien, je me disais bien qu'il manquait un bon exemple !!

Voilà :

https://www.cdiscount.com/pret-a-porter/vetements/jeans/l-1133018.html

Harricote · Answer

Et bien voilà la fonction (ShowZoom(e)) qui permet de le faire : ici : http://www.cdiscount.com/Js/Product/Zoom.js
Tu as juste à mettre onmouseover="ShowZoom(event);" sur ton image et le tour est joué !!

fuk-san · Answer

Ah ok merci beaucoup.
Juste une question: si je fais mon site en PhP, je peux le noter tel quel ?

fuk-san · Answer

Parce qu'en fait quand je clique sur ton lien, le code à l'air vraiment complet.
Mais est-ce que je dois poser tout le code ou bien juste mettre " onmouseover="ShowZoom(event); " ?

phenX · Answer

ben....tout évidement

fuk-san · Answer

Ah ok =).

Mais en fait quand tu me dis que je dois mettre " onmouseover="ShowZoom(event) " dans mon image, ça veut dire que je dois faire une deuxième page qui fasse appelle à cette fonction ? Et " dans mon image" ça veut dire quoi ?

Merci

Harricote · Answer

Tu as une image que tu veux zoomer, non ?
=> <img src="ton_image_que_tu_veux_zoomer.jpg" onmouseover="ShowZoom(event);" />

fuk-san · Answer

Ah ok ! Je vois. Je vais le faire !

Merci !

fuk-san · Answer

Oui alors ce que j'ai fait c'est créer deux fichiers .php dans le même dossier.
Je les ai appelé " zoom.php" et " fonction_ShowZoom.php ". De plus, j'ai crée un dossier " images " ou je met toutes les images. 
Ensuite dans la page Zoom, j'ai noté le code suivant :

 "   <img src="images/lettre.png" alt"Lettre_A" onmouseover="ShowZoom(event);" />    "

Et j'ai noté dans le fichier fonction_Show_Zoom.php tout le code que tu m'avais filé.

Est-ce que le lien est correct ?
Parce que l'image s'affiche mais aucun zoom.

Tu vois l'erreur ?

Harricote · Answer

Dans ta page page zoom.php, rajoutes ceci : <?php require('fonction_ShowZoom.php'); ?>

Voilà !
P.S. : c'est alt="Lettre_A" et non alt"Lettre_A"

fuksan · Answer

Ah ok je vois un peu. Par contre j'ai retapé le code corrigé (merci de ton aide) et une fois que j'ai fait l'appel de la fonction, quand je met en route la page, je vois l'affichage de la fonction dans son intégralité !

Harricote · Answer

C'est à dire ? dans ton code source ou directement sur la page ?

fuk-san · Answer

Dans l'affichage de la page, une fois ouverte avec EasyPhP.
Dans le code source, je vois juste l'appel à la fonction, tu vois ?

Harricote · Answer

Non, pas trop.....
peux-tu copier ce qui est écrit ?

fuk-san · Answer

Bien sûr. Voilà le code: Lettre_A

Harricote · Answer

Tu veux dire que tu ne vois pas le code de fonction_ShowZoom.php ???
Si oui, c'est normal !!!
Mais ca marche bien ?

fuk-san · Answer

bah en fait on dirait que l'appel a lieu parce que une fois que je regarde la page je vois pas le Zoom mais la fonction dans son intégralité. je t'explique, comme j'ai fait appel à la fonction qui se trouve sur la même page, ça devrait fonctionner, nan ?

Harricote · Answer

Bah oui... ^^

fuk-san · Answer

Bah oui en effet. Mais ça marche pas. Alors le code est bon ?

fuk-san · Answer

Bon je vais tout te montrer parce que j'ai peur de pas très bien expliquer.

Tu vois, voici l'image qui apparaît :

( Lettre_A ça représente l'image qui s'affiche)

Lettre_A var ie =(document.all)?true:false; function ShowZoom(e) { var x = (navigator.appName.substring(0, 3) == "Net") ? e.pageX : event.x + document.documentElement.scrollLeft; var y = (navigator.appName.substring(0, 3) == "Net") ? e.pageY : event.y + document.documentElement.scrollTop; var curleft = curtop = 0; var ZoomS = document.getElementById("ZoomOver"); var ZoomL = document.getElementById("ZoomBigImg"); var MainImage = document.getElementsByName('mainProductImage')[0]; var BigImage = document.getElementsByName('ZoomProductImage')[0]; var PosZoomS = findPos(ZoomS); var PosZoomL = findPos(ZoomL); var PosMainImage = findPos(MainImage); var PosBigImage = findPos(BigImage); if (ZoomS != null && ZoomL != null && MainImage != null && BigImage != null) { ZoomS.style.display = ''; ZoomL.style.display = ''; var newY = y - (ZoomS.offsetHeight / 2); var newX = x - (ZoomS.offsetWidth / 2); if (ie && navigator.appName == 'Opera') { posScroll = getScrollingPosition(); newY += posScroll[1]; newX += posScroll[0]; } //Positionnement de la div over de l'image if (newY > PosMainImage[1] && (newY + ZoomS.offsetHeight) < (PosMainImage[1] + MainImage.offsetHeight)) ZoomS.style.top = newY + 'px'; else { if ((newY + ZoomS.offsetHeight) < (PosMainImage[1] + MainImage.offsetHeight)) { newY = PosMainImage[1]; ZoomS.style.top = newY + 'px'; } else { newY = (PosMainImage[1] + MainImage.offsetHeight - ZoomS.offsetHeight); ZoomS.style.top = newY + 'px'; } } if (newX > PosMainImage[0] && (newX + ZoomS.offsetWidth) < (PosMainImage[0] + MainImage.offsetWidth)) ZoomS.style.left = newX + 'px'; else { if ((newX + ZoomS.offsetWidth) < (PosMainImage[0] + MainImage.offsetWidth)) { newX = PosMainImage[0]; ZoomS.style.left = newX + 'px'; } else { newX = (PosMainImage[0] + MainImage.offsetWidth - ZoomS.offsetWidth); ZoomS.style.left = newX + 'px'; } } //positionement dans la grande fenetre if (BigImage.offsetWidth > 500) { newX = (-1 * BigImage.offsetWidth * ((newX - PosMainImage[0]) / MainImage.offsetWidth)); if ((-newX + 500) < BigImage.offsetWidth) BigImage.style.left = newX + 'px'; else BigImage.style.left = -(BigImage.offsetWidth - 500) + 'px'; } if (BigImage.offsetHeight > 350) { newY = (-1 * BigImage.offsetHeight * ((newY - PosMainImage[1]) / MainImage.offsetHeight)); if ((-newY + 350) < BigImage.offsetHeight) BigImage.style.top = newY + 'px'; else BigImage.style.top = -(BigImage.offsetHeight - 350) + 'px'; } if (BigImage.offsetWidth <=500) { ZoomS.style.width = MainImage.offsetWidth + 'px'; } else { ZoomS.style.width = '125px'; } if (BigImage.offsetHeight <= 350) ZoomS.style.height = MainImage.offsetHeight + 'px'; else ZoomS.style.height = '97px'; } } function HideDivZoom() { var ZoomS = document.getElementById("ZoomOver"); var ZoomL = document.getElementById("ZoomBigImg"); var BigImage = document.getElementsByName('ZoomProductImage')[0]; ZoomS.style.display = 'none'; ZoomL.style.display = 'none'; BigImage.style.top = '0px'; BigImage.style.left = '0px'; } function HideDivZoom(e) { var MainImage = document.getElementsByName('mainProductImage')[0]; //MainImage.wid /*if (navigator.appName == 'Opera') { var pos = findPos(MainImage) var height = pos[0] + 330; var width = pos[1] + 267; var x = (navigator.appName.substring(0, 3) == "Net") ? e.pageX : event.x + document.body.scrollLeft; var y = (navigator.appName.substring(0, 3) == "Net") ? e.pageY : event.y + document.body.scrollTop; if ((x > width) || (x < pos[1]) || (y > height) || (y < pos[0])) { } else { ShowZoom(e); return null; } }*/ var ZoomS = document.getElementById("ZoomOver"); var ZoomL = document.getElementById("ZoomBigImg"); var BigImage = document.getElementsByName('ZoomProductImage')[0]; ZoomS.style.display = 'none'; ZoomL.style.display = 'none'; BigImage.style.top = '0px'; BigImage.style.left = '0px'; } function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); } return [curleft, curtop]; } function getScrollingPosition() { var position = [0, 0]; if (typeof window.pageYOffset != 'undefined') { position = [ window.pageXOffset, window.pageYOffset ]; } else if (typeof document.documentElement.scrollTop != 'undefined' && document.documentElement.scrollTop > 0) { position = [ document.documentElement.scrollLeft, document.documentElement.scrollTop ]; } else if (typeof document.body.scrollTop != 'undefined') { position = [ document.body.scrollLeft, document.body.scrollTop ]; } return position; }

Tu vois mieux ?

Harricote · Answer

Peux-tu mettre tes codes de zoom.php et fonctionShowZoom.php ???
Pour mieux voir le souci

Harricote · Answer

Oui je vois !!!
Tu as mis le code de la fonction ShowZoom dans un fichier .php ????

fuk-san · Answer

Ok .
Le code de fonctionShowZoom.php, c'est ça :

var ie =(document.all)?true:false;

function ShowZoom(e) {
var x = (navigator.appName.substring(0, 3) == "Net") ? e.pageX : event.x + document.documentElement.scrollLeft;
var y = (navigator.appName.substring(0, 3) == "Net") ? e.pageY : event.y + document.documentElement.scrollTop;

var curleft = curtop = 0;

var ZoomS = document.getElementById("ZoomOver");
var ZoomL = document.getElementById("ZoomBigImg");
var MainImage = document.getElementsByName('mainProductImage')[0];
var BigImage = document.getElementsByName('ZoomProductImage')[0];

var PosZoomS = findPos(ZoomS);
var PosZoomL = findPos(ZoomL);
var PosMainImage = findPos(MainImage);
var PosBigImage = findPos(BigImage);

if (ZoomS != null && ZoomL != null && MainImage != null && BigImage != null) {

ZoomS.style.display = '';
ZoomL.style.display = '';

var newY = y - (ZoomS.offsetHeight / 2);
var newX = x - (ZoomS.offsetWidth / 2);

if (ie && navigator.appName == 'Opera') {
posScroll = getScrollingPosition();
newY += posScroll[1];
newX += posScroll[0];
}

//Positionnement de la div over de l'image

if (newY > PosMainImage[1] && (newY + ZoomS.offsetHeight) < (PosMainImage[1] + MainImage.offsetHeight))
ZoomS.style.top = newY + 'px';
else {
if ((newY + ZoomS.offsetHeight) < (PosMainImage[1] + MainImage.offsetHeight)) {
newY = PosMainImage[1];
ZoomS.style.top = newY + 'px';
}
else {
newY = (PosMainImage[1] + MainImage.offsetHeight - ZoomS.offsetHeight);
ZoomS.style.top = newY + 'px';
}
}

if (newX > PosMainImage[0] && (newX + ZoomS.offsetWidth) < (PosMainImage[0] + MainImage.offsetWidth))
ZoomS.style.left = newX + 'px';
else {
if ((newX + ZoomS.offsetWidth) < (PosMainImage[0] + MainImage.offsetWidth)) {
newX = PosMainImage[0];
ZoomS.style.left = newX + 'px';
}
else
{
newX = (PosMainImage[0] + MainImage.offsetWidth - ZoomS.offsetWidth);
ZoomS.style.left = newX + 'px';
}
}

//positionement dans la grande fenetre
if (BigImage.offsetWidth > 500) {
newX = (-1 * BigImage.offsetWidth * ((newX - PosMainImage[0]) / MainImage.offsetWidth));
if ((-newX + 500) < BigImage.offsetWidth)
BigImage.style.left = newX + 'px';
else
BigImage.style.left = -(BigImage.offsetWidth - 500) + 'px';
}

if (BigImage.offsetHeight > 350) {
newY = (-1 * BigImage.offsetHeight * ((newY - PosMainImage[1]) / MainImage.offsetHeight));
if ((-newY + 350) < BigImage.offsetHeight)
BigImage.style.top = newY + 'px';
else
BigImage.style.top = -(BigImage.offsetHeight - 350) + 'px';
}
if (BigImage.offsetWidth <=500) {
ZoomS.style.width = MainImage.offsetWidth + 'px';
}
else {
ZoomS.style.width = '125px';
}

if (BigImage.offsetHeight <= 350)
ZoomS.style.height = MainImage.offsetHeight + 'px';
else
ZoomS.style.height = '97px';
}
}

function HideDivZoom() {

var ZoomS = document.getElementById("ZoomOver");
var ZoomL = document.getElementById("ZoomBigImg");
var BigImage = document.getElementsByName('ZoomProductImage')[0];

ZoomS.style.display = 'none';
ZoomL.style.display = 'none';

BigImage.style.top = '0px';
BigImage.style.left = '0px';
}

function HideDivZoom(e) {
var MainImage = document.getElementsByName('mainProductImage')[0];
//MainImage.wid
/*if (navigator.appName == 'Opera') {
var pos = findPos(MainImage)
var height = pos[0] + 330;
var width = pos[1] + 267;
var x = (navigator.appName.substring(0, 3) == "Net") ? e.pageX : event.x + document.body.scrollLeft;
var y = (navigator.appName.substring(0, 3) == "Net") ? e.pageY : event.y + document.body.scrollTop;
if ((x > width) || (x < pos[1]) || (y > height) || (y < pos[0])) {
}
else {
ShowZoom(e);
return null;
}
}*/
var ZoomS = document.getElementById("ZoomOver");
var ZoomL = document.getElementById("ZoomBigImg");
var BigImage = document.getElementsByName('ZoomProductImage')[0];

ZoomS.style.display = 'none';
ZoomL.style.display = 'none';

BigImage.style.top = '0px';
BigImage.style.left = '0px';
}

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft, curtop];
}

function getScrollingPosition() {
var position = [0, 0];
if (typeof window.pageYOffset != 'undefined') {
position = [
window.pageXOffset,
window.pageYOffset
];
}
else if (typeof document.documentElement.scrollTop
!= 'undefined' && document.documentElement.scrollTop > 0) {
position = [
document.documentElement.scrollLeft,
document.documentElement.scrollTop
];
}
else if (typeof document.body.scrollTop != 'undefined') {
position = [
document.body.scrollLeft,
document.body.scrollTop
];
}
return position;
}

------------------------------------------- Et le code de Zoom.php :-------------------------------------------

<html>
<body>
<script type="text/javascript">
$(window).load(function()
{
$("a.panview").panview(560,400);
}
)
;
</script>
<a href="Site_Perso/images/zoroastre.jpg" class="panview"><img src="Site_Perso/images/zoroastre.jpg"/></a>

</body>
</html>

Harricote · Answer

Il faut que tu changes le nom de fonctionShowZoom.php !! => fonctionShowZoom.js !!!!

fuk-san · Answer

Ah bah perfait ça marche !
J'ai compris l'erreur.
Par contre, le message d'erreur : 

"Warning: require(fonction_ShowZoom.php) [function.require]: failed to open stream: No such file or directory in P:\Progs\EasyPHP 3.0\www\zoom\zoom.php on line 4

Fatal error: require() [function.require]: Failed opening required 'fonction_ShowZoom.php' (include_path='.;P:/Progs/EasyPHP 3.0\php\includes') in P:\Progs\EasyPHP 3.0\www\zoom\zoom.php on line 4"

Harricote · Answer

Enlève juste <?php require('fonctionShowZoom.php'); ?>

voilà

fuk-san · Answer

oui c'est bon y'a pas de message d'erreur. 
Par contre c'est juste la lettre qui s'affiche. En plus, je vois pas comment la fonction peut fonctionner si on enlève l'appel à la fonction ?

Harricote · Answer

La lettre qui s'affiche ?

fuk-san · Answer

Ouais c'est l'image que j'ai incluse dans la page, elle s'affiche. Mais y'a aucun zoom.

Harricote · Answer

Ah bah oui !!!

fuk-san · Answer

Oui en fait tu parles de ce que j'avais fait au début. Maintenant c'est ça : Lettre_A

parce qu'ils sont dans le même dossier. C'est ça ?

Harricote · Answer

bah oui !! il faut que zoom.php et fonctionShowZoom.js soient dans le même dossier pour ca marche et il faut que tu mettes : <?php require('fonctionShowZoom.js'); ?> ^^ désolé

fuk-san · Answer

oui j'ai plus de message d'erreur. 
Mais le soucis précédent est de retour :D !
J'ai tout le code de la fonction qui s'affiche, de " var ie =(document.all)? ... " jusqu"à  " ; } return position; }  ...".

Harricote · Answer

Dans Zoom.php, enlève Mais rajoute entre et ceci :

fuk-san · Answer

ah bah oui t'as raison !! 
C'est plus du php donc ça marchait pas !
Et moi qui copiait comme un mouton :D !
J'le fais et je te dis  =)

fuk-san · Answer

Oui alors avec ça : " Lettre_A

Harricote · Answer

non, met le dans le head !!

fuk-san · Answer

c'est-à-dire comme ça ? : Lettre_A

fuk-san · Answer

aaaaaaaaaaaah nan mais j'ai trouvé en fait !!
Merci beaucoup tu m'as beaucoup aidé !!
En plus t'as l'air très fort en programmation :D :

Harricote · Answer

T'as bien fait comme ca ?

fuk-san · Answer

En fait j'ai tapé ça comme ça : Country Style !

Code Source pour effectuer un Zoom

42 réponses

Votre réponse

Newsletters