colorbox - 页面已加载，其中的图像未作为 colorbox 加载

Question

我对 colorbox 有疑问。

我有一个用于加载页面的脚本：

$(document).ready(function(){

    // ColorBox
    $("a[rel='colorbox']").colorbox({
        close: "Zavřít",
        current: "Obrázek {current} z {total}",
        next: "Další",
        previous: "Předchozí"
    });

    // ColorBox - Module
    $(".load").colorbox({
        close: "Zavřít",
        fixed: true,
        maxHeight: $(window).height() - 80,
        opacity: 0.75,
        top: 30,
        width: $(window).width() - 100
    });

});

它在彩盒中加载良好，但我在加载的页面中有图像，我希望它们也加载在彩盒中。

有什么帮助吗？

多谢。

更新：

我尝试过：

$(".load").colorbox({
    close: "Zavřít",
    fixed: true,
    maxHeight: $(window).height() - 80,
    opacity: 0.75,
    top: 30,
    width: $(window).width() - 100,
    onComplete: function(){
        $("a[rel='colorbox']").colorbox({
            close: "Zavřít",
            current: "Obrázek {current} z {total}",
            next: "Další",
            previous: "Předchozí"
        });
    }
});

更好了。尝试加载图像，但出现一些错误。当我单击图像将其加载到颜色框中时，它开始加载但图像未加载（不显示，仍在加载图像）。如果我单击下一个或上一个，它可以工作（图像显示），但当前标题仍然相同，并且颜色框工作得很奇怪（位置、单击周围区域以关闭和快捷键不起作用）。

有一个示例（AKCE - SHOW）： http://rene-pastor.vf- fans.net/jitka-valkova/

Answer 1

由于加载的页面颜色框中的图像是在 DOM 准备好后加载的，因此您需要在使用 onComplete 回调加载它们后将 $.colorbox() 附加到它们，如下所示：

$(".load").colorbox({
    close: "Zavřít",
    fixed: true,
    maxHeight: $(window).height() - 80,
    opacity: 0.75,
    top: 30,
    width: $(window).width() - 100,
    onComplete : function(){
        $("a[rel='colorbox']").colorbox({
            close: "Zavřít",
            current: "Obrázek {current} z {total}",
            next: "Další",
            previous: "Předchozí"
        });
    }
});

我希望这会有所帮助！