effet loupe

par **hakazizi** » 21 janv. 2011, 21:48

merci jojolapine.
je vient de le faire.

par **jojolapine** » 17 janv. 2011, 11:12

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

par **hakazizi** » 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>

par **devlop78** » 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 :

par **hakazizi** » 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>

par **devlop78** » 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');

par **hakazizi** » 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>

par **devlop78** » 10 janv. 2011, 20:31

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

par **hakazizi** » 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.

par **devlop78** » 10 janv. 2011, 02:36

Lors du survol sur la vignette, relance le

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

par **hakazizi** » 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>

par **hakazizi** » 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é.

par **jojolapine** » 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?

par **hakazizi** » 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>

effet loupe

Répondre

Étendre la vue Revue du sujet : effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

Re: effet loupe

effet loupe