Question

我正在使用静态页面，我想在灯箱中打开iframe。

<iframe width="560" height="315" src="https://www.youtube.com/embed/rkd_7FbD_qs" frameborder="0" allowfullscreen></iframe>

我是否可以帮助解决此问题。

我正在使用一个灯箱，它可以很好地处理图像。但我想让它与iframe一起使用。我想在灯箱内打开一个iframe。如果我将iframe放在大图像的位置，它就无法正常工作。

$(".sol-body")
        .on("click", ".primary-image, a.enlarge, img.enlarge", function( event ){
            event.preventDefault();
            event.stopPropagation();
            if ( $("a.enlarge").length != 0 ) {
                createOverlay();
                $(".overlay-img").append("<img src='" + $(".larger-img").attr("src") + "' />");
                animateOverlay(); 
            }             
        })
        .on("click", "li img", function( event ){
            event.preventDefault();
            createOverlay();
            $(".overlay-img").append("<img src='" + $(this).attr("src").replace("mini", "main") + "' />");
            animateOverlay();
        });

    function createOverlay() {
        $("body").append("<div class='overlay'><div class='overlay-img'></div><div class='overlay-close'>x</div></div>");

        $(".overlay")
            .on("click", function( event ){
                event.stopPropagation();
                $(".overlay").off("click");
                $(".overlay").remove();
            })
            .on("click", ".overlay-close", function( event ){
                event.stopPropagation();
                $(".overlay").off("click");
                $(".overlay").remove();
            })
            .on("click", ".overlay-img", function( event ){
                event.stopPropagation();
            });
    };

    function animateOverlay() {
        $(".overlay").animate({ "background-color" : "rgba(0, 0, 0, .85)" }, 200);
    };

});

Fiddle

Answer 1

我使用支持图片，网址和视频的永恒插件：

HTML5lightbox

如何在Javascript灯箱中打开iframe

1 个答案: