Question

I’m creating something like a gallery when clicking on a thumbnail should load the corresponding big image.

The way I try to do this is the following.

There’s an image tag as follows:

<img src="gallery/[image name]" id="bigitem" />

The thumbnail is as follows:

<img src='gallery/thumbs/[image name]' alt='' at='[image name]' onclick='changePicture()' />

The thumbnail image name and the big image name is the same and the custom “at” attribute contains the same image name. The changePicture() function is as follows:

function changePicture() {
        var at = $(this).attr('at');     // getting the value of the "at" attribute of the thumbnail
        var newpath = 'gallery/'+at;
        $("#bigitem").attr('src', newpath);   // changing the "src" attribute of the big image.
        }

However this function does not work. Seems that I can’t get the custom attribute value of “this”.

Could anybody help me to figure out why this happens?

Thanks.

Answer 1

That’s because this isn’t what you think it is; in that context this is the window object. You need to pass this to the onclick function:

<img src="gallery/thumbs/[image name]" alt="" 
    at="[image name]" onclick="changePicture(this);" />

function changePicture(image) {
    var at = $(image).attr('at');
    var newpath = 'gallery/' + at;
    $("#bigitem").attr('src', newpath);
}