1

いくつかの競合する JavaScript で問題が発生しています。ドロップダウン メニューを作成する 1 つのスクリプトと、fancybox を機能させる一連のスクリプトがあります。ただし、両方のスクリプト セットがヘッダー コードに含まれていると、それらが競合し、1 つの関数しか機能しません。コードの最初に配置したスクリプトは、機能しません。

私はjavascript/jqueryについてほとんど知りません。誰かが私にHTMLに入れるようにくれたいくつかのスクリプトで作業しているだけです(私は非常に精通しています)。誰かが答えを手伝うことができれば（そして私にとっては少し馬鹿げています:)）、それは本当に役に立ちます。

コンソールを使用してスクリプト内の競合をチェックしようとしましたが、少し迷っており、そこで何を見ているのかわかりません。誰かがコンソールの問題を適切にチェックアウトする方法を教えてくれれば、それもうまくいきますが、それだけで役立つとは保証できません。

これは、fancybox を最初に使用したホームページ html ファイルの Head のコードです (この方法では、fancybox は機能しませんが、ドロップダウン メニューは機能します)。

<!--dropdown menu script starts here--> 
<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.main.js"></script>
<!--dropdown menu script ends here-->   

<!--fancybox script starts here-->      
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/common/js/fancybox/lib/jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="/common/js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>  
<script type="text/javascript" src="/common/js/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="/common/js/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<link rel="stylesheet" href="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="/common/js/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {

    // fancybox for vimeo
    $(".vimeo").fancybox({
    width: 781,
    height: 440,
    type: 'iframe',
    fitToView : false,
    wrapCSS : 'fancybox-nav-video'
    });

    $('.fancybox').fancybox(
    {
    padding : 0,
    openEffect  : 'elastic'
    }
    );
    $(".fancybox").fancybox(
    {
    wrapCSS    : 'fancybox-custom',
    closeClick : true,
    helpers : {
    overlay : {
    css : {
    'background-color' : '#000'
    }
    },
    thumbs  : {
    width   : 50,
    height  : 50
    }
    }
    }
    );
    }
    );

    $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();      
</script>
4

2 に答える 2

2

jQueryライブラリを2回ロードしており、バージョン番号もわずかに異なります（1.7と1.7.2）。

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

コメントで述べたように、他の場所にもロードしています。一回だけで十分です！

編集

ここにもjQueryをロードしています（2回）：

<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/common/js/jquery.main.js"></script>
于 2013-01-24T22:21:42.450 に答える
0

まず、他の人からわかるように、JQueryが多すぎます。ただし、FancyboxにはJQuery 1.8の問題があるため、バージョン1.7を使い続けたいと考えています。ドロップダウン領域の上部にある1.8スクリプトを削除し、今のところgoogleからcdnバージョンを削除します。fancyboxに付属の1.7.2を使用するだけです。最後に、残りの1行のJquery行をページの上部に移動します。最初にロードする必要があります。ドロップダウンコードについてはわかりませんが、JQuery1.7では問題ないはずです。これで問題が解決するかどうかはわかりませんが、よりクリーンな出発点です。

于 2013-01-24T22:31:21.917 に答える