SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    0 Post(s)
    0 Thread(s)

    Help with building javascript/jquery gallery

    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:

    1. The user clicks a thumbnail image
    2. 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
    3. The thumbnails fade out, and are replaced by the image description
    4. 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.
    5. 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:

    Code JavaScript:
    $(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

  2. #2
    SitePoint Member
    Join Date
    Dec 2010
    0 Post(s)
    0 Thread(s)
    Anyone? I'm really quite stuck.

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts