Question

之前我使用过lightbox和变体，但是无法让它正常工作。希望有人有一些建议，因为我远非javascript专家。 C＃/ ASP网站有一个MasterPage，其他每个页面都使用该MasterPage。该链接也是通过代码动态生成的。我的测试中有两个结果：要么就像普通链接那样工作，要么将我重定向到图像，要么点击它时什么也不做。

在MasterPage Head：

<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/lightbox.js"></script>

在页面代码中：

DynLink.ImageUrl = "~/PostPhotos/Thumbnails/" + Path.GetFileNameWithoutExtension(image.Photo) +     "_thumb100_100" + Path.GetExtension(image.Photo).Replace("//","/"); 
DynLink.NavigateUrl = "~/PostPhotos/Thumbnails/" + Path.GetFileNameWithoutExtension(image.Photo) + "_thumblowres" + Path.GetExtension(image.Photo); 
DynLink.Attributes.Add("rel", "lightbox");

生成的链接（通过firebug检查）：

<a href="PostPhotos/Thumbnails/grumpy_cat_christmas_9_thumblowres.jpg" rel="lightbox">
<img alt="" src="PostPhotos/Thumbnails/grumpy_cat_christmas_9_thumb100_100.jpg">
</a>

图像显示正常，当我用firebug检查时，一切似乎都很好（它具有'rel'属性等。）

Answer 1

请确保您在原始页面

的某个位置的document.ready配置灯箱

$(document).ready(function(){

$('YourLightBoxSelector').lightbox(); 

});

Answer 2

因为您的元素是动态添加的...在文档中附加动态生成的元素之后，调用lightbox会起作用....

DynLink.ImageUrl = "~/PostPhotos/Thumbnails/" + Path.GetFileNameWithoutExtension(image.Photo) +     "_thumb100_100" + Path.GetExtension(image.Photo).Replace("//","/"); 
DynLink.NavigateUrl = "~/PostPhotos/Thumbnails/" + Path.GetFileNameWithoutExtension(image.Photo) + "_thumblowres" + Path.GetExtension(image.Photo); 
DynLink.Attributes.Add("rel", "lightbox");
//your append code..
$('#dynamicelementID').lightbox();

Jquery Lightbox无法与Master Page一起使用

2 个答案: