开发者

Placing something above an ID with jQuery

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 tryin开发者_C百科g to do.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜