11548 sujets

JavaScript, DOM et API Web HTML5

Un carroussel avec images effet "avant/après"

Bonjour à tous,

Je travaille actuellement sur le site d'une amie et j'avoue rencontrer quelques problèmes avec JQuery (je suis débutant), notamment sur cette page :

http://marieluka.com/retouches.html

J'utilise plusieurs fonctions JS dont un carroussel (flowplayer) et un petit script perso qui fait apparaître une image au-dessus de l'autre au survol.
Le problème n°1 : l'effet est lent, mon script n'a pas l'air très efficace (voir code plus bas), savez-vous comment l'arranger ?
Le problème n°2 (peut-être lié au n°1) : Le carroussel est lent, l'apparition du "tip" au survol des flèches est lent...Bref, tout est lent !

Le script JS :

$.fn.retouches = function(){
	var imgBefore = $('.retouches ul li').find('img:first');
	var imgAfter = imgBefore.next();
	
	imgAfter.addClass('superpose').hide();
	
	imgBefore.each(function(){
		imgBefore.mouseover( function(){
			imgAfter.animate({opacity:'show'},500);
		});	
		imgAfter.mouseout( function() {
			imgAfter.animate({opacity:'hide'},500);
		});
	});
}


Les CSS (juste pour superposer les images dans chaque ligne) :

.retouches ul li{position:relative;}
.retouches li img.superpose{position:absolute;top:0;left:0;}


Si vous pouvez m'aider, merci d'avance et bonne journée à tous !

David
Déjà remplace ça, ton effet marchera mieux Smiley smile 
    imgBefore.each(function(){ 
        imgBefore.mouseover( function(){ 
            imgAfter.animate({opacity:1},500); //ou encore imgAfter.fadeIn(500) 
        });     
        imgAfter.mouseout( function() { 
            imgAfter.animate({opacity:0},500); //ou encore imgAfter.fadeOut(500)
        }); 
    });


Puis tout est lent car tu fais ton effet sur toutes les images à la fois !! Fais attention à ton selecteur.
Tu ne peux aps coder ton anim comme ça.
Lis ton algo à l'oral en remplacant tes variables imgBefore et imgAfter par leur sens, tu devrais te rendre compte de ton erreur.
Renseigne toi un peut sur la notion de scope en javascript.
Modifié par MoOx (25 Feb 2010 - 15:22)
Dis toi bien que dans ton code, tes imgBefore/After sont des lots. jQuery travaille toujours sur des collections, même quand tu fais un ('#id') (lot de 1 c'est con oui)
Un code dans ce genre devrait faire l'affaire
$('.retouches ul li').find('img:first').each(function(){ 
        $(this).mouseover( function(){ 
            $(this).next().fadeIn(); 
        });     
        $(this).next().mouseout( function() { 
            $(this).fadeOut(); 
        }); 
    }).next().addClass('superpose').hide();

Modifié par MoOx (26 Feb 2010 - 08:58)
Bon, je me suis (un peu) renseigné sur le scope et j'ai modifié le code en ajoutant une fonction dans la fonction.

$.fn.retouches = function(){

        // je masque la deuxième <img> de chaque <li>
        // et lui ajoute la classe qui la positionne au même endroit que la première <img>
        // (pour éviter d'utiliser un sélecteur CSS3, genre :last-child, non reconnu par certains navigateurs)
	$('.retouches ul li').find('img:first').next().addClass('superpose').hide();

	$('.retouches ul li').toggle( // quand je clique sur la ligne
		function(){
			$(this).find('img.superpose').fadeIn(500); // affiche l'image retouchée
		}, function(){
			$(this).find('img.superpose').fadeOut(500); // ne l'affiche plus
	});
}


J'ai donc finalement opté pour un changement au clic et non plus au survol (à mon avis moins perturbant quand on passe d'une photo à l'autre).

Je suis certain que ce code est loin d'être optimisé mais si quelqu'un (MoOx par exemple !) peut me dire ce qu'il en pense, ça serait super sympa !

Merci encore.
Oups, MoOx, je n'avais pas vu ta réponse avant...
Mais je l'ai testé, ça ne fonctionne pas (mouseout).
Mais merci quand même !
Avec la petite correction que j'ai fait au mouseout, ça devrait le faire Smiley smile (j'avais sans fait attention fait le fadeOut sur la première image et non la 2ième qui est par dessus)
Sujet clos
Aller à