Hi All,
I would like to know if anyone out there has had experience with any simple lightweight jQuery galleries.
My requirements for this particular project are quite simple, and I have made a genuine attempt to roll my own code, however this is just a bit puzzling for a beginner.
I have a large div that loads with an initial image. Followed by an arbitrary number of thumbnail images with a link to their respective larger images. These images are all a similar width but with varying heights.
I would like to click a thumbnail, and have the large image div fade out the image, set the height to the new image (animated of course), then fade in the new image.
I have played with setting opacity to 1% to give that illusion as setting opacity to 0 seems to collapse the div altogether.
It doesn't need to have a slideshow, or any of that functionality but what is happening is at times the main div collapses altogether.
This is my code
$('.clickedimage').click(function() {
var newhref = $(this).attr('href'); // sets the variable for the new link
var curheight = $('.bigpic').height(); //gets the current height
$('.bigpic').attr('style', "height:"+curheight+"px" );
$('#largeimage').fadeOut('slow', function(){
$('#largeimage').attr('src',newhref);
$('#largeimage').fadeTo('fast', 0.01, function(){
var aheight = $('#largeimage').height();
$('.bigpic').animate({
height: aheight+'px'
}, 500, function(){
$('#largeimage').fadeTo('slow',1);
});
});
});
return false; // do not follow through with the links and disable them
});