0

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

在 MasterPage 头中：

<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");

生成的链接（通过萤火虫检查）：

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

图像显示得很好，当我用萤火虫检查它时，一切似乎都很好（它具有“rel”属性等）。

4

2 回答 2

0

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

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();
于 2013-03-14T05:59:57.513 回答
0

请确保您在母版页某处的 document.ready 中配置灯箱

$(document).ready(function(){

$('YourLightBoxSelector').lightbox(); 

});
于 2013-03-14T05:59:22.193 回答