0

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

有什么帮助吗？谢谢！

4

3 回答 3

2

我的猜测是脚本的顺序包括物质。尝试将 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-23T21:11:18.557 回答
1

fancybox 网站告诉我们调用脚本的顺序：

<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-23T21:16:38.820 回答
0

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

Fancybox v1.3.x 不支持动态添加的元素，但是您可以在此处找到解决方法。

在您的情况下，调整脚本以匹配您自己的选择器，例如：

$("#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-23T23:14:30.873 回答