CODEWITHSUNDEEP
jqueryimagelightboxfadeinfadeout
Cecil Theodore
Cecil Theodore

Reputation: 9939

Add fadeIn and fadeOut effect to image lightbox JQuery

I have a jQuery lightbox where the user clicks on two links 'next' and 'previous' to navigate through images.

How do I fade in the new image?

Here is a snippet of my code of how the new image is replacing the old image.

var image = $(item).find('a').attr('href');

$('#lightbox img#image').attr('src', image);

Upvotes: 0

Views: 1579

Answers (1)

lumbric
lumbric

Reputation: 9053

2 proposed solutions:

Soliton 1

FadeOut (with opacity), change image, fade in again.

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

Soliton 2

As mentioned by bricker, you can use a way as http://jonraasch.com/blog/a-simple-jquery-slideshow does, but to do so I think you can't avoid having two image objects at the same time. I suppose this would be more work for you in order to adopt your slideshow. But then you could fadein and fadeout at the same time.

Upvotes: 1

Related Questions