11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu ] Zoom des images au survol d'un bouton "loupe" ave

Bonjour,

Au survol de mon bouton "loupe" j'aimerais faire apparaitre le zoom de l'image en question et limiter la taille de celui-ci (le zoom ne devant pas dépasser par ex. : max. largeur 500 pixels, max. hauteur 400 pixels) et bien entendu faire disparaitre le zoom si la souris est en dehors du zoom.
Modifié par kibodio (09 Mar 2011 - 15:24)
Bonjour, tu peux utiliser l'évènement hover:

jQuery(".prod_zoom").hover(function(){
  if(jQuery(".myzoom span").length == 0){requete ajax et afficher}
  else{jQuery(".myzoom span").show();}  

},function(){
   jQuery(".myzoom span").hide();
}
)

Il te faudra certainement affiner un peu ...

ps:l'url de l'image dans l'id du div c'est pas très joli.
Merci pour l'info. Une précision :
a écrit :
jQuery(".prod_zoom").hover(function(){
pour l'événement souris en dehors de classe "prod_zoom" ?
Si tu regardes bien, l'évènement hover contient 2 fonctions : la première s'exécute quand tu rentres, la seconde, quand tu sors.
Ok, par contre je pensais pouvoir mettre en place l'affichage par ce biais :

code js (pour essai avec clic sur classe "prod_zoom":
a écrit :
jQuery(".prod_zoom").click(function() {
var id = "#"+jQuery(this).next(jQuery(".prod_myzoom")).attr("id");
if (jQuery(id).length != 0) {
jQuery(id).hide(0);
} else {
jQuery(id).slow(0);
}
});


code html en indiquant un id différent pour chaque image (de 1 à x images):

a écrit :
<div class="prod_zoom"></div>
<div class="prod_myzoom" id="1"><img src="http://www.annuaire-enfants-kibodio.com/images/aquagym.jpg" /></div>
<div class="prod_zoom"></div>
<div class="prod_myzoom" id="2"><img src="http://www.annuaire-enfants-kibodio.com/images/sport-eau.jpg" /></div>


Mais cela ne fonctionne pas... Bref en un mot, cela dépasse mes connaissances.
EN fait eurreur de ma part utilisation de slow au lieu de show, ce code js sur clic fonctionne :
a écrit :
jQuery(".prod_zoom").click(function() {
var id = "#"+jQuery(this).next(jQuery(".prod_myzoom")).attr("id");
if (jQuery(id+":visible").length != 0) {
jQuery(id).hide(0);
} else {
jQuery(id).show(0);
}
});
Merci pour ces encouragements.

Un autre problème, je veux pouvoir redimensionner le zoom de mes images en utilisant une de "mes" fonctions. Mon problème : le zoom ne se redimensionne qu'au 2ème clic

//Clic sur classe "prod_zoom", affichage ou non du zoom
var id1 = "";
jQuery(".prod_zoom").click(function() {
var id = "#"+jQuery(this).next(jQuery(".prod_myzoom")).attr("id");
if (jQuery(id+":visible").length != 0) { 	
jQuery(id+" img").resize({maxWidth:550,maxHeight:550}); //redimensionne les images
jQuery(id).hide(0); //affiche le zoom 
} else {
	jQuery(id).show(0);
	if (id !== id1) { //cache le zoom précédemment affiché
		if (id1 != "") {jQuery(id1).hide(0);}
		id1 = id;
	}	
}
});


Où est mon erreur ?
C'est la fatigue... code corrigé :

//Clic sur classe "prod_zoom", affichage ou non du zoom
var id1 = "";
jQuery(".prod_zoom").click(function() {
var id = "#"+jQuery(this).next(jQuery(".prod_myzoom")).attr("id");
if (jQuery(id+":visible").length != 0) {	
	jQuery(id).hide(0); //cache le zoom 
} else {
	jQuery(id+" img").resize({maxWidth:600,maxHeight:600}); //redimensionne les images ne marche qu'au 2ème clic !!!!
	jQuery(id).show(0); //afiche le zoom
	if (id !== id1) { //cache le zoom précédemment affiché
		if (id1 != "") {jQuery(id1).hide(0);}
		id1 = id;
	}	
}
});


et cela fonctionne
Sujet clos
Aller à