fancybox根本不起作用

我试图通过fancybox将缩略图连接到更大的图片。fancybox根本不起作用

我这是怎么添加在头文件（我有一个母版页）

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
<link href="css/style-gallery.css" rel="stylesheet" type="text/css" /> 
<script src="img_fancy/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script> 
<script src="img_fancy/jquery.easing-1.3.pack.js" type="text/javascript"></script> 
<script src="img_fancy/jquery.fancybox-1.3.4.js" type="text/javascript"></script> 
<script src="img_fancy/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script> 
<link href="img_fancy/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script>

这是我的缩略图：

<div id="galleryContent"> 
    <%for (int i = 0; i < dt.Rows.Count; i++) 
     {%> 
     <div class="thumbnail"><a class="photoGallery" href="<%=dtbl_large_pic.Rows[i][1].ToString() %>" ><img src="<%=dt.Rows[i][1].ToString() %>" alt="wedding photo gallery" /></a></div> 
     <% } %> 

    </div>

，这是我的jquery：

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".photoGallery").fancybox(); 

     }); 

</script>

任何帮助？谢谢！

来源

2012-05-23 thormayer

你通过[全部文件]为的fancybox消失（http://fancybox.net/howto）实施？ – Jason

我的猜测是脚本的排序包括问题。尝试把jQuery放在第一位。

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
<link href="css/style-gallery.css" rel="stylesheet" type="text/css" /> 
<link href="img_fancy/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" /> 
<script src="js/jquery-1.4.3.min.js" type="text/javascript"></script> 
<script src="img_fancy/jquery.fancybox-1.3.4.js" type="text/javascript"></script> 
<script src="img_fancy/jquery.easing-1.3.pack.js" type="text/javascript"></script> 
<script src="img_fancy/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script> 
</asp:Content>

来源

2012-05-23 21:11:18

我可能会建议CSS首先出现，尽量减少[FOUC]（http://www.bluerobot.com/web/css/fouc.asp/） – Jason

不。不工作。 – thormayer

@Jason谢谢你指出！我改变了答案。 –

的fancybox site告诉我们这个命令调用脚本：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
<link href="css/style-gallery.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="img_fancy/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="img_fancy/jquery.easing-1.3.pack.js"></script> 
<script type="text/javascript" src="img_fancy/jquery.mousewheel-3.0.4.pack.js"></script> 
<link rel="stylesheet" href="img_fancy/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

我的猜测是，你包括jquery.fancybox-1.3.4.pack.js以及jquery.fancybox-1.3.4.js？

更新为包含您的文件和文件路径。

来源

2012-05-23 21:16:38

谢谢，但那不工作，即使我尝试 – thormayer

fancybox被初始化时，（假定）绑定到fancybox的元素不存在于DOM中。通过您设置的asp循环（for）指令将它们动态添加到文档中。

Fancybox v1.3.x不支持动态添加的元素，但有一种解决方法，您可以找到here。

在你的情况，调整剧本，以配合你自己喜欢的选择：

$("#galleryContent").on("focusin", function(){ 
$("a.photoGallery").fancybox({ 
    // fancybox API options here 
}); // fancybox 
}); // on

也请检查的参考职位的其他要求。

此外，遵循所有其他人的建议：

负荷的jQuery第一
压力也fancybox.js或fancybox.pack.js但不能同时
不要忘记升级到jQuery的v1.7.x

等

注：要确保的fancybox工作正常，硬编码一个链接，以测试它想：

<a class="photoGallery" href="images/image01.jpg">test</a>

来源

2012-05-23 23:14:30 JFK

fancybox根本不起作用

回答

相关问题