Question

How can I create an array ( I think ) which contains aditional information about an image and display it on thumbnail click? Thanks a lot for the help!

for example

thumbnail : 'link/x-thumb.jpg'
mainimg : 'link/x.jpg'
description : 'this is an image'
category : 'Abstract' 

on x-thumb click, I want to display the information in a certain div. Also, how can I add a second detail area? Can someone help me or link me to a tutorial? Thank you very much!

Answer 1

The data has to come from somewhere. It can be stored in a javascript object, e.g. if your images have an id then you could use that as a key:

var imageData = {
  imageId0: {
    thumbnail : 'link/x-thumb.jpg',
    mainimg : 'link/x.jpg',
    description : 'this is an image',
    category : 'Abstract',

  imageId1: {
    thumbnail : 'link/y-thumb.jpg',
    mainimg : 'link/y.jpg',
    description : 'this is another image',
    category : 'Abstract',

  ...

  };

Then use a listener to format and display it. However, you are likely far better off to code it into an HTML element at the server, then use the listener to display it. Then you can key the id of the display element to the id of the image (e.g. ‘image0-data’), your listener can be as simple as:

function showData(el) {
  showElement(el.id + '-data');
}

or similar, where the showElement function takes an ID and displays the element (there are many ways – transitions, modify class, modify display or visibility properties, etc.). Remember that the data must be sent regardless, so so you save nothing by sending it as script rather than HTML. You might save a bit on markup, but the server is much more efficient at generating that and it will be parsed by the client much faster if it’s part of the original document.

Lastly, if you do it right, it gives you a great fallback. Non-scripted browsers can just display the data anyway, scriptable browsers can hide it then reveal on click.