1

FancyBox を既存の div と組み合わせようとしています。この div には、キャプション ホバー効果が含まれます。私はまだJSについてあまり知らないので、それを組み合わせる方法についてはわかりません。私の HTML には複数の画像が含まれています。これはそのうちの 1 つです。

<!-- Image Caption 1 -->
  <div id="box-6" class="box">
    <img id="image-6" src="beeld/images/grafisch/image09.png"/>
    <span class="caption scale-caption">
        <h3>Scale Caption</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>

私が欲しいのは、file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg（テスト画像）がポップアップすることだけです。今のところ、ウィンドウを再度開いて画像を表示するだけです。

基本的に、その HTML を FancyBox HTML とマージしようとしています。

<a id="single_3" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
<img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />

それを達成する方法はありますか？

JS:

<script type="text/javascript">

$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
      helpers: {
          title : {
              type : 'float'
          }
      }
  });

$("#single_2").fancybox({
    openEffect  : 'elastic',
    closeEffect : 'elastic',

    helpers : {
        title : {
            type : 'inside'
        }
    }
});

$("#single_3").fancybox({
    openEffect : 'elastic',
    closeEffect : 'none',
    helpers : {
        title : {
            type : 'outside'
        }
    }
});

$("#single_4").fancybox({
    helpers : {
        title : {
            type : 'over'
        }
    }
});
});
</script>

次のように、自分でマージしようとしました。

<!-- Image Caption 1 -->
    <a id="single_3" href="file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
    <div id="box-6" class="box">
    <img id="image-6" src="beeld/images/grafisch/image_09.png"/></a>
    <span class="caption scale-caption">
        <h3>Scale Caption</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>

しかし、FancyBox は単純にポップアップしません。

私は何を間違えましたか？

4

1 に答える 1

0

いくつかのこと：

1）最初にjqueryライブラリをロードしてください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2)次に、fancybox コードをロードする必要があります

<script src="http://yourdomain.com/your_path_to_js/jquery.fancybox.pack.js"></script>

3) 次に、このコードを head セクションに記述します

$(document).ready(function() {
    $('#single_3').fancybox({
        openEffect : 'elastic',
        closeEffect : 'none',
        helpers : {
            title : {
                type : 'outside'
            }
        }
    });
});

4）そして、これは本体セクションにあります

<a id="single_3" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
    <img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />
</a>

ここに動作するデモがありますhttp://jsfiddle.net/fkeVR/5/

5) 参照しているファイル file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpgがスクリプトからアクセスできることを確認してください

6) JavaScript にエラーがないことを確認します。Firefox を使用している場合、 Firebugのコンソールはデバッグに非常に役立ちます。

于 2013-05-29T15:19:48.020 に答える