Question

的同一页面找到了多个彩盒的解决方案

function useColorboxTheme() {
    var selectedTheme = $(this).attr("data-theme");

    $(".colorboxTheme").attr("disabled", "disabled");
    $("#" + selectedTheme).removeAttr("disabled");
}

function defaultColorboxTheme() {
    $(".colorboxTheme").attr("disabled", "disabled");
    $(".colorboxTheme.default").removeAttr("disabled");
}

$(document).ready(function(){
    $("a.colorbox").colorbox({
        onOpen: useColorboxTheme,
        onClosed: defaultColorboxTheme,
        iframe:true,
        innerWidth:940,
        innerHeight:375,
        loop: true,
        slideshow: false,
        slideshowAuto: true,
        slideshowSpeed: 2500,
        slideshowStart: "start slideshow",
        slideshowStop: "stop slideshow",
    });
});

这个小片段效果很好，但它只允许您通过不同的css文件对彩色盒进行不同的设置。但是所有的彩盒仍然在js中使用相同的行为选项。我想为每个实例使用不同的css和不同的js设置。可能的？

Answer 1

我想办法做到这一点，也许有人可以想出一个更简单的方法，但这很好用。

在html doc中：

<head>        
    <link id="colorboxHtml" rel="stylesheet" type="text/css" href="styles/colorboxHtml.css">
    <link id="colorboxYoutube" rel="stylesheet" type="text/css" href="styles/colorboxYoutube.css">
</head>
<body>
        <section>
            <a class="html" href="includes/colorboxHtml.html">Web page in colorbox
            </a>                    
        </section>
        <section>
            <a class="youtube" href="http://www.youtube.com/embed/8C0NfQrky6I">Youtube in colorbox
            </a>
        </section>
    <!--footer-->
    <script src='scripts/colorboxHtml.js'></script>
    <script src='scripts/colorboxYoutube.js'></script>
    <script>
        $(document).ready(function(){
            jQuery(".html").colorboxHtml({iframe:true, innerWidth:"80%", innerHeight:500});
            jQuery(".youtube").colorboxYoutube({iframe:true, innerWidth:640, innerHeight:390});
        });
    </script>
</body>

现在我们需要创建自定义js和css文件：

获取colorbox.css文件并查找/替换＆＃34; colorbox＆＃34;的每个实例。并将其替换为本例中的第一个＆＃34; colorboxHtml＆＃34;
在同一个文件中查找/替换＆＃34; cbox＆＃34;的每个实例。并用＆＃34; cboxh＆＃34;
将文件另存为colorboxHtml.css
获取colorbox.js文件，并像在css文件中那样对colorbox和cbox执行相同的查找/替换
将文件另存为colorboxHtml.js
为您想要的每个其他颜色盒实例进行冲洗和重复

现在我们不仅可以对每个实例进行不同的设置，还可以完全控制每个实例的javascript功能!!

两个不同的Colorbox弹出窗口在同一页面上单独设置？

1 个答案: