シンプルでクールなLightbox
Result
jQuery
$(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();
});
});
css
.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;}
html
<div id="sample">
<ul>
<li><img src="01.jpg" /></li>
<li><img src="02.jpg" /></li>
<li><img src="03.jpg" /></li>
</ul>
</div>
via
jQueryでlightbox風の画像表示を自作する