0

ファンシーボックスを介してサムネイルをより大きな画像に接続しようとしています。

これは、ヘッダーにファイルを追加する方法です（マスターページがあります）

<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これらは、設定したloop（for）命令を介してドキュメントに動的に追加されます。

Fancybox v1.3.xは動的に追加された要素をサポートしていませんが、ここで見つけることができる回避策があります。

あなたの場合、次のような独自のセレクターに一致するようにスクリプトを微調整します。

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

参照の投稿で他の要件も確認してください。

さらに、他のすべての人の推奨事項に従ってください。

  • 最初にjQueryをロードする
  • fancybox.jsまたはfancybox.pack.jsのいずれかをロードしますが、両方はロードしません
  • jQueryv1.7.xにアップグレードすることを忘れないでください

等

注：fancyboxが正しく機能することを確認するには、次のようにテストするために単一のリンクをハードコーディングします。

<a class="photoGallery" href="images/image01.jpg">test</a>
于 2012-05-23T23:14:30.873 に答える