Thumbnail gallery that loads image description and full size on same page on click

Question

I want to create something like this .

Where do I get started with the javascript? Also, is it possible to customize something like this with the Nextgen Gallery plugin or another Wordpress plugin?

Answer 1

You will need two things:

1. A data Object that maps the thumbnail src value (or any other identifer) to the required URL and description Strings.
2. Some Event handler for the thumbnails that get the respective entries in the data Object and set the highlight img Node 's src attribute as well as the description text.

---

So, let's say this is your data Object :

var data = {
    <src>: {
        "url": <url for the large image> ,
        "text": <description for the large image>
    } ,
    <another src>:  {
        //..
    }
} 

---

Now, you just have to get the src of the thumbnail img Node that raised the Event and get its respective entry in the data Object ,

var img = /* the reference to the img Node that raised the event */ ;
var src = img.getAttribute("src") ;

var entry = data[src] ;
var url = entry.url , text = url.text ;

; then you simply have to change the src attribute of the large img Node and the text content of the Node containing the description. You could also do the same thing using the id attribute.

HTH