Hello There,
I wonder could anyone indulge a complete novice here. I'm trying to create an image gallery using a ul with an id of #gallerylist, where the images are contained in the li items. I would like the images to .fadeIn() sequentially, i.e. looping through the li items one by one.
I've had a go with the .each() method, but the images all appear together, which isn't what I'd like.
Here's my basic code so far..
$(function () {
//select first image from the gallerylist ul
$('#gallerylist li:first img')
// once the image has loaded...
.load(function () {
// set the image hidden by default
$(this).hide();
// select the li container for the image
$(this).parent()
// remove the loading class
.removeClass()
// then insert the image
.append(this);
// fade the image in
$(this).fadeIn('slow');
})
});
Any help would be much appreciated,
Regards,
Neiler.