I'm trying to build a gallery using jquery/javascript. Ideally I'd have liked to use a plugin, but as there were no out-of-the-box ones that offered functionality I need and I don't know enough javascript to modify them, I had to start from scratch. Here's what I need the script to do:

  • The user clicks a thumbnail image
  • The full-sized image slides out from the left of the div holding the thumbnails. Ideally it slides out from behind it, but if that's not feasible something like what I have currently is fine
  • The thumbnails fade out, and are replaced by the image description
  • A back button fades in in the upper right corner. Clicking this back button causes the full-sized image to slide back to the right, hiding itself, and the thumbnails fade back in again.
  • The user clicks another thumbnail, the effect repeats.

I've managed to get something like this working with the script I have currently. The two problems are as follows:

  • The initial div clicked is much bigger than the subsequent ones. I don't know why or how to fix it.
  • Ideally the script would detect when the user resizes the window and scale accordingly. As it works now, resizing the window and clicking a thumbnail makes the div huge before it catches itself and resizes.
  • Also ideally, the script would adjust the position of the caption and full sized images to accommodate the resized window

I've reached the end of my limited knowledge of javascript; even the code below took me a good 2 days to cobble together using the Jquery docs. As this is for a client site I'm under a bit of time pressure, so if anyone could offer suggestions as to how to get the functionality I need I'd be eternally grateful.

View the live example here.

And here's the code:

$(document).ready(function() {
            $('#thumb-wrap a').children().not('img').hide();//hide image captions
            $('#thumb-wrap a').click(function(){
                var $big = $(this).index(); //get 0-based index of the thumb that was just clicked
                $('#content > h1').hide();//hide the page title
                $('#thumb-wrap').hide(); //hide the thumbnails
                $(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<article/>').delay(600).fadeIn(); //Clone the image captions and wrap them in an article
                $('#back').fadeIn(500); //make the back button appear
                $('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb
                $('#full-wrap img').eq($big).show().css({background: '#603'}); //reveal fullsized image that does match the index of the clicked thumbnail
                var moveIt = parseInt($("#thumb-wrap").outerWidth()); //Get the width of the thumb-wrap div
                var cWidth = $('#content').width();
                $('#content').animate({'maxWidth': '+=' + moveIt + 'px', 'left': '6%'}, 'slow');
                //$('#content').width($('#content').width()+ moveIt);//Extend #content by an area equal to the size of the thumb-wrap
                $('#full-wrap').show(100).animate({ 'right': '+=' + moveIt + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap.
                $(this).fadeOut();//hide the back button
                $('article').remove();//remove the article div
                $('#full-wrap').animate({'right': '0', 'opacity' : 'toggle'}, 400);//hide the fullsize image div
                $('#content').animate({'maxWidth': '360px', 'left' : '43%'}, 400);
                $('#thumb-wrap').delay(500).fadeIn(500);//reveal the thumbnails
                $('#content > h1').delay(500).fadeIn(100);//show the page title