jQuery Image Gallery

What im trying to do is to create a gallery that the user can go next and previous or use one of the thumbnails to navigate through. A demo of this can be seen here.

Javascript

Im using jQuery to perform fading functions and handle our events. The below code creates three functions next(), previous() and goto(int). I wasnt sure how to get the element that pressed an event so if you look at this question on Stackoverflow you will find out how i managed to do the $('button').click(...).

$(document).ready(function() {

    var image = 1;
    var maxImage = 3;

    //Functions
    function next(){

        //Change the image numbers
        if (image >= maxImage) { image = 1; }
        else { image++; }

        //Create the effect of a slide
        $('#images').fadeOut('fast', function() {

            $('#images').attr("src", "../images/products/triton/explore/" + image + ".jpg");    
            $('#images').fadeIn('fast');

        }); 

        //Change the src to not_selected, and then change the source to selected for the required image
        $('.buttons').attr("src", "../images/products/triton/explore/not_selected.png")
        $('#btn_' + image).attr("src", "../images/products/triton/explore/selected.png");
    }

    function previous(){

        //Change the image number
        if (image <= 1) { image = maxImage; }
        else { image--; }

        //Fade out the previous Image
        $('#images').fadeOut('fast', function() {

            //Load the next image
            $('#images').attr("src", "../images/products/triton/explore/" + image + ".jpg");
            $('#images').fadeIn('fast');                

        });

        $('.buttons').attr("src", "../images/products/triton/explore/not_selected.png");
        $('#btn_' + image).attr("src", "../images/products/triton/explore/selected.png");
    }

    function goto(x){

        if (x == 0) { x = 1; }
        else if (x > maxImage) { x = 1; }

        image = x;

        //Fade out the previous Image
        $('#images').fadeOut('fast', function() {

            //Load the next image
            $('#images').attr("src", "../images/products/triton/explore/" + x + ".jpg");
            $('#images').fadeIn('fast');

        });

        $('.buttons').attr("src", "../images/products/triton/explore/not_selected.png");
        $('#btn_' + image).attr("src", "../images/products/triton/explore/selected.png");
    }



    //Hide the image and tween the fade
    $('#images').hide();    
    $('#images').load(function() { $('#images').fadeIn(); });

    //Key Press, Next or Previous
    $(this).keyup(function(event)
    {
        if (event.keyCode == 39){ next(); }
        else if(event.keyCode == 37){ previous(); }
    });

    //Next and previous buttons
    $('#next').click(function () { next();});
    $('#previous').click(function () { previous();});

    $('.buttons').click(function () { 

        var buttonId = $(this).attr('id').split("_");   //Get the Id and split it using `_`
        buttonId = buttonId[1];                         //Just get the Number value
        goto(buttonId);                                 //Run the goto function
    });

});

The three main functions above are next(), previous() and goto(). Next and previous just move the index of the image and load the new one, where as go to goes to a specific image. I have named my images in number format however you could develop this further and add an array of images, that are index controlled.

The click event is pretty straight forward, we set our event on a class value, and retrieve the id of the class that clicked it. We then split/explode the id string using _ to give us the number value.

The HTML Counterpart

The html we need to look at below is the button div and the buttons image sources. They are defined in the JavaScript with the click event.

<div class='explore'> 

    <div class='pannel_top'> 
        <img src='../images/products/triton/explore/pannel_top.png'/> 
    </div> 

    <div class='image'> 
        <img src='../images/products/triton/explore/1.jpg' id='images'/> 
    </div> 

    <div class='pannel_back'> 

        <div id='previous'></div> 

        <div id='buttons' class='button'> 
            <img src='../images/products/triton/explore/selected.png' class='buttons' id='btn_1'/> 
            <img src='../images/products/triton/explore/not_selected.png' class='buttons' id='btn_2'/> 
            <img src='../images/products/triton/explore/not_selected.png' class='buttons' id='btn_3'/> 
        </div> 
        <div id='next'></div> 
    </div> 

</div> 

If you have any questions please post it on comments, il try getting back to you asap.