Jquery Lightbox不能与MasterPage一起工作

本文关键字：一起 工作 MasterPage Lightbox 不能 Jquery | 更新日期: 2023-09-27 18:03:53

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

In MasterPage Head:

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

In Page code:

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 inspect生成的链接:

<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'属性等)。

Jquery Lightbox不能与MasterPage一起工作

请确保您在文档中配置了灯箱。在母版页某处准备好了

$(document).ready(function(){
$('YourLightBoxSelector').lightbox(); 
});

因为你的元素是动态添加的…在动态生成的元素被追加到文档之后，调用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();
相关文章：