javascript - 上一个和下一个颜色框不起作用

Question

我有 2 个脚本似乎有冲突，因此 Previous 和 Next 按钮不会显示在 Colorbox 叠加层上(Close 按钮​​在那里并且工作正常)。我的 css 调用是正确的，我通过添加将其排除在外:

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

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

Chrome javascript 控制台给我这条消息:

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

最后，如果我注释掉 Animated Responsive Grid，控件将在 Colorbox 叠加层上正确执行。

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

你可以在http://www.flowerlandshop.com/photostest.html看到我的测试页面

编辑:这是我的头代码:

    <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>

这是页面底部的动画响应网格的 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>

Answer 1

尝试将 open:true 添加到 colorbox 的选项中。适合我。

PS:请提供您使用 colorbox 的 js 和一段 html