1

我很确定我彻底搜索了与此类似的事件......希望我没有忽视它，如果我这样做了，我深表歉意。

我正在我的实时网站上安装它： www.sigmarating.com

现在，正如您在www.sigmarating.com/index2.html所看到的，example1 颜色框工作正常。现在，当我在 index.html 中实现 SAME 头脚本和样式表链接时……单击链接时没有任何反应。

索引.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：

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

我使用的是理发店响应式布局——如果有人熟悉的话，那就是 ThemeForest。我没有使用 wordpress 或 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 回答