ImageGallery

<table width="100%">
    <tr>
        <td style="text-align: left"><a href="#" id="prev"></a></td>
        <td colspan="2"><img class="mainImage" src="Gallery/Images/BB9900pg3.png" alt="" height="500px" /></td>
        <td style="text-align: right"><a href="#" id="next"></a></td>
    </tr>
</table>

<table id="thumbs">
    <tr id="row1" style="display: block;">
        <td><a href="#" class="thumb"><img class="thumbimg" src="Gallery/Images/BB9900pg3.png" height="90px" alt="" /></a></td>
    </tr>
</table>

$(document).ready(function () {

    // #########################
    // ####### GALLERY #########
    // #########################

    var mainImage = $('.mainImage');

    $('.thumbimg').click(function () {
        var newSrc = $(this).attr('src');
        mainImage.attr('src', newSrc);
        $('#gallery').attr('width', mainImage.attr('width') + '15px');
    });

    var i = 1;
    $('#prev').click(function () {
        var row = document.getElementById('row' + i);
        if (row != null) {
            if (row.style.display == 'block') {
                row.style.display = 'none';
                document.getElementById('row' + (i - 1)).style.display = 'block';
            };
        }
        else {
            return;
        };
        i = i - 1;
    });

    $('#next').click(function () {
        // var row = $('#thumbs').children('#row' + i);
        var row = document.getElementById('row' + i);
        if (row != null) {
            if (row.style.display == 'block') {
                row.style.display = 'none';
                document.getElementById('row' + (i + 1)).style.display = 'block';
            };
        }
        else {
            return;
        };
        i = i + 1;
    });