Question

我有两个似乎有冲突的脚本，因此上一页和下一页按钮不会显示在Colorbox叠加层上（关闭按钮就在那里并且工作正常）。我的css调用是正确的，无论如何我通过添加：

来排除这个问题

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

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

Chrome javascript控制台向我显示以下消息：

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

最后，如果我注释掉Animated Repsonsive 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和html剪切的js

colorbox上一个和下一个不工作

1 个答案: