我在各种网站上使用 Shadowbox.js（基于 Web 的查看器，如 lightbox），到目前为止效果很好。唯一的问题是对移动设备的支持不好。
无法通过滑动当前图像来更改图库中的图像，因此用户必须使用查看器-视口底部的非常小的导航按钮。 （也可以使用键盘导航，但不能在移动设备上使用）
这不仅仅是这些导航按钮的难处。每次点击导航按钮都会触发缩放功能，其中包含聚焦区域的详细视图 - 需要再次点击以确认切换到下一张或上一张图像。
如果可以使画廊的行为类似于默认的 android 画廊查看器或类似的移动应用程序，那就太好了。
我正在使用 jquery 版本的 shadowbox。
【问题讨论】：
标签： javascript jquery mobile lightbox shadowbox
有一个示例脚本如何改进 Shadowbox.js：
首先，您需要 jQuery 版本的 Shadowbox.js。还需要jQuery UI 和jQuery UI Touch Punch 插件（大小：584 字节）。没有 Punch-plugin 的 jQuery UI 不支持触摸事件。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script><script>-area：<link rel="stylesheet" type="text/css" href="plugins/shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="plugins/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init( { onOpen: function() { }, players: ['html','img', 'iframe' ,'inline'] } );
</script> 这是初始化 Shadowbox.js 查看器的最少 javascript 调用。 onOpen 是事件之一，它允许在特定点运行代码。在我们的例子中，它需要使用一个事件，该事件在加载放大的图像后触发。我们使用事件 onFinish 并运行自定义 jQuery UI 代码以使查看器的图像视口可拖动到 x 轴。
所以用户可以从左到右拖动图像，反之亦然：
<script type="text/javascript">
Shadowbox.init(
{
/* Add call to hook into the event */
onFinish : function ()
{
/* Make the image viewport draggable */
$( "img#sb-player" ).draggable({ axis: "x" });
},
onOpen: function()
{
},
players: ['html','img', 'iframe' ,'inline'] } );
</script>
但用户无法在图库中滑动，因为没有函数调用可以转到下一张或上一张图像。所以我们必须添加它们。这需要在代码开头有一个变量来保存图像的当前位置而无需拖动。然后我们要在用户停止拖动图像时添加一个事件，以获取拖动后的图像位置，以计算开始和结束位置之间的距离。我们可以使用计算出的值来获取滑动手势的方向（左或右）。
<script type="text/javascript">
Shadowbox.init(
{
/* Add call to hook into the event */
onFinish : function ()
{
/* Make the image viewport draggable */
$( "img#sb-player" ).draggable({ axis: "x" });
/* Save the current position of the image in a global variable */
leftrightDirection = $( "img#sb-player" ).offset().left;
/** Execute the calculation of the direction and call the next/prev functions **/
$( "img#sb-player" ).draggable({ stop: function( event, ui )
{
var leftrightDirectionCalculated = leftrightDirection - $( "img#sb-player" ).offset().left;
if ( Math.abs( leftrightDirectionCalculated ) > 30 )
{
if ( leftrightDirectionCalculated < 0 )
{
/* Go to the previous image */
Shadowbox.previous()
}
else
{
/* Go to the next image */
Shadowbox.next();
}
}
}});
},
onOpen: function()
{
},
players: ['html','img', 'iframe' ,'inline'] } );
</script>
我们快完成了。到目前为止，这是可行的，但问题是只有一张图像的 Shadowbox 画廊。在这种情况下，图像不能是可拖动的。
另一个问题是画廊的第一张和最后一张图片。例如，如果第一张图像可见，则可以向右拖动 - 即使没有上一张图像（因为它是第一张！）。这就是原因，我们必须检查当前图像是第一个还是最后一个，并拒绝将图像向左或向右拖动。
在每个调用的拖动事件（对于图像移动的每个像素），我们都必须计算距离并检查是否允许移动图像。如果没有，我们只需设置起始位置。所以例如第一张图片只能在一个方向上移动。
if ( Shadowbox.hasNext() == false )
{
if(ui.position.left < startPosition)
{
ui.position.left = startPosition;
}
else if(ui.position.left > 250)
{
ui.position.left = 250;
}
startPosition = ui.position.left;
}
if ( Shadowbox.current == 0 )
{
if(ui.position.left > startPosition)
{
ui.position.left = startPosition;
}
else if(ui.position.left < -250)
{
ui.position.left = -250;
}
startPosition = ui.position.left;
}
现在我们完成了。修改当前的 Shadowbox 安装实际上非常容易。代码不是最好的，但也许它是进一步改进的良好基础（例如关闭放大查看器的手势）。
完整的脚本：
Shadowbox.init( { onFinish : function () {
if ( Shadowbox.hasNext() == false && Shadowbox.current == 0 )
{
// If there is only one image at the galery - just do nothing!
}
else
{
/* Save the current image position */
leftrightDirection = $( "img#sb-player" ).offset().left;
/* Make the image draggable, but only in x-direction */
$( "img#sb-player" ).draggable({ axis: "x" });
/* After dragging go to previous / next image in the galery */
$( "img#sb-player" ).draggable({ stop: function( event, ui )
{
var leftrightDirectionCalculated = leftrightDirection - $( "img#sb-player" ).offset().left;
if ( Math.abs( leftrightDirectionCalculated ) > 30 )
{
if ( leftrightDirectionCalculated < 0 )
{
Shadowbox.previous()
}
else
{
Shadowbox.next();
}
}
}});
$( "img#sb-player" ).draggable({ start: function( event, ui )
{
startPosition = ui.position.left;
}});
/* Improve behaviour for the first or last image */
$( "img#sb-player" ).draggable({ drag: function( event, ui )
{
if ( Shadowbox.hasNext() == false )
{
if(ui.position.left < startPosition)
{
ui.position.left = startPosition;
}
else if(ui.position.left > 250)
{
ui.position.left = 250;
}
startPosition = ui.position.left;
}
if ( Shadowbox.current == 0 )
{
if(ui.position.left > startPosition)
{
ui.position.left = startPosition;
}
else if(ui.position.left < -250)
{
ui.position.left = -250;
}
startPosition = ui.position.left;
}
}});
} // Ende Fallunterscheidung zwischen Galerie und 1-Bild-Lightbox
}, onOpen: function() { }, players: ['html','img', 'iframe' ,'inline'] , resizeDuration: 0 } );
【讨论】：