jquery - HTMLで2つのカラーボックスをロードする方法

Question

私はカラーボックスが初めてで、2 つの HTML を 1 つに統合する仕事を与えられました。

$.colorbox関数は両方のページで使用されます

コードが1つのjavascriptであいまいな問題を解決する方法

$.colorbox({
    opacity: 1,
    speed: 500,
    fadeOut: 500,
    className: "rd",
    initialWidth: "50%",
    initialHeight: "30%",
    width: "450px",
    height: "290px",
    inline: true,
    overlayClose: false,
    escKey: false,
    href: "#productFinderPickUser",
    closeButton: false,
    onOpen: function () {
        var pickUserDiv = document.getElementById("productFinderPickUser");
        pickUserDiv.style.display = "block";

    },
    onClosed: function () {
        var pickUserDiv = document.getElementById("productFinderPickUser");
        pickUserDiv.style.display = "none";
    }
});

他に

$(this).colorbox({
    inline: true,
    className: "checker",
    opacity: 0,
    fadeOut: self.msDelay / 4,
    speed: self.msDelay / 3,
    reposition: false,
    top: "5px",
    right: "25px",
    maxHeight: "90%",
    href: "#addevent_form",
    onClosed: function () {
        $('#addevent_allday_val').prop("checked", false);
        $('#sTimeWrap').show();
        $('#eTimeWrap').show();
    }
});