jQuery gallery - array of info not showing

Status
Not open for further replies.

as4s1n

New Member
Messages
174
Reaction score
4
Points
0
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:
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.

HTML (if you need it):
HTML:
<!-- 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>

I am not sure what I am doing wrong.

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 />"));
    })
})
 
Last edited:
Status
Not open for further replies.
Top