Finding out which image that have been clicked on using javascript/ jQuery

Question

I'm making a kind of gallery and the purpose should be, that if you click on an image a larger one with display on the screen. With the image it should be a title and a text. My issue is, how can I found out which one that have been clicked on, so that the right image and the right text and title displays?

By using this.src I was able to found out the image source, but couldn't find a way to go from there. Don't know if thats being on the right track or not...

Anyway. here's my code so far:

$(document).ready(function() {

 var gallery = [
            {
                "img" : "img/gallery/gameboy2.png",
                "title" : "GameBoy Color",
                "about" : "A-ball",
                "price" : 99,
                "category" : ["gameboy", "color", "console", "game"]

            },
            {
                "img" : "img/gallery/phone.png",
                "title" : "Hamburger Phone",
                "about" : "What is a smartphone?",
                "price" : 129,
                "category" : ["phone","hamburger"]
            },
            {
                "img" : "img/gallery/gameboy.png",
                "title" : "Nintendo GameBoy",
                "about" : "Things doesnt get better with time. This is the shit.",
                "price" : 499,
                "category" : ["game","console", "gameboy"]
            },
            {
                "img" : "img/gallery/game2.png",
                "title" : "SEGA",
                "about" : "Things doesnt get better with time. This is the shit.",
                "price" : 699,
                "category" : ["game","console", "sega"]
            },
                        {
                "img" : "img/gallery/gameboy2.png",
                "title" : "GameBoy Color",
                "about" : "A-ball",
                "price" : 99,
                "category" : ["gameboy", "color", "console", "game"]

            },
            {
                "img" : "img/gallery/phone.png",
                "title" : "Hamburger Phone",
                "about" : "What is a smartphone?",
                "price" : 129,
                "category" : ["phone","hamburger"]
            },
            {
                "img" : "img/gallery/gameboy.png",
                "title" : "Nintendo GameBoy",
                "about" : "Things doesnt get better with time. This is the shit.",
                "price" : 499,
                "category" : ["game","console", "gameboy"]
            },
            {
                "img" : "img/gallery/game2.png",
                "title" : "SEGA",
                "about" : "Things doesnt get better with time. This is the shit.",
                "price" : 699,
                "category" : ["game","console", "sega"]
            }

];

var submit_search = document.getElementById("submit_search");
submit_search.addEventListener("click", searchItem);

showItemsList(gallery);


/*
    Create a li element and append to already existing ul
    Show an image of the product, and below the image show product title and price
*/

function showItemsList(gallery) {
    var ul = document.getElementById("product_list");
    ul.innerHTML = "";

    for(i =0; i < gallery.length; i++) {

        // get the current product
        var currentProduct = gallery[i];

        // create element li 
        var li = document.createElement('li');                           

        // create product img
        var productImg = document.createElement('img');
        productImg.src = currentProduct.img;
        productImg.className = "thumbnail";
        productImg.addEventListener("click", showItem);
        li.appendChild(productImg); 

        // create caption
        li.appendChild(document.createTextNode(currentProduct.title + " " + currentProduct.price + "kr"));                                         
        ul.appendChild(li);
    }

}

/*
    If someone click on a product, show a larger picture with a caption telling about the product
    If you click the picture again, it minimize back to a thumbnail

*/
function showItem() {

    // display the layer
    document.getElementById("overlay").style.display = "block";

    // add the name of  the product
    var h2 = document.getElementById("header_products");
    var single_item_page = document.getElementById("single_item");
    h2.appendChild(document.createTextNode("Hej"));


}

Answer 1

You can find index by using jQuery.

For example you can run this click function to send alert

$('ul li').click(function(){ alert($(this).index()); });

Answer 2

Try this,

$('ul li').click(function(){

    var src = $(this).find('img').attr('src');
    var keepGoing = true;

    $.each(gallery, function(index, obj){

        if (!keepGoing)
               return true;

        if (obj.img == src){

            alert(obj.title);
            keepGoing = false;
        }
    })
});

Here's a fiddle:

http://jsfiddle.net/v4n4LdxL/1/

To avoid iterating through all of your images when one is clicked, you can sue the image src as the keys in the gallery variable.

Example:

$(function(){

    var gallery = {
         "img/gallery/gameboy2.png" : {
                "title" : "GameBoy Color",
                "about" : "A-ball",
                "price" : 99,
                "category" : ["gameboy", "color", "console", "game"]

            },
          "img/gallery/phone.png": {
                "title" : "Hamburger Phone",
                "about" : "What is a smartphone?",
                "price" : 129,
                "category" : ["phone","hamburger"]
            }
    };

    $('ul li').click(function(){

        var src = $(this).find('img').attr('src');
        var img = gallery[src];

        alert(img.title);

    });

});

Here's the fiddle for that approach:

http://jsfiddle.net/v4n4LdxL/2/

Edit: updated fiddle