按钮单击时的放大弹出窗口答案

【问题标题】：Magnific popup on button click按钮单击时的放大弹出窗口
【发布时间】：2017-09-20 16:16:24
【问题描述】：

在我的一生中，我无法让它工作。我只想点击一个视频按钮来调出我的视频库。

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

如果有人可以帮助我，我将不胜感激。

【问题讨论】：

你说它是隐藏的所以......你试过取消隐藏它吗？

标签： jquery html magnific-popup

【解决方案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() {...}

【讨论】：

感谢您的建议，您的想法为我指明了解决问题所需的正确方向。我已经发布了自己的答案。

【解决方案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 '';
            }
        }
    }
);

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

【讨论】：