Closed Thread
Results 1 to 1 of 1

Thread: jQuery gallery - array of info not showing

  1. #1
    as4s1n's Avatar
    as4s1n is offline x10 Sophmore as4s1n is an unknown quantity at this point
    Join Date
    Apr 2009
    Location
    Washington State
    Posts
    174

    jQuery gallery - array of info not showing

    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 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>
    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 by as4s1n; 05-04-2010 at 01:54 PM.
    There is no such thing as a "stupid question," there are only "stupid people" who don't ask them.

Closed Thread

Similar Threads

  1. Replies: 4
    Last Post: 04-23-2010, 02:38 AM
  2. JS jQuery datepicker Help Needed
    By diabolo in forum Programming Help
    Replies: 5
    Last Post: 09-23-2009, 09:15 PM
  3. Recursive PHP array to Javascript array/object
    By Veridis in forum Programming Help
    Replies: 0
    Last Post: 04-16-2008, 02:55 AM
  4. ads not showing up in gallery
    By lgmn91 in forum Scripts & 3rd Party Apps
    Replies: 2
    Last Post: 06-19-2007, 11:52 AM
  5. ads not showing up in gallery
    By lgmn91 in forum Free Hosting
    Replies: 1
    Last Post: 06-19-2007, 11:45 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
x10hosting free hosting for the masses
dedicated servers