缩放图像灯箱
Zoom image lightbox
我正在寻找一个lightbox jQuery插件,它可以像Highslide一样缩放点击的图像http://highslide.com/#examples但它必须是小的(Highslide的核心是57kb)和响应。它可以非常简单。我不需要大风等
你知道好的替代品吗?
jsBin演示
您所需要的一切:
将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);
});
相关文章:
- 图像缩放和平移
- Phonegap IOS应用程序图像缩放多点触控
- JavaScript 图像缩放和平移(拖动)
- 画布绘制图像缩放
- 使用多层图像缩放产品图像
- 为jquery图像缩放插件定义一个选择器
- 图像缩放效果
- 可以使全屏图像缩放
- 如何在jQuery/javascript中复制这种图像缩放动画效果
- JavaScript图像缩放-圆形边框
- Jquery自定义旋转木马内的图像缩放模式
- 防止移动浏览器上的图像缩放
- 通过javascript禁用Firefox图像缩放
- 图像缩放只在点击缩略图后在灯箱中工作
- 交换图像和显示图像缩放
- 将背景图像缩放为其容器宽度的100%
- 像素化的跨浏览器图像缩放
- 是否有一个好的jQuery (Javascript)库来做快速视频(不是图像)缩放/平移?(目标:iPhone通过Pho
- 比例图像缩放
- 图像缩放+模态