Javascript gallery with prev/next function AND thumbnail... nothing else

Short of going for something like Galleriffic

and modifying, hiding and removing elements, what would be a way to add a function by which thumbnails can also be clicked to display the image?

Much obliged to anyone who can point me in the right direction. I'm using the following by Paul McFedries at mcfedries.com.

<script type="text/javascript">
<!--
// Use the following variable to specify 
// the number of images
var NumberOfImages = 3

var img = new Array(NumberOfImages)

// Use the following variables to specify the image names:
img[0] = "yellow1.jpg"
img[1] = "blue2.jpg"
img[2] = "green3.jpg"


var imgNumber = 0

function NextImage()
{
    imgNumber++
    if (imgNumber == NumberOfImages)
        imgNumber = 0
    document.images["VCRImage"].src = img[imgNumber]
}

function PreviousImage()
{
    imgNumber--
    if (imgNumber < 0)
        imgNumber = NumberOfImages - 1
    document.images["VCRImage"].src = img[imgNumber]
}

</script>

in the html:

    <div class="galleryarrows">
<A HREF="javascript:PreviousImage()">
<IMG SRC="previous.png" BORDER=0></A>
<A HREF="javascript:NextImage()">
<IMG SRC开发者_C百科="next.png" BORDER=0></A>
</div>

A quick, basic solution: Save the full size versions of your images in a folder called say, 'full_images', with the same names as the thumbnails.

Add an onClick event into the element img elements that display your thumbnails in the html, so they look something like this.

<img src = "yellow1.jpg" name = "thumb[0]" style = "cursor:pointer" onClick = "Javascript:DisplayImage(0);" alt = "yellow"/>
<img src = "blue2.jpg" name = "thumb[1]" style = "cursor:pointer" onClick = "Javascript:DisplayImage(1);"  alt = "blue"/>
<img src = "green3.jpg" name = "thumb[2]" style = "cursor:pointer" onClick = "Javascript:DisplayImage(2);"  alt = "green"/>

In your javascript, add this function

function DisplayImage(id){
       imgNumber = id;
       document.images["VCRImage"].src = "full_images/" + img[id];

}

This will display in an element with the name 'VCRImage'.

Not my favourite solution this, but quick, and should work. If Javascript is new to you, then you might as well check out jQuery. It's a lot easier to use, and is way more cross-browser compatible.