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根本不起作用

回答

相關問題