Jquery Lightbox 不适用于 MasterPage答案

【问题标题】：Jquery Lightbox not working with MasterPageJquery Lightbox 不适用于 MasterPage
【发布时间】：2013-03-14 05:53:22
【问题描述】：

我以前使用过灯箱和变体，但无法使其正常工作。希望有人有一些建议，因为我远非 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");

生成的链接（通过 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>

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

【问题讨论】：

Path.GetFileNameWithoutExtension PATH VARIABLE 应该有路径“~/PostPhotos/Thumbnails/”，检查运行时源，你可能得到错误的文件路径/SRC，
你初始化灯箱了吗？ $(function() { //灯箱初始化 });
我没有意识到你必须初始化它？从我看到的示例中，您只是引用 .js 文件并将 rel 部分添加到链接中？这就是我之前所做的一切并取得了成功

标签： c# javascript jquery master-pages lightbox

【解决方案1】：

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

$(document).ready(function(){

$('YourLightBoxSelector').lightbox(); 

});

【讨论】：

添加了这个： ...但它没有解决任何问题=/

【解决方案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();

【讨论】：

很抱歉添加该行无法编译，这意味着在 javascript 或 c# 中吗？？