5

わかりました、これを正しく実装したと思いましたが、どこかで間抜けしたに違いないと思います。

これが私のコードです：

ここにJquery：

jQuery(document).ready(function( $ ){

$(function() {
    $( ".cta-nav-hover" ).tooltip({
        show: null,
        position: {
            my: "right+40 bottom",
            at: "left bottom"
        },
        open: function( event, ui ) {
            ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );
        }
    });
});





$(function() {
    $(".fancybox").fancybox();
});

});

次にHTML：

<div id="cta-nav-wrapper">
    <ul id="cta-nav">
        <li class="bio">
            <a href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
        </li>
    </ul>
</div>

これでうまくいくと思ったのですが、リンクをクリックすると、ポップアップが表示されるのではなく、プレースホルダー イメージが表示されるだけです。私は何を間違えましたか？ファイルが適切に並んでいるように見えます。または、少なくともfirebugを介してそれらを検査すると、適切なjsに移動します。

これが私が頭の中で呼んだものです：

<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>

<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>




<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css"> 
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>

Magnific Popup という別のプラグインも試しましたが、これも反応しません。ワードプレスのテーマの設定と関係があると思います。

4

1 に答える 1

20

これhref="http://placehold.it/350x125"は、あなたが開いていることをfancyboxに伝えていないimageので、次のいずれかを行います:

1)。fancybox.image次のような特別なクラスをリンクに追加します

<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>

2)。data-fancybox-type次のように (HTML5)属性をリンクに追加します

<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>

3)。type次のようなファンシーボックススクリプトにオプションを追加します

$(".fancybox").fancybox({
   type: "image"
});

あなたのケースに適していると思うものは何でも。

注: 番号 1)。および 2)。上記は fancybox v2.x のみで動作します。番号 3)。v1.3.4 および v2.x のいずれかで動作します

EDIT：あなたのコードとjQuery v1.8.3にJSFIDDLEを含めました。

2 つのリンクがあります。

  • 「fancybox.image」クラスを使用するもの：動作中
  • その他無し：動かない
于 2013-07-09T17:35:01.807 に答える