Question

我创建了一个包含几个加载了jQuery的div的网站。在其中一个div中，我有可点击的图像拇指，用Lightbox2脚本在灯箱中显示图像。

问题在于，当我再次单击div中加载图像拇指的链接时，会出现一个空白灯箱。要清楚说明：第二次点击时已加载带有图像拇指的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页面代码，用于显示灯箱和图像：

<!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并没有改变灯箱的行为。

Answer 1

我明白了！

解决方案是将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中的html页面现在看起来像这样：

<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>

从div加载Lightbox2

1 个答案: