Code Source pour effectuer un Zoom

Fermé
fuk-san - 13 janv. 2010 à 16:22
 fuk-san - 18 janv. 2010 à 13:14
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 =)

42 réponses

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 ?
0
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 15:53
Peux-tu mettre tes codes de zoom.php et fonctionShowZoom.php ???
Pour mieux voir le souci
0
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 15:56
Oui je vois !!!
Tu as mis le code de la fonction ShowZoom dans un fichier .php ????
0
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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 15:58
Il faut que tu changes le nom de fonctionShowZoom.php !! => fonctionShowZoom.js !!!!
0
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"
0
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 16:04
Enlève juste <?php require('fonctionShowZoom.php'); ?>

voilà
0
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 ?
0
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 16:23
La lettre qui s'affiche ?
0
Ouais c'est l'image que j'ai incluse dans la page, elle s'affiche. Mais y'a aucun zoom.
0
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 16:36
Ah bah oui !!!
<a href="Site_Perso/images/zoroastre.jpg" class="panview"><img src="Site_Perso/images/zoroastre.jpg" onmouseover="ShowZoom(event);" /></a>
0
Oui en fait tu parles de ce que j'avais fait au début.
Maintenant c'est ça :

<html>
<body>

<a href="lettre.png" class="panview"></a>
<img src="lettre.png" alt="Lettre_A" onmouseover="ShowZoom(event);" />

</body>
</html>

parce qu'ils sont dans le même dossier.
C'est ça ?
0
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 16:48
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é
0
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; } ...".
0
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 16:59
Dans Zoom.php, enlève <?php require('....'); ?>
Mais rajoute entre <head> et </head> ceci : <script type="text/javascript" src="fonctionShowZoom.js" />
Voilà !! je mettais complètement embrouillé !! ^^
0
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 =)
0
Oui alors avec ça :

"
<html>
<body>

<a href="lettre.png" class="panview"></a>
<img src="lettre.png" alt="Lettre_A" onmouseover="ShowZoom(event);" />
<script type="text/javascript" src="fonctionShowZoom.js" />

</body>
</html>
"

J'ai l'image mais aucun Zoom.
0
Harricote Messages postés 417 Date d'inscription mercredi 21 janvier 2009 Statut Membre Dernière intervention 30 janvier 2011 41
17 janv. 2010 à 17:10
non, met le dans le head !!
0
c'est-à-dire comme ça ? :

<html>
<body>
<head>
<a href="lettre.png" class="panview"></a>
<img src="lettre.png" alt="Lettre_A" onmouseover="ShowZoom(event);" />
<script type="text/javascript" src="fonctionShowZoom.js" />
</head>
</body>
</html>
0
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 :
0