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.
And here’s the code:
$(document).ready(function() {
$('#back').hide();
$('#full-wrap').hide();
$('#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.
});
$('#back').click(function(){
$(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
});
});