JQuery Click Event with array of images - help please

[mxbrainwrong]

Hi folksI'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 advanceStef For reference purposes:array[0] refers to id of imagearray[6] is the thumbnail urlarray[7] is the full image urlarray[8] & array[9] are x and y coordinates of the thumbnail on the page

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});          });    });}

Full page attached

upload.php

[thescientist]

it's odd that you reference your array of images as array's themselves, rather than an object. surely something like this would be more practical/intuitive as a structure would be returning an array of objects.

var array = [{  id: 'one',  thumb: 'pathToThumbUrl-One',  full: 'pathToFullUrl-One',  x: 'x-coord-One',  y: 'y-coord-One'},{  id: 'two',  thumb: 'pathToThumbUrl-Two',  full: 'pathToFullUrl-Two',  x: 'x-coord-Two',  y: 'y-coord-Two'},{//etc}]; console.log(array[0].id); //oneconsole.log(array[1].id); //two

anyway, just looking at the code, one thing to know is that ID's can't be numbers. they need to start with a letter. Also, on the click handler, you are assigning the click event to the array index, not a particular id.

 $("#"+array[i]).click(function () {  $("#test").fadeIn('slow', function () {	// animation complete  });});

by your own specs, you say the ID is accessed as array[0]

[mxbrainwrong]

Thank you for your answer - sorry if i seem 'odd' and thanks for taking the trouble to point it out. Okay - firstly, the reason (not that it's particularly relevant here) that the array is in that format is because it was taken from the database as such and that's the format I've been working with thus far. To change it now would mean rewriting a whole chunk of code and to be frank, after the sheer headache this project has given me along with deadlines pertaining to it means that is neither desirable or practical. Secondly - you were right about the click handler, I overlooked that. Still not getting anywhere with this though.

[dsonesuk]

I think you have made it more complicated than is required, as long as the thumbnail are in exact order as the larger images you can use

$(document).ready(function(){ //onload$("#test div").hide(); //hide all test div + images$("#container div").bind("click",function() // onclick of div/img element    {    $("#test div").hide(); // hide any div/img already open  //retrieve index ref of div/img clicked and fadein the image at the same index position within #test    $("#test div").eq($(this).index()).fadeIn('slow', function    ()    {                    // animation complete                });    });});

<div id="container"><div><img src="mgview1_thumb.jpg" width="106" height="64" /></div><div><img src="mgview2_thumb.jpg" width="106" height="64" /></div><div><img src="imgview3_thumb.jpg" width="106" height="64" /></div></div><div id="test"><div><img src="imgview1.jpg" /></div><div><img src="imgview2.jpg" /></div><div><img src="imgview3.jpg" /></div></div>

[mxbrainwrong]

Hi,Thanks so much for that. Sadly, I don't seem to be able to get it to work. The thumbs display but no joy when clicked. I've played around with removing the 'hide' command(s) and the full images display as before so I know that the function is being picked up on the page. I think that the problem may lie in the fact that both the thumbs and images are stored in an array which is taken from the database and so the html has to be dynamically generated using the display function (see below). I've applied your function to the output on this basis with the exception that the html is dynamically generated in two 'empty' divs 'container' and 'test' which are held in the body of the page. Is there some kind of obvious answer for this or are we now moving into the realms of the hyper complicated. Thanks for your help so far, any additional advice would be most welcome. ThanksStef

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]+' width=398>'		);	});} $(document).ready(function(){ //onload$("#test").hide(); //hide all test div + images$("#container").bind("click",function() // onclick of div/img element	{	$("#test").hide(); // hide any div/img already open //retrieve index ref of div/img clicked and fadein the image at the same index position within #test	$("#test").eq($(this).index()).fadeIn('slow', function	()	{					// animation complete				});	});});

Html:

<div id="container"></div><div id="test"></div>

[dsonesuk]

IF the array is dynamically produced by database to produce a array similar to below

var imgarray = [ ["id_0", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview1_thumb.jpg", "../ovtesting/tabmenu/imgview1.jpg", "200", "400"],["id_1", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview2_thumb.jpg", "../ovtesting/tabmenu/imgview2.jpg", "500", "400"],["id_2", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview3_thumb.jpg", "../ovtesting/tabmenu/imgview3.jpg", "800", "400"] ];

you should be able to run the display function when document ready is initiated after page fully loaded, and when this is applied the onclick function will be applied after div/images are fully created

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/var imgarray = [["id_0", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview1_thumb.jpg", "../ovtesting/tabmenu/imgview1.jpg", "200", "400"],["id_1", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview2_thumb.jpg", "../ovtesting/tabmenu/imgview2.jpg", "500", "400"],["id_2", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview3_thumb.jpg", "../ovtesting/tabmenu/imgview3.jpg", "800", "400"]];var i=0;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="'+array[i][6]+'" width="85" height="85"></div>'); $('#test').append('<div id="'+array[i][0]+'" style="width: 398px;"><img src="'+array[i][7]+'" width="398">');	 i++;    }); }$(document).ready(function(){display (imgarray)$("#test div").hide();$("#container div").bind("click",function(){$("#test div").hide();$("#test div").eq($(this).index()).fadeIn('slow', function () {	 // animation complete	});}); }); /*--*//*]]>*/</script> <style type="text/css"></style></head><body><div id="container"></div><div id="test"></div> </body></html>

In fact you could lose the function completely and run it all within document is ready

var imgarray = [["id_0", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview1_thumb.jpg", "../ovtesting/tabmenu/imgview1.jpg", "200", "400"],["id_1", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview2_thumb.jpg", "../ovtesting/tabmenu/imgview2.jpg", "500", "400"],["id_2", "111111111", "2222222", "3333333333", "444444444", "555555555555", "../ovtesting/tabmenu/imgview3_thumb.jpg", "../ovtesting/tabmenu/imgview3.jpg", "800", "400"]]; $(document).ready(function(){var i=0;var array = imgarray;		$.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="'+array[i][6]+'" width="85" height="85"></div>'); $('#test').append('<div id="'+array[i][0]+'" style="width: 398px;"><img src="'+array[i][7]+'" width="398">');	   i++;   });$("#test div").hide();$("#container div").bind("click",function(){$("#test div").hide();$("#test div").eq($(this).index()).fadeIn('slow', function () {	 // animation complete	});}); });