单击按钮时弹出的强大功能

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设置为container：

<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可以读取并在视频容器中打开的链接。我的第二个错误是没有意识到我基本上需要模拟两次点击。

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 '';
            }
        }
    }
);

通过模拟一个名为"first- video“的类的点击，Magnific可以打开我隐藏的视频库，允许用户通过Magnific浏览视频列表。通过只在第一个视频链接上有一个类，我知道用户总是先打开那个视频链接。