effet loupe

Mammouth du PHP | 558 Messages

07 janv. 2011, 14:18

Bonjour, je voudrais agrandir une partie de la photo.
Mais l'agrandissement doit se produire sur le coté et voir la zone agrandi sur la petite.
Les seul chose que j'ai trouve ce sont des script déjà prêt mais pas de méthode pour le faire sois même.
De plus je voudrais conserver le changement d'image au passage de la souris sur les miniature.
Cela fait plus de 3 semaines que je cherche mais rien, à part les scripts deja codé que je n'arrive pas à adapter pour en faire ce que je veux.
Merci.
pour le moment j'ai ceci:
http://www.larosedelorient.com/photo1.php
code de la page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 
<title>essaie photo</title>
<style type="text/css"> 
p.horizon{float:left;margin-right:5px;}
img{border:0;border-collapse:collapse;}
img.petite{width:55px;height:75px;border:1px solid  #990000;}
img.agrandi{width:300px;height:400px;}
</style>
 
 
<script type="text/Javascript"> 
if (document.images) {
    grande_image = new Image();
    photo1 = new Image();
    photo2 = new Image();
    photo3 = new Image();
 
    grande_image.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg';
    photo1.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg';
    photo2.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg';
    photo3.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg';
}
</script>
</head>
<body>
<img name="grande_photo" src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="robe de soirée orientale rouge paillette" title="robe de soirée orientale rouge paillette" class="agrandi">
<div style="clear:both;">
<p>Survoler la vignette pour l'agrandir.</p></div>
<p class="horizon"><img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="" title="robe de soirée orientale rouge paillette" class="petite" onmouseover="document.grande_photo.src=grande_image.src;"></p>
<p class="horizon"><img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" alt="robe de soirée orientale rouge paillette  zoom" title="robe de soirée orientale rouge paillette  zoom" class="petite" onmouseover="document.grande_photo.src=photo1.src;"></p>
<p class="horizon"><img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg" alt="robe de soirée orientale rouge paillette  profile" title="robe de soirée orientale rouge paillette  profile" class="petite" onmouseover="document.grande_photo.src=photo2.src;"></p>
<p class="horizon"><img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg" alt="robe de soirée orientale rouge paillette  dos" title="robe de soirée orientale rouge paillette  dos"  class="petite" onmouseover="document.grande_photo.src=photo3.src;"></p>
</body>
</html>
 
 


ViPHP
ViPHP | 3607 Messages

07 janv. 2011, 17:00

Bonjour,

Avant d'aller plus loin, quel est exactement le résultat souhaité?
http://www.mind-projects.it/projects/jqzoom/demos.php ?
http://demo.tutorialzine.com/2010/06/ap ... /demo.html ?

Ensuite pourquoi ne pas utiliser du code déjà fait?

Mammouth du PHP | 558 Messages

07 janv. 2011, 21:36

Le résultat souhaité se trouve ci dessous.
http://www.laredoute.fr/vente-robe-pull ... &pos=6_n_n

En fait j'ai essayé un code déjà prêt mais je n’ai pas réussi à en faire ce que je veux.
Ensuite.
En cas de bug se sera le bazar à réparer.
Il y a tout un tas de fonction en plus qui me sont inutile et alourdissent inutilement ma page.
Et enfin je ne comprends pas le code qui est donné et cela ne me fait pas progresser.
Merci je vais aller voir le lien que tu m'as donné.

Mammouth du PHP | 558 Messages

09 janv. 2011, 20:51

Bonjour je vient de me rendre compte en regardant de plus près le code fournis dans jquery que cela est très compliquez de faire se zoom.
Donc j'en arrive à la conclusion que ce ne serait pas si mal de l'utiliser.
Mais a présent j'ai un autre problème.
Sur lequel je butte et ne trouve pas de solution.
Le zoom fonctionne parfaitement le changement d'image au passage de la souris aussi.
Le problème :
Lorsque l'on change d'image après être passer sur les vignette le zoom reste sur la première image et ne change pas.
Démonstration du problème sur le lien ci-dessous.
http://www.larosedelorient.com/photo2.php
Merci.
Le code html utilisé est ci-dessous.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 
<title>essaie photo</title>
 
 
 
 
 
 
 
 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
 
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
 
<style type="text/css"> 
*{margin:0;padding=0;}
p.horizon{float:left;margin-right:5px;}
img{border:0;border-collapse:collapse;}
img.petite{width:55px;height:75px;border:1px solid  #990000;}
img.agrandi{width:300px;height:400px;}
</style>
 
 
<script type="text/Javascript"> 
if (document.images) {
    grande_image = new Image();
    photo1 = new Image();
    photo2 = new Image();
    photo3 = new Image();
 
    grande_image.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg';
    photo1.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg';
    photo2.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg';
    photo3.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg';
 
$(function() {
	$(".jqzoom").jqzoom();
});
 
}
</script>
</head>
<body>
 
 
 
<div id="content" style="width:300px;height:400px;">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" name="photo" class="jqzoom" style="" title="robe de soirée orientale rouge paillette">
		<img name="photo" src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="robe de soirée orientale rouge paillette" title="robe de soirée orientale rouge paillette" class="agrandi">
</a>
</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<p>Survoler la vignette pour l'agrandir.</p></div>
<p class="horizon">
<a onmouseover="document.photo.src=grande_image.src" href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="" title="robe de soirée orientale rouge paillette" class="petite" onmouseover="document.photo.src=grande_image.src;">
</a></p>
<p class="horizon">
<a onmouseover="document.photo.src=photo1.src" href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" alt="robe de soirée orientale rouge paillette  zoom" title="robe de soirée orientale rouge paillette  zoom" class="petite" onmouseover="document.photo.src=photo1.src;">
</a></p>
<p class="horizon">
<a onmouseover="document.photo.src=photo2.src" href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg" alt="robe de soirée orientale rouge paillette  profile" title="robe de soirée orientale rouge paillette  profile" class="petite" onmouseover="document.photo.src=photo2.src;">
</a></p>
<p class="horizon">
<a onmouseover="document.photo.src=photo3.src" href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg" alt="robe de soirée orientale rouge paillette  dos" title="robe de soirée orientale rouge paillette  dos"  class="petite" onmouseover="document.photo.src=photo3.src;">
</a></p>
 
</body>
</html>
 

devlop78
Invité n'ayant pas de compte PHPfrance

10 janv. 2011, 02:36

Lors du survol sur la vignette, relance le

$(".jqzoom").jqzoom();

Mammouth du PHP | 558 Messages

10 janv. 2011, 11:22

Bonjour,
Merci,
Je relance le $(".jqzoom").jqzoom();
Il y a bien une modification mais c'est seulement le titre qui affiche nul mais l'image zoomé ne change pas.
Ce qui veut probablement dire que cela fonctionne.
Je pense qu'il faut modifier également le lien de l'url mais j'ai beau chercher je ne trouve pas comment faire chaque tentative se solde par un échec.
Merci pour ses pistes.

devlop78
Invité n'ayant pas de compte PHPfrance

10 janv. 2011, 20:31

Regarde pour modifier le "href" du lien de la photo. Il se base peut-être dessus.

Mammouth du PHP | 558 Messages

10 janv. 2011, 22:29

voici ma dernière tentative pour changé le lien
je ne comprend pas j'ai pourtant bien défini l'id du lien a modifier.
merci
l'erreur javascript est

Code : Tout sélectionner

Détails de l’erreur de la page Web Message : 'document.links.grande_photo' a la valeur Null ou n'est pas un objet. Ligne : 42 Caractère : 1 Code : 0 URI : http://www.larosedelorient.com/photo2.php
le code que j'ai ajouté en dessous du lien ayant pour id grande_photo
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" id="grande_photo" class="jqzoom" style="" title="robe de soirée orientale rouge paillette">
<script type="text/Javascript"> 
document.getElementById("grande_photo").href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg";
function changerlien(){
document.links["grande_photo"].href = href ;}
</script>
et le lien de la vignette est:
<p class="horizon">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" onmouseover='changerlien();$(".jqzoom").jqzoom();' title="robe de soirée orientale rouge paillette">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="" title="robe de soirée orientale rouge paillette" class="petite" onmouseover="document.photo.src=grande_image.src;">
</a></p>
<p class="horizon">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" onmouseover='changerlien();$(".jqzoom").jqzoom();' title="robe de soirée orientale rouge paillette">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" alt="robe de soirée orientale rouge paillette  zoom" title="robe de soirée orientale rouge paillette  zoom" class="petite" onmouseover="document.photo.src=photo1.src;">
</p>

devlop78
Invité n'ayant pas de compte PHPfrance

11 janv. 2011, 23:48

Je ne sais pas ... mais vu que ta fonction commence par $( et qu'elle possède "jq", je peux supposer qu'elle utilise jQuery. Dans ce cas, rien de plus simple pour changer ce genre de chose. Tu cibles ton lien et hop .attr('href','nouvelle-valeur');

Mammouth du PHP | 558 Messages

13 janv. 2011, 00:33

Bonsoir,
Merci devlop78.
Cela fonctionne mais news problème inattendu.
L’opacité augmente à chaque fois que l'on change de vignette jusqu'a devenir totalement opaque et masquer totalement la parti sélectionné.
Je voudrais que l'opacité reste toujours la même.
Je ne sait même pas par ou commencé mes recherches ni même comment.
Merci.
Ci-dessous le css.

Code : Tout sélectionner

div.jqZoomTitle { z-index:5000; text-align:center; font-size:11px; font-family:Tahoma; height:16px; padding-top:2px; position:absolute; top: 0px; left: 0px; width: 100%; color: #FFF; background: #999; } .jqZoomPup { overflow:hidden; background-color: #FFF; -moz-opacity:0.5; opacity: 0.5; filter: alpha(opacity = 50); z-index:10; border-color:#c4c4c4; border-style: solid; cursor:crosshair; } .jqZoomPup img { border: 0px; } .preload{ -moz-opacity:0.5; opacity: 0.5; filter: alpha(opacity = 50); color: #333; font-size: 12px; font-family: Tahoma; text-decoration: none; border: 1px solid #CCC; background-color: white; padding: 8px; text-align:center; background-image: url(../images/zoomloader.gif); background-repeat: no-repeat; background-position: 43px 30px; width:90px; * width:100px; height:43px; *height:55px; z-index:10; position:absolute; top:3px; left:3px; } .jqZoomWindow { border: 1px solid #999; background-color: #FFF; }
le code html est ci dessous si vous voulez vous en servir n'oubliez pas de télécharger jqzoom

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>essaie photo</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="css/jqzoom.css" type="text/css"> <style type="text/css"> *{margin:0;padding=0;} p.horizon{float:left;margin-right:5px;} img{border:0;border-collapse:collapse;} img.petite{width:55px;height:75px;border:1px solid #990000;} img.agrandi{width:300px;height:400px;} </style> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script> <script type="text/Javascript"> if (document.images) { grande_image = new Image(); photo1 = new Image(); photo2 = new Image(); photo3 = new Image(); grande_image.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg'; photo1.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg'; photo2.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg'; photo3.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg'; } $(function() { $(".jqzoom").jqzoom(); }); </script> </head> <body> <div id="content" style="width:300px;height:400px;"> <p>Survoler la photo pour zoomer.</p> <a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" id="grande_photo" class="jqzoom" style="" title="robe de soir&eacute;e orientale rouge paillette"> <img name="photo" src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="robe de soir&eacute;e orientale rouge paillette" title="robe de soir&eacute;e orientale rouge paillette" class="agrandi"> </a> <script type="text/Javascript"> function changerlien(){ $(".jqzoom").jqzoom(); } </script> </div> <p>Survoler la vignette pour l'agrandir.</p> <p class="horizon"> <a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" onmouseover='$("a[id=grande_photo]").attr({href:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg",title:"robe de soir&eacute;e orientale rouge paillette"});changerlien();'> <img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="" title="robe de soir&eacute;e orientale rouge paillette" class="petite" onmouseover="document.photo.src=grande_image.src;"> </a></p> <p class="horizon"> <a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" onmouseover='$("a[id=grande_photo]").attr({href:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg",title:"robe de soir&eacute;e orientale rouge paillette zoom"});changerlien();'> <img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" alt="robe de soir&eacute;e orientale rouge paillette zoom" title="robe de soir&eacute;e orientale rouge paillette zoom" class="petite" onmouseover="document.photo.src=photo1.src;"> </a></p> <p class="horizon"> <a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg" onmouseover='$("a[id=grande_photo]").attr({href:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg",title:"robe de soir&eacute;e orientale rouge paillette profile"});changerlien();'> <img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg" alt="robe de soir&eacute;e orientale rouge paillette profile" title="robe de soir&eacute;e orientale rouge paillette profile" class="petite" onmouseover="document.photo.src=photo2.src;"> </a></p> <p class="horizon"> <a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg" onmouseover='$("a[id=grande_photo]").attr({href:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg",title:"robe de soir&eacute;e orientale rouge paillette dos"});changerlien();'> <img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg" alt="robe de soir&eacute;e orientale rouge paillette dos" title="robe de soir&eacute;e orientale rouge paillette dos" class="petite" onmouseover="document.photo.src=photo3.src;"> </a></p> </body> </html>

devlop78
Invité n'ayant pas de compte PHPfrance

14 janv. 2011, 01:48

La cause est plus simple : il créer un petit carré de zoom à chaque fois. Il faudrait voir en faire pour tout réinitialiser à chaque fois, car tu as des carrés qui se superposent.

Regarde l'image :

Image

Mammouth du PHP | 558 Messages

14 janv. 2011, 22:13

merci develop78 pour ton aide précieuse.
je supprime le div créé avant chanque relancement de jqzoom. a l'aide de "$("div").not( $("class[jqZoomPup]")[0]);"
cela fonctionne très bien à présent.
cepandant ça me créé une erreur javascript.
Je ne pense pas que cela est beaucoup d'importance vue que cela fonctionne sur ie, le renard de feu et chrome.
si cela est important merci de m'en informer afin que je corrige cela.
le code ci dessous fonctionne avec jqzoom.
il permet d'afficher un zoom sur une photo et au passage de la souris sur les vignettes de modifier la photo et le zoom.
reste a l'adapté a ce que vous voulez en faire.

Code : Tout sélectionner

Message: 'length' a la valeur Null ou n'est pas un objet. Ligne : 12 Caractère : 4098 Code : 0 URI : http://www.larosedelorient.com/js/jquery-1.3.2.min.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>essaie photo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
<style type="text/css"> 
*{margin:0;padding=0;}
p.horizon{float:left;margin-right:5px;}
img{border:0;border-collapse:collapse;}
img.petite{width:55px;height:75px;border:1px solid  #990000;}
img.agrandi{width:300px;height:400px;}
</style>
 
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<script type="text/Javascript"> 
$(function() {
	$(".jqzoom").jqzoom();
});
function changerlien(){
$("div").not( $("class[jqZoomPup]")[0]);
$(".jqzoom").jqzoom();
}
</script>
</head>
<body>
<p>Survoler la photo pour zoomer.</p>
<div id="content">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" id="grande_photo" class="jqzoom" style="" title="robe de soirée orientale rouge paillette">
<img id="photo" src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="robe de soirée orientale rouge paillette" title="robe de soirée orientale rouge paillette" class="agrandi">
</a>
</div>
<p>Survoler la vignette pour l'agrandir.</p>
<p class="horizon">
<a onmouseover='$("a[id=grande_photo]").attr({href:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg",title:"robe de soirée orientale rouge paillette"});changerlien();'>
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="" title="robe de soirée orientale rouge paillette" class="petite" onmouseover='$("img[id=photo]").attr({src:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg",title:"robe de soirée orientale rouge paillette",alt:"robe de soirée orientale rouge paillette"});'>
</a></p>
<p class="horizon">
<a onmouseover='$("a[id=grande_photo]").attr({href:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg",title:"robe de soirée orientale rouge paillette  zoom"});changerlien();'>
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" alt="robe de soirée orientale rouge paillette  zoom" title="robe de soirée orientale rouge paillette  zoom" class="petite" onmouseover='$("img[id=photo]").attr({src:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg",title:"robe de soirée orientale rouge paillette  zoom",alt:"robe de soirée orientale rouge paillette  zoom"});'>
</a></p>
<p class="horizon">
<a onmouseover='$("a[id=grande_photo]").attr({href:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg",title:"robe de soirée orientale rouge paillette  profile"});changerlien();'>
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg" alt="robe de soirée orientale rouge paillette  profile" title="robe de soirée orientale rouge paillette  profile" class="petite" onmouseover='$("img[id=photo]").attr({src:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg",title:"robe de soirée orientale rouge paillette  profile",alt:"robe de soirée orientale rouge paillette  profile"});'>
</a></p>
<p class="horizon">
<a onmouseover='$("a[id=grande_photo]").attr({href:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg",title:"robe de soirée orientale rouge paillette  dos"});changerlien();'>
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg" alt="robe de soirée orientale rouge paillette  dos" title="robe de soirée orientale rouge paillette  dos" class="petite" onmouseover='$("img[id=photo]").attr({src:"photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg",title:"robe de soirée orientale rouge paillette  dos",alt:"robe de soirée orientale rouge paillette  dos"});'>
</a></p>
</body>
</html>

ViPHP
ViPHP | 3607 Messages

17 janv. 2011, 11:12

Au passage il serait bon de mettre à jour ta version de jquery ;)

Mammouth du PHP | 558 Messages

21 janv. 2011, 21:48

merci jojolapine.
je vient de le faire.