单击时照片滑动关闭

Question

当我点击照片然后 photoswipe 正常活动时出现问题

但是当我想在视频播放器外部点击关闭时。它不工作。它对图像幻灯片工作正常，但当视频时它不再工作了。

请帮助我真的不知道如何解决这个问题。

这是我的Photoswipe JS代码

var parseThumbnailElements = function(el) {
    var items = [];
    var item;
    el.each(function(){
        if ($(this).attr('href').match(/youtube/)) {
             item = {
                html:  '<div class="d-flex justify-content-center w-100 h-100">' +
                '<iframe width="80%" height="100%" src="'+ $(this).attr('href') +'" frameborder="0" allowfullscreen></iframe>' +
                '</div>'
            };
        } else {
             item = {
                src: $(this).attr('href'),
                w: $(this).data('w'),
                h: $(this).data('h'),
                msrc: $(this).find('img').attr('src')
            };
        }
        item.el = $(this);
        items.push(item);
    });

    return items;
};

var openPhotoSwipe = function(el) {
    var pswpElement = document.querySelectorAll('.pswp')[0];
    var index = el.eq();
    // build items array
    var items = parseThumbnailElements(el);

    // define options (if needed)
    var options = {
        index: index,
        getThumbBoundsFn: function(index) {

            // See Options -> getThumbBoundsFn section of documentation for more info
            var thumbnail = items[index].el.find('img').get(0), // find thumbnail
                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                rect = thumbnail.getBoundingClientRect();

            return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
        }
    };

    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};

(function($){
    $(document).on('click', '.photoswipe', function(e){
        e.preventDefault();
        // if image object do this
        if ($(this).hasClass('image-gallery__img--show')) {
            openPhotoSwipe($(this).closest('.image-gallery__img').find('.photoswipe'));
        } else {
            // if video then to this
            openPhotoSwipe($(this));
        }
    });
})(jQuery);

Answer 1

1。为什么我不能点击 iframe 来关闭它？

我刚把它改成从

item = {
    html:  
        '<div class="d-flex justify-content-center w-100 h-100">' +
            '<iframe width="80%" height="100%" src="'+ $(this).attr('href') +'" frameborder="0" allowfullscreen></iframe>' +
        '</div>'
};

到

item = {
    html:
        '<div class="video-wrapper">' +
            '<div class="video-wrapper-inside">' +
                '<iframe width="960" height="640" src="'+ $(this).attr('href') +'" frameborder="0" allowfullscreen></iframe>' +
            '</div>' +
        '</div>'
};

.video-wrapper {
    line-height: 0;
    width: 100%;
    max-width: 900px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.video-wrapper-inside {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    width: 100%;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

2。如何使用 iframe 停止播放来关闭视频

在gallery.init();

后面加上这个关闭函数就可以了

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();

    gallery.listen('close', function() {
      $('iframe').each(function() {
        $(this).attr('src', $(this).attr('src'));
      });
    });

单击时照片滑动关闭

Photoswipe close when click

javascript

html

photoswipe

1。为什么我不能点击 iframe 来关闭它？

2。如何使用 iframe 停止播放来关闭视频