シンプルでクールなLightbox

Ads

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風の画像表示を自作する

タイトルとURLをコピーしました