Javascript 上一个和下一个色盒不工作

我有两个脚本似乎存在冲突，因此“上一个”和“下一个”按钮不会显示在Colorbox覆盖图上（关闭按钮在那里，工作正常）。我的css调用是正确的，我通过添加以下内容排除了这一问题：

#cboxPrevious, #cboxNext {display:block !important; overflow:visible;}

然后显示下一个和上一个图形按钮，但单击时它们不起作用（该按钮已被删除）

Chrome javascript控制台向我发出以下消息：

Error: cboxElement missing settings object jquery.colorbox.js:204

最后，如果我注释掉动画Repsonsive Grid，控件将在Colorbox覆盖上正确执行

我确实尝试过将Colorbox脚本置于无冲突模式，但这只会禁用动画响应网格

您可以在上看到我的测试页面

编辑：这是我的头号代码：

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
    <noscript>
        <link rel="stylesheet" type="text/css" href="css/fallback.css" />
    </noscript>
    <!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/fallback.css" />
    <![endif]-->


        <link rel="stylesheet" href="http://www.flowerlandshop.com/css/colorbox.css" />
            <script src="js/jquery-1.9.0.min.js"></script>
            <script src="js/jquery.colorbox.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $(".group1").colorbox({rel:'group1', open:true});
                });
            </script>

$（文档）.ready（函数（）{
$（“.group1”）.colorbox（{rel:'group1'，open:true}）；
});

下面是页面底部对动画响应网格的js调用：

    <script type="text/javascript" src="js/jquery.gridrotator.js"></script>
            <script type="text/javascript"> 
                $(function() {

                    $( '#ri-grid' ).gridrotator( {
                rows : 4,
                columns : 9,
                maxStep : 2,
                interval : 2500,
                animType: 'random',
                preventClick: false,
                w1100 : { //ipad landscape
                    rows : 6,
                    columns : 6
                },
                w1024 : { //ipad portrait
                    rows : 6,
                    columns : 6
                },
                w768 : { //iphone landscape
                    rows : 2,
                    columns : 6
                },
                w480 : {  //iphone portrait
                    rows : 5,
                    columns : 4
                },
                w320 : {
                    rows : 5,
                    columns : 4
                },
                w240 : {
                    rows : 6,
                    columns : 4
                },
            } );

        });
    </script>

$（函数（）{
$（'#ri grid'）。gridrotator（{
行：4，
栏目：9，
maxStep:2，
间隔时间：2500，
animType:'随机'，
单击：false，
w1100:{//ipad景观
行：6，
栏目：6
},
w1024:{//ipad肖像
行：6，
栏目：6
},
w768:{//iphone环境
行：2，
栏目：6
},
w480:{//iphone肖像
行：5，
栏目：4
},
w320：{
行：5，
栏目：4
},
w240：{
行：6，
栏目：4
},
} );
});

尝试将

open:true

添加到colorbox的选项中。对我有用

---

PS:please your js where u use colorbox and a cut of html

adding open:true会在我刷新页面时显示带有控件的覆盖幻灯片，但它们不起作用，当我折叠该幻灯片并单击网格中的另一个图像时，生成的覆盖幻灯片没有控件。