Question

When I click the href, I want to display the image and description from the target id. Can someone correct this code for me and show me how to do it right? Thank you very much!

HTML:

    <div id="gallery"><img/></div>
    <a href="#panorak">Click me</a>

jQuery code:

var datas={
            "images":[{ "src":"gallery/panorak.jpg",
                        "title":"PANORAK",
                        "date":"28/10/2010 Web Design",
                        "description":"desc",
                        "id":"panorak",
                        }, 
                        {
                        "src":"gallery/kamoa.jpg",
                        "title":"kamoa",
                        "date":"28/10/2010 Web Design",
                        "description":"desc",
                        "id":"kamoa",
                        }, 
                    ]};
$(document).ready(function(){
    var gallery=$("#gallery")

    //****I don't know how to display it right at this point

    var list=$("<ul/>");
    gallery.append(list);
    datas.images.each(function(i,j){
        list.prepend($("<li/>").$("<img/>").attr("src",datas.images[i].src).load(function(){ }));
    });
}); 

Any help is greatly appreciated! Thank you very much!

Answer 1

I have made some changes to your code:

http://jsfiddle.net/T5r6D/

Have a look at my jsfiddle link for all updates.
You had some structure in flow issues and javascript error.

I am adding all image in array using normal for loop. once loop is done, i wrap images with <li> and adding the list to the stage.

Keep in mind that images will not be shown coz it is not on the jsfiddle server. Try it on your side.

UPDATE

http://jsfiddle.net/T5r6D/1/

So the new update does not hide the full container.

The anchor #tag [href] will be matched with the images title tag. So once clicked on a button it will hide the image that matches.