fancybox не работает вообще

Question

Im пытается подключить миниатюру к большему снимку через 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, не существуют в DOM при инициализации fancybox. Они довольно динамически добавляются в документ с помощью команды 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>