1

これに似た出来事を徹底的に検索したと確信しています...見落としていなかったら申し訳ありません。

これを私のライブサイトにインストールしています: www.sigmarating.com

www.sigmarating.com/index2.htmlでわかるように、example1 カラーボックスは問題なく動作しています。ここで、index.html に同じヘッダー スクリプトとスタイルシート リンクを実装しようとすると、リンクをクリックしても何も起こりません。

index.html:

    <head>
     <meta charset="utf-8">
     <title>Sigma Rating TM</title>
     <meta name="description" content="">
     <meta name="author" content="">
     <!-- +++ Mobile Specific Metas +++ -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <!-- +++ Load all the CSS Files with styles.css +++ -->
     <link rel="stylesheet" href="styles.css">
     <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
     <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
     <!-- +++ Load Favicon Favicons +++  -->
     <link rel="shortcut icon" href="favicon.ico">
     <!--COlorbox header!-->
    <link rel="stylesheet" href="colorbox.css" rel='stylesheet' type='text/css'/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" rel='javacsript' type='text/js'></script>
    <script src="http://www.sigmarating.com/jquery.colorbox-min.js" rel='javascript' type='text/js'></script>
    <script>
        $(document).ready(function(){
            //Examples of how to assign the Colorbox event to elements
            $(".group1").colorbox({rel:'group1'});
            $(".group2").colorbox({rel:'group2', transition:"fade"});
            $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
            $(".group4").colorbox({rel:'group4', slideshow:true});
            $(".ajax").colorbox();
            $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
            $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
            $(".inline").colorbox({inline:true, width:"50%"});
            $(".callbacks").colorbox({
                onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
            });

            $('.non-retina').colorbox({rel:'group5', transition:'none'})
            $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

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

HTML 外部ページ ColorBox im を呼び出そうとしています:

<p><a class='iframe' href="http://www.sigmarating.com/SIRcalculator/SIR.html">SIR Calculator</a></p>

Barbershop Responsive Layout -- ThemeForest を使用しています。私はワードプレスや drupal、その他の CMS を使用していません。

任意の提案をいただければ幸いです!

-ありがとう！

4

1 に答える 1

0

まあ、これは私の頭を完全に超えた単純なものでした。私が使用しているテーマは、読み込み時間を短縮するためにページの最後に JavaScript を読み込みました。ヘッダーに別のスクリプトを既にロードしていて、そのスクリプトは正常に機能していたので、わざわざそこを見下ろしたことはなかったと思います。ただし、ColorBox jQuery プラグインを他のスクリプトと共にロードする必要がありました。

私の愚かさを明らかにするのを手伝ってくれたテーマのサポートチームに感謝します.

                <script src="assets/js/jquery-1.9.1.min.js"></script>
                <script src="assets/js/jquery.validate.js"></script>
                <script src="assets/js/jquery.bxslider.js"></script>
                <script src="assets/js/smooth-scroll.js"></script>
                <script src="assets/js/filter-gallery.js"></script>
                <script src="assets/js/jquery.easing.1.3.js"></script>
                <script src="assets/js/jquery.prettyPhoto.js"></script>
                <!-- Initiate JQuery -->
                <script src="assets/js/js.js"></script>
                <script src="assets/js/jquery.colorbox-min.js"></script>

それが、スクリプトが最終的にどのように見えるかであり、呼び出し関数は "assets/js/js.js" 内に配置されました。

于 2013-05-14T14:34:57.420 に答える