I am working on a gallery for my website. This gallery has images (thumbnails) that you hover over and down below it shows a bigger picture and on the right side it shows information about the picture, or rather, it should. When I hover over the thumbnail it shows a picture but I can't seem to get it to show the information. The information is based on the thumbnail's title attribute which references the array of data called 'galData.' Here is the code:
HTML (if you need it):Code:// Wait for the document to be ready $(document).ready(function() { // Add the event to each img tag $("#gallery img").mouseover(function() { // Change the larger example to this src $("#galImg").attr("src",$(this).attr("src")) // Write the data for the specified image to the left $("#galDesc").html(galData[$(this).attr("title")].join("<br />")) }) }) var galData = new Array() galData[0] = new Array() galData[0][0] = 'Arr 1 Child 1' galData[0][1] = 'Arr 1 Child 2' galData[0][2] = 'Arr 1 Child 3' galData[1] = new Array() galData[1][0] = 'Arr 2 Child 1' galData[1][1] = 'Arr 2 Child 2' //Etc.
I am not sure what I am doing wrong.HTML Code:<!-- Thumbnails --> <div id="gallery"> <img src='i1.jpg' height="110" title="1" width="110" /> <img src='i2.jpg' height="110" title="2" width="110" /> <img src='i3.jpg' height="110" title="3" width="110" /> <img src='i4.jpg' height="110" title="4" width="110" /> </div> <!-- Larger example image --> <div style="width:35%;float:left;"> <img src="blank.jpg" id="galImg" width="200" height="200" /> </div> <!-- Description area --> <div style="width:65%;float:right;" id="galDesc"></div>
Edit 1: Ok, it's fixed partially. Now it only returns only the last array value.
Edit 2: Fixed. Here is the solution:
Code:// Wait for the document to be ready $(document).ready(function() { // Add the event to each img tag $("#gallery img").mouseover(function() { // Change the larger example to this src $("#galImg").attr("src",$(this).attr("src")); // Write the data for the specified image to the left var whichArr = galData[($(this).attr("title")-1)] $("#galDesc").html(whichArr.join("<br />")); }) })


LinkBack URL
About LinkBacks


