Question

对于我的生活，我无法让它发挥作用。我只想点击一个视频按钮来拉动我的视频库。

HTML

{{-- Button for video gallery --}}

<div class="margin-top">
    <button class="button--video button video-gallery" data-mfp-src="video-gallery">
        <i class="fa fa-youtube-play fa-lg" aria-hidden="true"></i>
        Videos
    </button>
</div>

{{-- Video gallery, hidden because the user doesn't need to see this --}}
<section>
    <div class="video-gallery">

        <a class="magnific-youtube item" href="https://www.youtube.com/watch?v=0vrdgDdPApQ" data-title="item 1">Video #2</a>

        <a class="magnific-youtube item" href="https://www.youtube.com/watch?v=4RUGmBxe65U" data-title="item 1">Video #3</a>

        <a class="magnific-youtube item" href="https://www.youtube.com/watch?v=iNJdPyoqt8U" data-title="item 1">Video #4</a>

    </div>
</section>

的Javascript

$( ".button--video" ).click(function() {
    $('.video-gallery').magnificPopup({
            delegate: 'a',
            type: 'iframe',
            tLoading: 'Loading video #%curr%...',
            mainClass: 'mfp-iframe',
            gallery: {
                enabled: true
            },
            iframe: {
                tError: '<a href="%url%">This video #%curr%</a> could not be loaded.',
                titleSrc: function (item) {
                    return '';
                }
            }
        }
    );
});

如果有人能帮助我，我将非常感激。

Answer 1

如果问题是事件，您可以将id设置为容器：

<div id="container--video" class="margin-top">
    <button class="button--video button video-gallery" data-mfp-src="video-gallery">
        <i class="fa fa-youtube-play fa-lg" aria-hidden="true"></i>
        Videos
    </button>
</div>

事件：

$( "#container--video" ).click(".button--video", function() {...}

Answer 2

我的第一个错误是针对视频库容器，即不会启动Magnific弹出窗口，我需要定位Magnific Popup可以读取并在视频容器内打开的链接。我的第二个错误是没有意识到我需要基本上模拟两次点击。

HTML

<section>
    <div class="video-gallery is-hidden">

        <a class="first-video" href="https://www.youtube.com/watch?v=0vrdgDdPApQ" data-title="item 1">Video #2</a>

        <a href="https://www.youtube.com/watch?v=4RUGmBxe65U" data-title="item 1">Video #3</a>

        <a href="https://www.youtube.com/watch?v=iNJdPyoqt8U" data-title="item 1">Video #4</a>

    </div>
</section>

Java脚本

$('.button--video').click(function(){ //When user clicks the button
    $(".first-video").click();//simulate click on first video link
});

$('.video-gallery').magnificPopup({ //magnific makes a gallery from any links in this container.
        delegate: 'a',
        type: 'iframe',
        tLoading: 'Loading video #%curr%...',
        mainClass: 'mfp-iframe',
        gallery: {
            enabled: true
        },
        iframe: {
            tError: '<a href="%url%">This video #%curr%</a> could not be loaded.',
            titleSrc: function (item) {
                return '';
            }
        }
    }
);

通过模拟点击一个名为“第一视频”的类，Magnific弹出窗口可以打开我隐藏的视频库，允许用户通过Magnific弹出窗口浏览视频列表。通过仅在第一个视频链接上安排课程，我知道用户总是首先打开该视频链接。

单击按钮上的Magnific弹出窗口

2 个答案: