cflove/gist:9437752

## gistfile1.txt
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            centerMe = function () {
                var pageW = $(window).width()
                var pageH = $(window).height()

                var imageW = $('#big').width()
                var imageH = $('#big').height()

                var left = (pageW - imageW) / 2
                var top = (pageH - imageH) / 2
                $('#big').css({ 'top': top, 'left': left })
            }()
            $(window).resize(centerMe)

            $('ul li img').click(function () {
                $('ul li').css('border-color', '').removeAttr('data-selected')
                $(this).parent().css('border-color','red').attr('data-selected','yes')
                var i = $(this).attr('data-bigimage')
                $('#big')
                    .fadeIn('slow')
                    .children('img')
                    .attr('src', 'images/' + i)
                $('#skin').fadeTo('slow','0.5')
            })

            $('#big').click(function () {
                if ($('li[data-selected]').next().children('img').length == 0) {
                    $('li:first-child img').click()
                } else {
                    $('li[data-selected]').next().children('img').click()
                }

                $('img[data-selected]').click()
            })

            $('#skin').click(function () {
                $('#big').fadeOut('fast')
                $('#skin').fadeOut('slow')
                $('ul li').css('border-color', '').removeAttr('data-selected')
            })

            $(document).keyup(function (e) {
                if (e.keyCode == 27) {
                    $('#skin').click()
                }
            })
        })
    </script>
    <title>My Images</title>
</head>
<style type="text/css">
    ul li {
        list-style: none; float:left;
        width: 100px;
        height: 100px;
        border: 1px solid black; text-align:center; margin:5px; padding:5px
    }
    ul li img {
        max-width: 100px; max-height:100px
    }
    #big img {
        max-width: 400px;
        max-height: 400px;
    }
    #big {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 100; display:none; border:1px solid black
    }
    #skin {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background:black;
        z-index:1; display:none
    }
    }
</style>
<body>
    <div id="skin"></div>
    <ul>
        <li><img data-bigimage="1_big.jpg" src="images/1.jpg" /></li>
        <li><img data-bigimage="2_big.jpg" src="images/2.jpg" /></li>
        <li><img data-bigimage="3_big.jpg" src="images/3.jpg" /></li>
        <li><img data-bigimage="4_big.jpg" src="images/4.jpg" /></li>
        <li><img data-bigimage="5_big.jpg" src="images/5.jpg" /></li>
        <li><img data-bigimage="6_big.jpg" src="images/6.jpg" /></li>
        <li><img data-bigimage="7_big.jpg" src="images/7.jpg" /></li>
        <li><img data-bigimage="8_big.jpg" src="images/8.jpg" /></li>
    </ul>

    <div id="big"><img src="images/1_big.jpg" /></div>
</body>
</html>
	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function () {

	centerMe = function () {
	var pageW = $(window).width()
	var pageH = $(window).height()

	var imageW = $('#big').width()
	var imageH = $('#big').height()

	var left = (pageW - imageW) / 2
	var top = (pageH - imageH) / 2
	$('#big').css({ 'top': top, 'left': left })
	}()
	$(window).resize(centerMe)

	$('ul li img').click(function () {
	$('ul li').css('border-color', '').removeAttr('data-selected')
	$(this).parent().css('border-color','red').attr('data-selected','yes')
	var i = $(this).attr('data-bigimage')
	$('#big')
	.fadeIn('slow')
	.children('img')
	.attr('src', 'images/' + i)
	$('#skin').fadeTo('slow','0.5')
	})

	$('#big').click(function () {
	if ($('li[data-selected]').next().children('img').length == 0) {
	$('li:first-child img').click()
	} else {
	$('li[data-selected]').next().children('img').click()
	}

	$('img[data-selected]').click()
	})

	$('#skin').click(function () {
	$('#big').fadeOut('fast')
	$('#skin').fadeOut('slow')
	$('ul li').css('border-color', '').removeAttr('data-selected')
	})

	$(document).keyup(function (e) {
	if (e.keyCode == 27) {
	$('#skin').click()
	}
	})
	})
	</script>
	<title>My Images</title>
	</head>
	<style type="text/css">
	ul li {
	list-style: none; float:left;
	width: 100px;
	height: 100px;
	border: 1px solid black; text-align:center; margin:5px; padding:5px
	}
	ul li img {
	max-width: 100px; max-height:100px
	}
	#big img {
	max-width: 400px;
	max-height: 400px;
	}
	#big {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 100; display:none; border:1px solid black
	}
	#skin {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background:black;
	z-index:1; display:none
	}
	}
	</style>
	<body>
	<div id="skin"></div>
	<ul>
	<li><img data-bigimage="1_big.jpg" src="images/1.jpg" /></li>
	<li><img data-bigimage="2_big.jpg" src="images/2.jpg" /></li>
	<li><img data-bigimage="3_big.jpg" src="images/3.jpg" /></li>
	<li><img data-bigimage="4_big.jpg" src="images/4.jpg" /></li>
	<li><img data-bigimage="5_big.jpg" src="images/5.jpg" /></li>
	<li><img data-bigimage="6_big.jpg" src="images/6.jpg" /></li>
	<li><img data-bigimage="7_big.jpg" src="images/7.jpg" /></li>
	<li><img data-bigimage="8_big.jpg" src="images/8.jpg" /></li>
	</ul>

	<div id="big"><img src="images/1_big.jpg" /></div>
	</body>
	</html>