首页 文章

将内容部分附加到视频灯箱

提问于
浏览 次
0

设置

我有几个缩略图，每个缩略图下都有一个描述（ Headers 段落） . 单击缩略图时，视频将在灯箱中播放 .

描述包含在类 .video-info 的div中 .

到目前为止，我的第一部分工作正常 .

目标

我需要在灯箱的视频下显示说明（ Headers 段落） .

基本上，当视频在灯箱模式下播放时，我需要将 .video-info 附加到视频中 .

问题

我无法弄清楚脚本中的哪个位置需要将函数_1187656_附加到视频中，当它显示在灯箱中时 .

HTML

<ul>
    <li>
        <a href="#" class="link-lightbox" data-videoid="CuH3tJPiP-U" data-videosite="youtube"><img src="http://placehold.it/200/339?text=YouTube" alt=""></a>
        <div class="video-info">
            <h6>Heading</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae consequuntur, labore animi assumenda aliquam asperiores!</p>
        </div>
    </li>
    <li>
        <a href="#" class="link-lightbox" data-videoid="108210854" data-videosite="vimeo"><img src="http://placehold.it/200/903?text=Vimeo" alt=""></a>
        <div class="video-info">
            <h6>Heading 2</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, nulla.</p>
        </div>
    </li>
</ul>

jQuery脚本

$(".link-lightbox").on("click", function(e) {
    e.preventDefault();
    if (window.innerHeight > 540) var a = (window.innerHeight - 540) / 2;
    var b =
        '<iframe src="" width="640" height="480" id="video-embed" style="border:0;"></iframe>',
        c = '<a href="#" id="close-icon"></a>',
        d = '<div class="lightbox" style="margin-top:' + a + 'px">',
        e = '<div id="back-lightbox">',
        f = '<div id="background-close"></div>',
        g = '<div id="window">',
        h = '</div></div></div>';
    if ($("body").append(g + f + e + d + c + b + h), $("#window").hide(),
        "youtube" == $(this).data("videosite")) var i =
        "http://www.youtube.com/embed/" + $(this).data("videoid") +
        "?autoplay=1";
    else if ("vimeo" == $(this).data("videosite")) var i =
        "http://player.vimeo.com/video/" + $(this).data("videoid") +
        "?autoplay=1";
    $("#window").fadeIn(), $("#video-embed").attr("src", i), $(
        "#close-icon").on("click", function(e) {
        e.preventDefault();
        $("#window").fadeOut("fast", function() {
            $(this).remove()
        })
    }), $("#background-close").on("click", function() {
        $("#window").fadeOut("fast", function() {
            $(this).remove()
        })
    })
}), $(document).on("keyup", function(a) {
    27 == a.keyCode && $("#window").fadeOut("fast", function() {
        $(this).remove()
    })
}), $(document).on("mouseover", function() {
    var a = (window.innerHeight - 540) / 2;
    $(".lightbox").attr("style", "margin-top:" + a + "px")
});

我尝试了什么

我认为这可以使用 .append() 或其中一个jQuery方法将元素附加到其他元素：

if ($("body").append(g + f + e + d + c + b + h).append(".video-info")

我也尝试在列表中添加一个变量，但它不起作用：

h = '</div></div></div>',
    z = '$(".video-info")'; //I tried adding it here and adding the variable name below
if ($("body").append(g + f + e + d + c + b + h + z), $("#window").hide(),

演示

你可以看到 demo in CodePen here

问题

知道如何将描述容器合并到视频灯箱中吗？

谢谢 .

jquery lightbox

1 回答

  • 0

    在我的朋友Jake Boyles的帮助下，我们能够修改脚本并在视频以Lightbox模式显示时将 .video-info 容器附加到视频中 .

    新脚本就是这个（注意代码中的注释）：

    $(".link-lightbox").on("click", function(e) {
    e.preventDefault();
    var info = $(this).parent().find('.video-info').html(); //CREATE VARIABLE HERE
    if (window.innerHeight > 540) var a = (window.innerHeight - 540) / 2;
    var b = '<iframe src="" width="640" height="480" id="video-embed" style="border:0;"></iframe>',
        c = '<a href="#" id="close-icon"></a>',
        d = '<div class="lightbox" style="margin-top:' + a + 'px">',
        e = '<div id="back-lightbox">',
        f = '<div id="background-close"></div>',
        g = '<div id="window">',
        h = '<div class="video-info">'+info+'</div></div></div></div>'; //ADD THE .video-info CONTAINER HERE
    if ($("body").append(g + f + e + d + c + b + h), $("#window").hide(),
        "youtube" == $(this).data("videosite")) var i =
        "http://www.youtube.com/embed/" + $(this).data("videoid") +
        "?autoplay=1";
    else if ("vimeo" == $(this).data("videosite")) var i =
        "http://player.vimeo.com/video/" + $(this).data("videoid") +
        "?autoplay=1";
    $("#window").fadeIn(), $("#video-embed").attr("src", i), $(
        "#close-icon").on("click", function(e) {
        e.preventDefault();
        $("#window").fadeOut("fast", function() {
            $(this).remove()
        })
    }), $("#background-close").on("click", function() {
        $("#window").fadeOut("fast", function() {
            $(this).remove()
        })
    })
}), $(document).on("keyup", function(a) {
    27 == a.keyCode && $("#window").fadeOut("fast", function() {
        $(this).remove()
    })
}), $(document).on("mouseover", function() {
    var a = (window.innerHeight - 540) / 2;
    $(".lightbox").attr("style", "margin-top:" + a + "px")
});

    The demo in CodePen已更新 .

    回复于

相关问题