Edit in JSFiddle

$(document).ready(function() {
    //オーバーレイ用のボックス生成
    $("body").prepend('<div class="overlay"></div>');
    var h = $(document).height();
    //画面の高さをオーバーレイの高さにする
    $(".overlay").css('height', h);
    
    //クリックイベント
    $("#sample li img").click(function() {
        var url = $(this).attr('src');
        var w = ($(document).width()/2)-200;
        var t = $(document).scrollTop()+100;
        //閉じるボタンを生成
        $(".overlay").empty().append('<img src="' + url + '" /><span id="cursol">close</span>').fadeIn('fast');
        $(".overlay img").css({left: w, top: t, opacity: '1'});
        //マウスにあわせてボタンも動くようにする
        $("body").mousemove(function(e) {
            var x = e.pageX + 10;
            var y = e.pageY - 30;
            $("#cursol").css({top: y, left: x});
        });
    });
    //オーバーレイを閉じる
    $(".overlay").click(function() {
        $(".overlay").fadeOut();
    });
});

.overlay {
  position: absolute;
  display: none;
  top: 0;
  width: 100%;
  z-index: 1;
  background: #000;

}
.overlay img {
  display: inline-block;
  position: absolute;
  width: 500px;

}
#cursol {
  position: absolute;
  padding: 5px;
  color: #fff;
  background: #666;
}
#sample li{float:left;margin-left:5px;}
#sample li img{width:200px;}

<div id="sample">
    <a href="http://www.flickr.com/photos/ag2r/">photo by Angelo (CC.BY)</a><br />
<ul>
<li><img src="http://farm7.staticflickr.com/6068/6131126901_3edba27015.jpg" /></li>
<li><img src="http://farm6.staticflickr.com/5301/5725788340_4d2447a80a.jpg" /></li>
<li><img src="http://farm5.staticflickr.com/4138/4762871610_37bed4288c.jpg" /></li>
</ul>
    
</div>