0

Lightbox タイプのコードを機能させようとしていますが、jQuery 1.7.2 では機能していないようです。私は基本的にiFrameでフォームを作成しています。誰かがバナーをクリックすると、ライトボックスにオプトイン フォームが開き、メーリング リストにサインアップできます。私は現在Fancybox 2を使用していますが、使用すると美しく見えます:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

しかし、私が戻ったとき：

<script type='text/javascript' src='http://www.ncfitclub.net/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

それはもはや機能しません。1.7版でもサイト全体で使えるかなと思ったのですが、そうするとトップページの写真スライドショーが動かなくなってしまいます。

ここで、jQuery 1.7.2 と 1.8 で JSFiddle を実行しましたが、どちらも機能しました。だから今、私は問題の原因を失っています。明確にするために、XAMPP を使用して、他のコードやプラグインを使用せずに自分のコンピューターでサイトをテストして、最初にテストしている間の競合を回避しています。jQuery.noConflict で解決できる問題ではないことはわかっています。これは、コードがクリーンなページでは機能しないためです。

機能をテストするためだけに使用しているコードは次のとおりです。

<!DOCTYPE html>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.0"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=1.0.3"></script>
<script type="text/javascript" src="js/jquery.fancybox-media.js?v=1.0.3"></script>

<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : true,
    closeClick  : false,
    openEffect  : 'elastic',
    closeEffect : 'elastic',
    helpers : {
    overlay : {
        css : {
            'background' : 'rgba(58, 42, 45, 0.3)'
        }
    }
}
});

});
</script>


</head>


<body>
<a class="various fancybox.iframe" href="http://www.ncfitclub.net"><img src="http://images.beachbody.com/tbb/coo/ad_banners/tropical_shakeology/shakeology-tropical-new-728x90.jpg" width="72" height="72" alt="" /></a>
</body>
</html>

何か案は？

編集

WP インクルード ファイルとスライドショーに関係があることがわかりました。スライドショーは、 を使用した場合にのみ機能します<script type='text/javascript' src='http://www.ncfitclub.net/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>。バージョン 1.7.2 または 1.8、または jQuery.com から直接リンクされた他のバージョンを使用すると機能しません。コードのどこかに相対リンクがあるかどうか疑問に思っていますか?

編集

リンクは次のとおりです。

http://www.miller-media.com/sites/ncfit/index.html (これには WP インクルード JS ファイルがあります。スライドショーは正常に動作しますが、右上のバナーをクリックすると、ファンシーボックスコードが添付されているため、ファンシーボックスにないページにリンクするだけです）

http://www.miller-media.com/sites/ncfit/index2.html (これは、同じバージョンの jquery (1.7.2) を使用した jquery.com からの JS 呼び出しによるものです。ファンシーボックスは、右上のバナーをクリックすると機能します)

4

2 に答える 2

1

WP jQueryと公式のものの違いは行です

jQuery.noConflict();

最後に。Mootools ギャラリーの混乱を避けるために、競合しないモードが使用されている可能性があります。公式の jQuery を含めて使用してみてください。ただし、上記のコード行はその後すぐに実行されます。

于 2012-09-07T02:36:02.967 に答える
0

私はそれを考え出した。WP jQuery 内の noConflict を指摘してくれた Owlvark に感謝します。基本的に、Fancybox コードに対して次の行に沿って何かを行う必要がありました。

<script>
var $j = jQuery.noConflict();
    $j(document).ready(function(){
            $j(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

            //Example of preserving a JavaScript event for inline calls.
            $j("#click").click(function(){ 
                $j('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });
        });

ページにも Mootools があったので、noConflict を使用するように変数を変更する必要がありました。

于 2012-09-07T03:17:59.750 に答える