галерея

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Adaptive</title>
    </head>
    <body>
        <h1>Галерея <span>Image 1</span></h1>
        <p><img id="largeImg" src="img1-lg.jpg" alt="Large image"/></p>
        <p class="thumbs" style=float-bottom:  >
        <a href="img1-lg. jpg" title="Image 1"><img src="img1-thumb.jpg" /></a>
        <a href="img2-lg.jpg" title="Image 2"><img src="img2-thumb.jpg" /></a>
        <a href="img3-lg.jpg" title="Image 3"><img src="img3-thumb.jpg" /></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>
    $('#largeImg').click(function() {
        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' : '100px',
            'top' : '100px'
        });

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

    });


</script>