Hi All,

I've put together a image slider that opens up on the selected image and allows you to scroll through the rest of the images.


This works fine on the first opening of the images, but if you close the window and re open then try to scroll the boxes do not scroll, they just appear below each other.

Html
Code:
<img class="gallery" name="kart1" id="kart1" border="1" style="background-color: #000;" width="110" height="90">
<img class="gallery" name="kart2" id="kart2" border="1" style="background-color: #B40;" width="110" height="90">
<img class="gallery" name="kart3" id="kart3" border="1" style="background-color: #F60;" width="110" height="90">
<br />
<img class="gallery" name="kart4" id="kart4" border="1" style="background-color: #006;" width="110" height="90">
<img class="gallery" name="kart5" id="kart5" border="1" style="background-color: #00F;" width="110" height="90">
<img class="gallery" name="kart6" id="kart6" border="1" style="background-color: #CC0;" width="110" height="90">
<br />
<span class="font4">Paintball</span>

<br />
<br />
<img class="gallery" name="paintball1" id="paintball1" border="1" style="background-color: #CCF;" width="110" height="90">
<img class="gallery" name="paintball2" id="paintball2" border="1" style="background-color: #CC00FF;" width="110" height="90">
<img class="gallery" name="paintball3" id="paintball3" border="1" style="background-color: #660;" width="110" height="90">
<br />
<img class="gallery" name="paintball4" id="paintball-4" border="1" style="background-color: #000033;" width="110" height="90">
<img class="gallery" name="paintball5" id="paintball5" border="1" style="background-color: #9999FF;" width="110" height="90">
<img class="gallery" name="paintball6" id="paintball6" border="1" style="background-color: #00FFFF;" width="110" height="90">
<div align="center" id="slider-wrapper" name="slider-wrapper">
    <div align="center" id="image-wrap">
        <div align="center" id="slider">
            <div name="paintball1-big" align="center" id="paintball1-big" class="sp2">
                <img class="images" style="background-color: #CCF;" />
            </div>
            <div name="paintball2-big" id="paintball2-big" class="sp2">
                <img class="images" style="background-color: #CC00FF;" />
            </div>
            <div name="paintball3-big" id="paintball3-big" class="sp2">
                <img class="images" style="background-color: #660;" />
            </div>
            <div name="paintball4-big" id="paintball4-big" class="sp2">
                <img class="images" style="background-color: #000033;" />
            </div>
            <div name="paintball5-big" id="paintball5-big" class="sp2">
                <img class="images" style="background-color: # 9999FF;" />
            </div>
            <div name="paintball6-big" id="paintball6-big" class="sp2">
                <img 00FFFF />
            </div>
            <div align="center" id="slider">
                <div name="kart1-big" align="center" id="kart1-big" class="sp">
                    <img class="images" style="background-color: #000;" />
                </div>
                <div name="kart2-big" id="kart2-big" class="sp">
                    <img class="images" style="background-color: #B40;" />
                </div>
                <div name="kart3-big" id="kart3-big" class="sp">
                    <img class="images" style="background-color: #F60;" />
                </div>
                <div name="kart4-big" id="kart4-big" class="sp">
                    <img class="images" style="background-color: #006;" />
                </div>
                <div name="kart5-big" id="kart5-big" class="sp">
                    <img class="images" style="background-color: #00F;" />
                </div>
                <div name="kart6-big" id="kart6-big" class="sp">
                    <img class="images" style="background-color: #CC0;" />
                </div>
            </div>
        </div>
        <br />
        <div class="close" name="close" id="close"><a>Close</a>

        </div>
        <div id="nav-paintball" class="nav">
            <div id="button-previous-paintball">Prev</div>
            <div id="button-next-paintball">Next</div>
            <div style="clear:both"></div>
        </div>
        <div id="nav-karting" class="nav">
            <div id="button-previous">Prev</div>
            <div id="button-next">Next</div>
            <div style="clear:both"></div>
        </div>
    </div>
</div>
Javascript
Code:
$(document).ready(function () {
    $('#slider-wrapper').hide();
    $('.sp').hide();
    $('.sp2').hide();
    $('#close').click(function () {
        $('#slider-wrapper').fadeOut();
    });

    $('#kart1').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#kart1-big').addClass('active');
        $('.sp').hide();
        $('.nav').hide();
        $('#nav-karting').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#kart2').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#kart2-big').addClass('active');
        $('.sp').hide();
        $('.nav').hide();
        $('#nav-karting').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#kart3').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#kart3-big').addClass('active');
        $('.sp').hide();
        $('.nav').hide();
        $('#nav-karting').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#kart4').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#kart4-big').addClass('active');
        $('.sp').hide();
        $('.nav').hide();
        $('#nav-karting').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#kart5').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#kart5-big').addClass('active');
        $('.sp').hide();
        $('.nav').hide();
        $('#nav-karting').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#kart6').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#kart6-big').addClass('active');
        $('.sp').hide();
        $('.nav').hide();
        $('#nav-karting').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });

    $('#paintball1').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#paintball1-big').addClass('active');
        $('.nav').hide();
        $('#nav-paintball').show();
        $('.oldActive').hide();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#paintball2').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#paintball2-big').addClass('active');
        $('.nav').hide();
        $('#nav-paintball').show();
        $('.oldActive').hide();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#paintball3').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#paintball3-big').addClass('active');
        $('.oldActive').hide();
        $('.nav').hide();
        $('#nav-paintball').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#paintball4').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#paintball4-big').addClass('active');
        $('.oldActive').hide();
        $('.nav').hide();
        $('#nav-paintball').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#paintball5').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#paintball5-big').addClass('active');
        $('.oldActive').hide();
        $('.nav').hide();
        $('#nav-paintball').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });
    $('#paintball6').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        $('#paintball6-big').addClass('active');
        $('.oldActive').hide();
        $('.nav').hide();
        $('#nav-paintball').show();
        $('.active').show();
        $('#slider-wrapper').fadeIn();
    });


    $('#button-next').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldActive').is(':last-child')) {
            $('.sp').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.sp').hide();
        $('.sp2').hide();
        $('.oldActive').hide();
        $('.active').fadeIn();



    });

    $('#button-previous').click(function () {
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldActive').is(':first-child')) {
            $('.sp').last().addClass('active');
        } else {
            $('.oldActive').prev().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.sp').hide();
        $('.sp2').hide();
        $('.oldActive').hide();
        $('.active').fadeIn();
    });


    $('#button-next-paintball').click(function () {

        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldActive').is(':last-child')) {
            $('.sp2').first().addClass('active');
        } else {
            $('.oldActive').next().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.sp2').hide();
        $('.active').fadeIn();



    });

    $('#button-previous-paintball').click(function () {
        $('.active').removeClass('active').addClass('oldActive');
        if ($('.oldActive').is(':first-child')) {
            $('.sp2').last().addClass('active');
        } else {
            $('.oldActive').prev().addClass('active');
        }
        $('.oldActive').removeClass('oldActive');
        $('.sp2').hide();
        $('.active').fadeIn();
    });



});
Css
Code:
#slider-wrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 50;
    padding: auto;
}
#image-wrap {
    width: 450px;
    height: 330px;
    background-color: #fff;
    border-radius:10px;
    border:1px solid #000;
    margin: 100px auto;
    padding: 15px;
}
#slider {
    overflow: hidden;
    position:relative;
}
.gallery {
    cursor:pointer;
}
.sp {
}
.nav {
    z-index:100;
    cursor:pointer;
}
#close {
    cursor:pointer;
    width:470px;
    text-align:center;
}
#button-previous {
    float:left;
    background-color: #00F;
    color: #FFF;
    padding: 10px;
    border-bottom-right-radius:10px;
    border-top-right-radius:10px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    position:relative;
    z-index:300;
    margin-top: -100px;
}
#button-next {
    z-index:300;
    float:right;
    background-color: #00F;
    color: #FFF;
    padding: 10px;
    border-bottom-left-radius:10px;
    border-top-left-radius:10px;
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    margin-top: -100px;
    position:relative;
}
#button-previous-paintball {
    float:left;
    background-color: #00F;
    color: #FFF;
    padding: 10px;
    border-bottom-right-radius:10px;
    border-top-right-radius:10px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    position:relative;
    z-index:300;
    margin-top: -100px;
}
#button-next-paintball {
    z-index:300;
    float:right;
    background-color: #00F;
    color: #FFF;
    padding: 10px;
    border-bottom-left-radius:10px;
    border-top-left-radius:10px;
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    margin-top: -100px;
    position:relative;
}
.images {
    height: 300px;
    width: 450px;
}
above can be found at http://jsfiddle.net/5gP4Y/5/


Any help greatly appreciated.