jQuery Image Gallery (Example 1)

image_gallery_1.html

<!--
    Code by: Niraj Shah - www.webniraj.com
-->

<script type="text/javascript">

    // images to use (array)
    var images = [
        'https://www.webniraj.com/wp-content/uploads/2011/12/LF-Android-500.jpg',
        'https://www.webniraj.com/wp-content/uploads/2010/12/Guinness-Lewis-Moody-500.jpg',
        'https://www.webniraj.com/wp-content/uploads/2010/08/Lynx-500.jpg',
        'https://www.webniraj.com/wp-content/uploads/2010/05/Nissan-Ski-500.jpg',
        'https://www.webniraj.com/wp-content/uploads/2011/05/CYFR-500.jpg'
    ];

    $(document).ready(function(){

        // load all the images
        for ( img in images ) {
            // show the first image, hide the rest
            if ( img == 0 ) {
                $('#image_container').append( '<img id="img_'+ img +'" src="' + images[img] + '" />' );
            } else {
                $('#image_container').append( '<img id="img_'+ img +'" src="' + images[img] + '" style="display: none;" />' );
            }
        }

        // default loaded image
        var selected_image = 0;

        // next button function
        $('button#img_next').live( 'click', function() {
            // make sure we are not on the last available image
            if ( selected_image < ( images.length - 1 ) ) {
                // hide the current image
                $('#img_'+selected_image).slideUp();
                // show the next image
                $('#img_'+(selected_image+1)).slideDown();
                // update the selected image (+1)
                selected_image++;
            }
        });

        // previous button function
        $('button#img_prev').live( 'click', function() {
            // load the correct image from the array
            if ( selected_image > 0 ) {
                // hide the current image
                $('#img_'+selected_image).slideUp();
                // show the previous image
                $('#img_'+(selected_image-1)).slideDown();
                // update the selected image (-1)
                selected_image--;
            }
        });

    });

</script>

<!-- button -->
<button id="img_prev">Previous Image</button>
<button id="img_next">Next Image</button>

<!-- image div -->
<div id="image_container"></div>