I'm currently working on a unique portfolio gallery for my website, but I've encountered a problem.
What I'm aiming for is to create a gallery that will slide up when a thumbnail is clicked, without loading all images on the page at once. The layout of the page is structured as follows:
[ main img ]
(hidden placeholder)
[1][2][3][4][5]
Here is how the code should function:
- Click on a thumbnail to get the
SRCattribute - Insert
above the<img src="original+_lg.jpg" />(hidden placeholder)(<div id="placeholder">) - Reduce the
margin-topby500pxto slide up the image using CSS3
I attempted to write the script myself, but my jQuery skills are lacking, and the outcome was not satisfactory. I was able to adjust the margin-top value manually, but struggled with implementing it in a loop, which would be more efficient.
The current script 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");
})
});
As you can see, this is not functioning as intended.
I'm quite disappointed that I couldn't solve this issue on my own, especially since I was able to effectively code jQuery for the home page ().
Any assistance on this matter would be greatly appreciated. Thank you!
EDIT: Adding a bit more clarity:
It would be ideal for this script to extract the SRC attribute of the clicked thumbnail, remove the last four characters (to eliminate .jpg), append _lg.jpg to display the correct large image, insert the new
<img src="original+_lg.jpg">