Question

我试图通过花瓶把缩略图和大图联系起来。

这就是我如何在页眉中添加文件( 我有一个主页) 。

<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>

这是我的杰作:

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

        });

</script>

any help? thanks!

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

http://fancybox.net/howto" rel="nofollow">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 ?

更新以包括您的文件和文件路径。

Answer 3

在初始化花瓶时,( 可能) 注定要到花瓶的元素在 DOM 中不存在。它们通过您设置的 < code> asp 环( < code> for ) 指令被相当动态地添加到文档中。

Fancybox v1.3.x 不支持动态添加的元素, 但是您可以找到 < a href=" https:// stackoverflow.com/ a/ 9084293/ 1055987> 这里。

在您的情况中, 调整脚本以匹配您的选择者, 比如 :

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

另请查看有关查询职位的其他要求。

此外,遵循所有其他人民的建议:

Load jQuery first
Load either fancybox.js or fancybox.pack.js but not both
Don t forget to upgrade to jQuery v1.7.x

等

<强度 > 注 :为了确保花瓶正常工作,硬码一个链接,以便测试它,例如:

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

友情链接