两个不同的Colorbox弹出窗口在同一页上分开设置？

本文介绍了两个不同的Colorbox弹出窗口在同一页上分开设置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在

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文件但是所有的colorboxes仍然在js中仍然具有相同的行为选项。我想为每个实例使用不同的css和不同的js设置。可能？

This little snippet works great but it only lets you style the colorboxes differently through different css files. but all colorboxes are still stuck with the same behavioral options in the js. I would like to use different css AND different js settings for each instance. Possible?

推荐答案

我想出了一个办法，也许有人可以想出一个更简单的方法，。

I figured a way to do it, perhaps someone can come up with an easier way, but this works just fine.

在html文档中：

<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文件：

Now we need to create the custom js and css files:

执行colorbox.css文件，并找到/替换colorbox的每个实例，并替换为本示例中的第一个colorboxHtml

在同一个文件中查找/替换cbox的每个实例并将其替换为cboxh

将文件另存为colorboxHtml.css

执行colorbox.js文件，并对cbox文件中的colorbox和cbox执行相同的查找/替换

将文件另存为colorboxHtml.js

冲洗并重复您想要的其他颜色盒实例

Take the colorbox.css file and find/replace every instance of "colorbox" and replace it with, for the first in this example, "colorboxHtml"
In the same file find/replace every instance of "cbox" and replace it with "cboxh"
Save the file as colorboxHtml.css
Take the colorbox.js file and do the same find/replaces for colorbox and cbox as you did in the css file
Save the file as colorboxHtml.js
Rinse and Repeat for every other instance of colorbox you want

现在我们不仅可以为每个实例设计不同的样式，控制每个实例的javascript功能!!

Now we can not only style each instance differently but we can completely control each instance's javascript functionality!!

这篇关于两个不同的Colorbox弹出窗口在同一页上分开设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！