Question

I’m making a custom portfolio gallery for my website, and I’m having an issue.

I want to make the gallery slide up when you click on a thumbnail, but without putting every image on the page right away. The page is set up something like this:

  [  main img   ]
(hidden placeholder)
  [1][2][3][4][5]

And the code should work like this:

1. Click on thumb to get SRC attribute
2. Place <img src="original+_lg.jpg" /> above (hidden placeholder) (<div id="placeholder">)
3. Subtract 500px from margin-top to slide up the image using CSS3

I tried writing the script myself, but I’m terrible with jQuery, and it didn’t turn out so well. I managed to change the margin-top, but only manually, not the loop, which would be ideal.

The code I have is:

$(document).ready(function() {
$("#thumb").click(function() {
    $("#mask").css({
        "margin-top":"-500px"
    });
    $('img#placeholder').attr('src',function(i,e){
        return e.replace("slides/thumb_lg.jpg");
    })
});

});

Which, as you can see, doesn’t really work.

I was pretty disappointed that I couldn’t figure this out, because I managed to actually decently code jQuery for the home page (http://beta.jacobbearce.com/)

I’d really appreciate the help. Thanks!

EDIT: A little clarification:

It’d be great for this script to get the SRC attribute of the thumb you click on, remove the last four characters (to get rid of .jpg), then add on _lg.jpg to display the correct, large image, put the new <img src="original+_lg.jpg"> above the placeholder div, and then subtract 500px from the margin-top so it slides up to show the new image. A little complex, I know, but this would be best for what I’m trying to do.

Answer 1

You can use .before() to insert the new image into the DOM before the hidden placeholder:

$('#placeholder').before( '<img src="original+_lg.jpg" />' );

then adjust the margin as needed.