Menu
Hi folks
I’m trying to initiate a click event (and subsequent image fade in) when a user clicks on a thumbnail. That in itself isn’t such a problem. The problem lies in the fact that the thumbnails are contained in an array and are displayed with an append within an each loop (see code below).
I’ve gotten halfway there, the code below does initiate a fade in when a thumbnail is clicked – however, it fades in all the images as opposed to just the one relating to the thumbnail that is clicked on.
I know this is because by the time the #test append happened all the images have loaded so it just displays all of them. The question is, how can I get it to just display the full image related to the thumbnail that’s been clicked on?
I’m pretty new to this so apologies if this seems a bit pedestrian.
Thanks in advance
Stef
For reference purposes:
array[i][0] refers to id of image
array[i][6] is the thumbnail url
array[i][7] is the full image url
array[i][8] & array[i][9] are x and y coordinates of the thumbnail on the page
[CODE]
function display (array) {
$.each(array, function(i){
$(‘#container’).append(
‘<div id=”‘+array[i][0]+'” style=”position: absolute; left:’+array[i][8]+’px; top: ‘+array[i][9]+’px;”><img src=images/’+array[i][6]+’ id=nav width=85 height=85></div>’
);
$(‘#test’).append(
‘<div id=”‘+array[i][0]+'” style=”width: 398px;”><img src=images/’+array[i][7]+’ id=nav width=398>’
);
$(“#”+array[i]).click(function () {
$(“#test”).fadeIn(‘slow’, function () {
// animation complete
});
});
});
}