I need to create an array of links for a simple image gallery

Question

I have made a web site of a portfolio of paintings.

When the thumbnails get clicked and display a medium sized photo of the same image.

I have done this in the form of an array, that was pretty simple.

I have also added information for each image like the title and sizes, again as an array.

I would like to add a link to each image that will open a new window which will allow the user to view an even large image with more detail, if they wish to do so. something like lightbox where the screen greys out.

I cannot seem to pass a link to the array, I am sure this is a simple error. Can someone give us a bit of advice.

Answer 1

Use Javascript Object Notation. JSON. (Or just JS Objects)

Instead of an array of strings, use an array of objects

this is the verbose way:

var myPaintings = new Array();

var painting = new Object();
painting.medium = "images/blah.jpg";
painting.link = "dosomething.html";
painting.caption = "this is a painting";

myPaintings.push( painting );

You could then go one step further and use json as your data storage and retrieval . For this lookup JSON.stringify() and JSON.encode() or jquery $.JSON.parseJSON() etc.

var myPaintings = {

     [
         { 
             "medium":"images/blah.jpg",
             "link": "dosomething.html",
             "caption":"this is a painting"

         },
         { 
             "medium":"images/hello.jpg",
             "link": "dosomethingelse.html",
             "caption":"this is a painting also"
         }
     ]
}

In the previous case, I guess you could leave out the first object brackets {} and just have myPaintings = [...]. JSON is a subset of object literal notation, JSON requires quotations for key names. Generally, this notation can be said to be key/value pairs.