Ajouter les effets fadeIn et fadeOut à l’image lightbox JQuery

J’ai une lightbox jQuery où l’utilisateur clique sur les liens “suivant” et “précédent” pour naviguer dans les images.

Comment puis-je fondre dans la nouvelle image?

Voici un extrait de mon code expliquant comment la nouvelle image remplace l’ancienne image.

var image = $(item).find('a').attr('href'); $('#lightbox img#image').attr('src', image);

2 solutions proposées:

Soliton 1

FadeOut (avec opacité), changer d’image, fondu à nouveau.

 $('#lightbox img#image').animate({ opacity: 0}, 500, function(){ $('#lightbox img#image').attr('src', image); $('#lightbox img#image').animate({ opacity: 1}, 500); });

Soliton 2

Comme mentionné par bricker, vous pouvez utiliser un moyen comme le fait http://jonraasch.com/blog/a-simple-jquery-slideshow , mais pour le faire, je pense que vous ne pouvez pas éviter d’avoir deux objects d’image en même temps. Je suppose que ce serait plus de travail pour vous afin d’adopter votre diaporama. Mais alors vous pourriez fondre et disparaître en même temps.