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:
- Click on thumb to get
SRC
attribute - Place
<img src="original+_lg.jpg" />
above(hidden placeholder)
(<div id="placeholder">
) - Subtract
500px
frommargin-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.
精彩评论