0

ここで大学のウェブサイト用にfancyboxを使用して画像ギャラリーを構築しています：http://pacificdesignacademy.com/NEW/2/gallerygd.php

画像をクリックするとfancyboxが初期化されるのですが、cssなどを認識していないようです。境界線やナビゲーションなどはなく、画像が正しいサイズで開き、画面の上部にジャンプしてはるかに小さくなることがあります. サムネイルにもcssが添付されているようには見えません。ドキュメントの head ですべてが正しくリンクされていることを確認しましたが、ブラウザーにエラーは返されません。私はここで途方に暮れています。

これは私のスクリプトです：

<script type="text/javascript">
    $(document).ready(function() {
    $("a.fancybox").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true
    }); 

    });
    </script>

これは私のHTMLです：

<div class="large-12 columns">
        <div id="gallery">

            <a class="fancybox" rel="group" href="img/gallery/gd/image1.jpg"><img src="img/gallery/gd/thumbs/image1.jpg" alt="Kathleen Watson - Canadian Female Offenders Infographic" /></a>

            <a class="fancybox" rel="group" href="img/gallery/gd/image2.jpg"><img src="img/gallery/gd/thumbs/image2.jpg" alt="" /></a>

            <a class="fancybox" rel="group" href="img/gallery/gd/image3.jpg"><img src="img/gallery/gd/thumbs/image3.jpg" alt="" /></a>

</div>

</div>

どんな提案でも大歓迎です。ありがとう！

4

2 に答える 2

0

ブラウザでネットワーク トラフィックを監視すると、次のように表示されます (200 = 成功、404 = 見つかりません)。

リスト

ほとんどの css および javascript ファイルへのパスが間違っています。失敗したリクエストを見てください。すべてのリクエストに /NEW/2/NEW/2 が含まれているため、これが問題です。

現在のリンク:

<script src="NEW/2/fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>

する必要があります

<script src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>

ブラウザがこれらの間違ったリクエストを行うのはなぜですか? 相対 URL を使用しているためです。現在の html ページは/NEW/2/ブラウザに配置されているため、要求されたファイルの URL が現在の場所に追加されます。

于 2013-08-31T11:42:53.590 に答える
0

代わりに rel 属性を使用してみてください。このようにして、写真を閲覧するためのナビゲーションも利用できます。

HTML

<a rel="example_group" title="Custom title" href="/linktopicture">
    <img alt="" src="/linktopicture">
</a>
...

CSS:

$("a[rel=example_group]").fancybox( {
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true   
});

作業中のjsfiddleを参照してください：

http://jsfiddle.net/wm8QD/14/

于 2013-08-30T23:40:37.107 に答える