从div加载Lightbox2
我已经创建了一个带有几个div的网站，这些div都加载了jQuery。在其中一个div中，我有可点击的图像缩略图，它使用Lightbox2脚本在lightbox中显示图像。
问题是，当我再次单击在div中加载图像缩略图的链接时，一个空白的lightbox appears.To清楚地表明:在第二次单击时，带有图像缩略图的div已经加载。
我认为发生错误是因为我已经加载了div中的图像，并且第二次加载以某种方式触发了lightbox2脚本。但是我每次点击都会清除div，所以这是不可能的。
我如何才能阻止这种情况的发生？
代码：
loader.js (点击后在div中显示内容的脚本，#rightinfo =带图片的右div)
$(document).on('click', '#main a[name="inner"]', function () {
var page = $(this).attr('href');
var hash = $(this).attr('href').replace(/^.*?(#|$)/,'');
image = new Image();
image.src = 'timelines/' + hash + '.jpg';
// alert(hash);
image.onload = function () {
$('#timeline').empty().append(image);
$('#rightinfo').empty();
};
image.onerror = function () {
$('#timeline').empty().html('Geen tijdlijn beschikbaar.');
$('#rightinfo').empty();
}
$('#timeline').empty().html('Loading...');
$('#rightinfo').empty().html('Loading...');
$('#main').load('content/' + page);
$('#rightinfo').load('info/' + hash + '.html');
// $('.lijn').hide();
// $(hash).show();
return false;
});
在rightinfo-div中加载的html页面代码，用于显示lightbox和图像：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="lightbox/css/lightbox.css" rel="stylesheet">
<script src="lightbox/js/lightbox.js"></script>
</head>
<body>
<i>Nieuw-Beijerland in 1650</i><p>
<a href="images/Nieuw-BeijerlandDorp1650.jpg" data-lightbox="NBDorp1650"><img src="timthumb.php?src=images/Nieuw-BeijerlandDorp1650.jpg&q=100&h=150"></a><p>
<a href="images/Nieuw-BeijerlandKerk1650.jpg" data-lightbox="NBKerk1650"><img src="timthumb.php?src=images/Nieuw-BeijerlandKerk1650.jpg&q=100&h=150"></a><p>
</body>
</html>
我已经检查过了，用来制作拇指的timthumb.php没有改变lightbox的行为。
回答 1
Stack Overflow用户
发布于 2015-10-02 20:33:53
这样啊，原来是这么回事!
解决方案是将lightbox.js脚本从使用jQuery加载到div rightinfo的html页面直接移动到index.php页面上的div中，如下所示：
<div id="rightinfo">
<script src="lightbox/js/lightbox.js"></script>
</div>
我还从加载到rightinfo div中的html页面中删除了所有html标记，因为它是否存在似乎并不重要。rightinfo div中的htmlpage现在如下所示：
<link href="lightbox/css/lightbox.css" rel="stylesheet">
<i>Nieuw-Beijerland in 1650</i><p>
<a href="images/Nieuw-BeijerlandDorp1650.jpg" data-lightbox="NBDorp1650"><img src="timthumb.php?src=images/Nieuw-BeijerlandDorp1650.jpg&q=100&h=150"></a><p>
<a href="images/Nieuw-BeijerlandKerk1650.jpg" data-lightbox="NBKerk1650"><img src="timthumb.php?src=images/Nieuw-BeijerlandKerk1650.jpg&q=100&h=150"></a><p>
https://stackoverflow.com/questions/32905617
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号