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