jQuery Image Gallery (Example 2)

image_gallery_2.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] + '" />' );
            }
        }

        // dynamically sent the width of the div holding the images
        $('#image_container').css( 'width', 500 * images.length );

        // 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 ) ) {
                // animate the gallery by moving the margin left, animation takes 1 second
                $('#image_container').animate({
                    marginLeft: '-=500'
                }, 1000, function() {
                    // Animation complete.
                });
                selected_image++;
            }
        });

        // previous button function
        $('button#img_prev').live( 'click', function() {
            // load the correct image from the array
            if ( selected_image > 0 ) {
                // animate the gallery by moving the margin right, animation takes 1 second
                $('#image_container').animate({
                    marginLeft: '+=500'
                }, 1000, function() {
                    // Animation complete.
                });
                selected_image--;
            }
        });

    });

</script>

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

<!-- image div -->
<div style="overflow: hidden; width: 500px; height: 275px;">
    <div id="image_container"></div>
</div>