Jquery image overlay with description

I am a super noob and I am trying to make an overlay effect on my images. I've tried the following code but it's not responding at all. I knew something was missing and couldn't figure out why. So right now an external page that contains images will load into #maincontent whenever I click on a marker on the map, and whenever I click on #maincontent img the image will load into another div #gallery, besides that I also want an overlay that contains description to the image to slide out from the left on #maincontent img at the same time. I want the overlay to contain a description corresponding only to that image, but I have no clue on how to achieve that. On top of that, I'd want the overlay to slide back in only when I click on a new image, so I'm wondering how to achieve that, thanks!

This is the site: http://ift.tt/1GMnWyc

$('#maincontent img').click(function(){
        $('#overlay').slideToggle();
    });
})