галерея

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fotogallery</title>
        <style>
            .big_picture {
                z-index: 3,
                position : absolute,
                left : 400px,
                top : 100px
            }
            h1 {
                text-align: center;
            }
            div #largeImg {
                display: block;
                width: 550px;
                margin: auto;
            }
            .thumbs {
                background-color: green;
                position: absolute;
                top: 480px;
                height: 150px;
                width: 99%;
            }
            .mini {
                height: 100px;
                width: 100px;
                position: relative;
                top: 25px;
            }
            #img1 {
                left: 50px;
            }
            #img2 {
                left: 150px;
            }
            #img3 {
                left: 250px;
            }
            #img4 {
                left: 350px;
            }
            #img5 {
                left: 450px;
            }
            #img6 {
                left: 550px;
            }
            /*.but {
                height: 50;
                width: 50;
                position: relative;
                top: 30%;
            }*/
            #right_button {
                position: relative;
                top: 50px;
                float: right;
            }
            .but {
                z-index: 4;
            }
        </style>

    </head>
    <body>
        <h1>Галерея <span>Image 1</span></h1>
        <div><img id="largeImg" src="img1-lg.jpg" alt="Large image"/></div>
        <p class="thumbs">
            <a id='left_button' class='but'><img src="left.png" /></a>
            <a href="img1-lg.jpg" title="Image 1" id='img1' class='mini'><img src="img1-thumb.jpg" /></a>
            <a href="img2-lg.jpg" title="Image 2" id='img2' class='mini'><img src="img2-thumb.jpg" /></a>
            <a href="img3-lg.jpg" title="Image 3" id='img3' class='mini'><img src="img3-thumb.jpg" /></a>
            <a href="img1-lg.jpg" title="Image 1" id='img4' class='mini'><img src="img1-thumb.jpg" /></a>
            <a href="img2-lg.jpg" title="Image 2" id='img5' class='mini'><img src="img2-thumb.jpg" /></a>
            <a href="img3-lg.jpg" title="Image 3" id='img6' class='mini'><img src="img3-thumb.jpg" /></a>
            <a id='right_button' class='but'><img src="right.png" /></a>
        </p>
    </body>
</html>
<script src="j.js"></script>
<script>
    $("a img").click(function() {
        $("#largeImg").attr("src", $(this).parents("a").attr("href"));
        $("h1 span").html($(this).parents("a").attr("title"));
        return false;
    });
</script>

<script>
    click_cont = 0
    $('#largeImg').click(function() {
        click_cont += 1;
        if (click_cont < 2)
        {
            var docHeight = $(document).height();
            $("<div id='overlay'></div>")
            .appendTo("body")
            .height(docHeight)
            .css({
                'opacity': 0.7,
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'background-color': 'black',
                'width': '100%',
                'z-index': 1
            });

            $("<button id='b'>закрыть</button>")
            .appendTo("body")
            .height(docHeight)
            .css({
                'position': 'absolute',
                'top': 0,
                'left': '1000px',
                'width': '100px',
                'height': '20px',
                'z-index': 2
            });

            $('#largeImg').css({
                'z-index': 3,
                'position' : 'absolute',
                'left' : '400px',
                'top' : '100px'
            });


            $("#b").click(function() {
                $("#overlay").remove();
                $(this).remove();
                $('#largeImg').css({
                    'position': 'static'
                })
                click_cont = 0;
            })
        }
    });

    var img_sourses = [ ["img1-lg.jpg", "Image 1", "img1-thumb.jpg"],
                        ["img2-lg.jpg", "Image 2", "img2-thumb.jpg"],
                        ["img3-lg.jpg", "Image 3", "img3-thumb.jpg"],
                        ["img1-lg.jpg", "Image 1", "img1-thumb.jpg"],
                        ["img2-lg.jpg", "Image 2", "img2-thumb.jpg"],
                        ["img3-lg.jpg", "Image 3", "img3-thumb.jpg"],
                        ["img1-lg.jpg", "Image 1", "img1-thumb.jpg"]];
    var cur_first = 0;

    $('#right_button').click(function() {
        alert("fesdkjferjdhrjg");
        cur_first = (cur_first + 6 - 1) % 6;
        for (var i = 0; i < 6; i++)
        {
            var str = '#img' + (i + 1).toString();
            var idx = (cur_first + i) % 6;
            var line = img_sourses[idx];
            $(str).attr('href', line[0]);
            $(str).attr('title', line[1]);
            $(str).attr('src', line[2]);
        }
    });
    $('#left_button').click(function() {
        cur_first = (cur_first + 1) % 6;
        for (var i = 0; i < 6; i++)
        {
            var str = '#img' + (i + 1).toString();
            var idx = (cur_first + i) % 6;
            var line = img_sourses[idx];
            $(str).attr('href', line[0]);
            $(str).attr('title', line[1]);
            $(str).attr('src', line[2]);
        }
    });


</script>