上一个负责任的网站我发展，我有我自己的小灯箱，脚本，打开图像全屏，同时保持其纵横比。 这很简单，使用2周的div（外全屏-DIV与黑色背景“lbBlack”，并与图像“lbImg”内格）：
//super small lightbox ;)
$("#posts").on("click", ".img", function(event) {
$('#lbBlack').css('top',$(document).scrollTop());
$('#lbImg').attr('src', $(this).attr('src'));
$('#lbBlack').css('width',$(window).width());
$('#lbBlack').css('height',window.innerHeight);
$('#lbBlack').fadeIn(500);
$('#lbImg').css('margin-top',((window.innerHeight-$('#lbImg').height()))/2);
document.body.style.overflow="hidden";
document.ontouchmove = function(event){
event.preventDefault();
}
$('#lbBlack').on("click", "#lbImg, body", function(event) {
$('#lbBlack').fadeOut(500);
document.body.style.overflow="visible";
document.ontouchmove = function(event){
return true;
}
});
});
对于iOS，我不得不添加ontouchmove预防，因为身体溢出隐藏是不够的，避免滚动，而灯箱被打开。
现在的“大问题”上面这个工作解决办法：我想启用缩放图像。 这是防止与“ontouchmove” -code。
有任何想法吗？
HTML代码：
<body>
<div id="lbBlack">
<img id="lbImg">
</div>.....
CSS代码：
#lbBlack {
display: none;
position: absolute;
left: 0;
background-color: black;
z-index: 2001;
text-align: center;
}
#lbBlack #lbImg {
max-height: 100%;
max-width: 100%;
position: relative;
}
所以，我认为我找的是防止滚动，同时仍保持放大的可能性的方法。 我还是不明白，为什么身体溢出：隐藏仍然有滚动iOS上的能力？
嗯，拉斐尔，
这可能不是完美的，但它应该让你在正确的方向前进。 我在Android上进行测试，我的朋友谁负责处理苹果的东西是目前不可用。 滚动和其他运动是禁用的，但可以放大。 有一个问题，但是，当你实际上是在捏缩放，你可以左右移动画面的过程。 你总是可以捕捉画面回到中心挤捏缩放完成后。 （这甚至可能看起来整洁）。
请注意，我加入到jQuery的原型的方法和属性来jQuery.Event原型。
/*global console, $*/
/*jslint browser: true*/
(function () {
"use strict";
$.fn.detectPinch = function () {
var numTouches = 0;
// each finger touch triggers touchstart
// (even if one finger is already touching)
$(document).on('touchstart', function (event) {
// if numTouches is more than 1, reset it to 0
// or else you can have numTouches >= 2 when
// actually only one finger is touching
numTouches = (numTouches > 1) ? 0 : numTouches;
// if numTouches is 0 or 1, increment it
numTouches = (numTouches < 2) ? numTouches += 1 : 2;
console.log(numTouches + ' start');
}).on('touchend', function (event) {
// another safety check: only decrement if > 0
numTouches = (numTouches > 0) ? numTouches -= 1 : 0;
console.log(numTouches + ' end');
});
// all event objects inherit this property
$.Event.prototype.isPinched = function () {
return (numTouches === 2) ? true : false;
};
return this;
};
$(document).ready(function (event) {
// call the method we added to the prototype
$(document).detectPinch();
$("#posts").on("click", "img", function (event) {
$(this).css('visibility', 'hidden');
$('#lbBlack').css('top', $(document).scrollTop());
$('#lbImg').attr('src', $(this).attr('src'));
$('#lbBlack').css('width', $(window).width());
$('#lbBlack').css('height', window.innerHeight);
$('#lbBlack').fadeIn(500);
$('#lbImg').css('margin-top', ((window.innerHeight - $('#lbImg').height())) / 2);
document.body.style.overflow = "hidden";
});
$('#lbBlack').on("click", "#lbImg, body", function (event) {
$('#lbBlack').fadeOut(500);
$('#posts img').css('visibility', 'visible');
document.body.style.overflow = "visible";
});
}).on('touchmove', function (event) {
// prevent one-finger movements
if (!event.isPinched()) {
event.preventDefault();
console.log('prevented');
}
});
}());
