Question

我试图通过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>

任何帮助？谢谢！

Answer 1

我的猜测是脚本的顺序包括物质。尝试首先使用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>

Answer 2

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？

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

Answer 3

初始化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>

fancybox根本不起作用

3 个答案: