javascript - 缩放图片灯箱

Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                
                    5年前关闭。
            
        

    

我正在寻找一个Lightbox jQuery插件，它可以像Highslide http://highslide.com/#examples一样缩放点击的图像，但是它必须很小（Highslide的核心是57kb）并且具有响应能力。
这可能非常简单。我不需要画廊等。

你知道好的替代品吗？

最佳答案

jsBin demo

一切你需要的：
在图像中添加data-darkbox：

<img data-darkbox src="image.jpg">

CSS：

/* DARKBOX STYLES */
#darkbox{
    position:fixed;
    z-index:9999;
    background:rgba(0,0,0,0.8) no-repeat none 50%/contain;
    box-shadow:0 0 0 3000px rgba(0,0,0,0.8);
    opacity:0; visibility:hidden;
}
#darkbox.on{
    opacity:1; visibility:visible;
    height:90% !important; width:90% !important;
    left:5% !important; top:5% !important;
}
#darkbox:after{
    position:absolute;
    right:0; top:0;
    font-size:2em;
    content:"\2A2F";
    color:#fff;
    cursor:pointer;
}

jQuery的

var $darkbox = $("<div/>",{id:"darkbox"}).on("click", function(){
    $(this).removeClass("on");
}).appendTo("body");
$('img[data-darkbox]').css({cursor:"pointer"}).on("click",function(){
    var o=this.getBoundingClientRect();
    $darkbox.css({
        transition:"0s",
        backgroundImage:"url("+this.src+")",
        left:o.left, top:o.top,
        height:this.height, width:this.width
    });
    setTimeout(function(){
        $darkbox.css({transition:".8s"}).addClass("on");
    },5);
});