Question

我很确定我已经彻底搜索了类似的事件......希望我没有忽略它，如果我这样做，我会道歉。

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

现在您可以在www.sigmarating.com/index2.html看到，example1 colorbox正在完美运行。现在，当我在index.html中实现SAME头文件和样式表链接时...单击链接时没有任何反应。

的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我试图调用：

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

我正在使用理发店响应布局 - ThemeForest，如果有人都熟悉它。我没有使用wordpress或drupal或任何其他CMS只是一个简单的干切响应主题。

任何建议都将不胜感激！

-Thanks！

Answer 1

这是一个简单的完全超出我的想法。我正在使用的主题在页面末尾加载了JavaScripts以加快加载时间。我想我从不打扰往那里看，因为我已经在标题中加载了另一个脚本，并且该脚本工作正常。但是，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”中。

jQuery Colorbox适用于其他页面，但不适用于我的index.html

1 个答案: