在幻灯片和关闭时 Photowipe 触发事件

Question

我正在使用此脚本来控制Photoswipe图库。我还包含了一些自定义 html，因此我可以播放带有 <video> 标签的 html5 视频。但是当我转到"下一张幻灯片"或点击"关闭图库"按钮时，视频中的声音会继续播放。

所以首先。我可以为<video>代码触发停止视频事件吗？其次
如何在更改幻灯片或点击关闭按钮时触发该事件？

(function() {
var initPhotoSwipeFromDOM = function(gallerySelector) {
// parse slide data (url, title, size ...) from DOM elements 
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
    var thumbElements = Array.prototype.slice.call(document.querySelectorAll('.all_gallery')),
        numNodes = thumbElements.length,
        items = [],
        figureEl,
        linkEl,
        size,
        item;
    for(var i = 0; i < numNodes; i++) {
        figureEl = thumbElements[i]; // <figure> element
        // include only element nodes 
        if(figureEl.nodeType !== 1) {
            continue;
        }
        linkEl = figureEl.children[0]; // <a> element
        // create slide object
          if ($(linkEl).data('type') == 'video') {
            item = {
              html: $(linkEl).data('video')
            };
          } else {
            size = linkEl.getAttribute('data-size').split('x');
            item = {
              src: linkEl.getAttribute('href'),
              w: parseInt(size[0], 10),
              h: parseInt(size[1], 10)
            };
          }
        if(figureEl.children.length > 1) {
            // <figcaption> content
            item.title = figureEl.children[1].innerHTML; 
        }
        if(linkEl.children.length > 0) {
            // <img> thumbnail element, retrieving thumbnail url
            item.msrc = linkEl.children[0].getAttribute('src');
        } 
        item.el = figureEl; // save link to element for getThumbBoundsFn
        items.push(item);
    }
    return items;
};
// find nearest parent element
var closest = function closest(el, fn) {
    return el && ( fn(el) ? el : closest(el.parentNode, fn) );
};

// triggers when user clicks on thumbnail
var onThumbnailsClick = function(e) {
    e = e || window.event;
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    var eTarget = e.target || e.srcElement;
    // find root element of slide
    var clickedListItem = closest(eTarget, function(el) {
        return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
    });
    if(!clickedListItem) {
        return;
    }
    // find index of clicked item by looping through all child nodes
    // alternatively, you may define index via data- attribute
    var clickedGallery = document.querySelectorAll('.nymf-gallery')[0], childNodes = Array.prototype.slice.call(document.querySelectorAll('.all_gallery')),
        numChildNodes = childNodes.length,
        nodeIndex = 0,
        index;
    for (var i = 0; i < numChildNodes; i++) {
        if(childNodes[i].nodeType !== 1) { 
            continue; 
        }
        if(childNodes[i] === clickedListItem) {
            index = nodeIndex;
            break;
        }
        nodeIndex++;
    }

    if(index >= 0) {
        // open PhotoSwipe if valid index found
        openPhotoSwipe( index, clickedGallery );
    }
    return false;
};
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
    var pswpElement = document.querySelectorAll('.pswp')[0],
        gallery,
        options,
        items;
    items = parseThumbnailElements(galleryElement);
    // define options (if needed)
    options = {
        // define gallery index (for URL)
        galleryUID: galleryElement.getAttribute('data-pswp-uid'),
        getThumbBoundsFn: function(index) {
            // See Options -> getThumbBoundsFn section of documentation for more info
            var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                rect = thumbnail.getBoundingClientRect(); 
            return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
        }
    };
    // PhotoSwipe opened from URL
    if(fromURL) {
        if(options.galleryPIDs) {
            // parse real index when custom PIDs are used 
            // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
            for(var j = 0; j < items.length; j++) {
                if(items[j].pid == index) {
                    options.index = j;
                    break;
                }
            }
        } else {
            // in URL indexes start from 1
            options.index = parseInt(index, 10) - 1;
        }
    } else {
        options.index = parseInt(index, 10);
    }
    // exit if index not found
    if( isNaN(options.index) ) {
        return;
    }
    //if(disableAnimation) {
        options.showHideOpacity = 1000;
        options.showAnimationDuration = 1;
        options.hideAnimationDuration = 1;
    //}
    // Pass data to PhotoSwipe and initialize it
    gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};
// loop through all gallery elements and bind events
var galleryElements = document.querySelectorAll( gallerySelector );
for(var i = 0, l = galleryElements.length; i < l; i++) {
    galleryElements[i].setAttribute('data-pswp-uid', i+1);
    galleryElements[i].onclick = onThumbnailsClick;
}
// Parse URL and open gallery if it contains #&pid=3&gid=1
var hashData = photoswipeParseHash();
if(hashData.pid && hashData.gid) {
    openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
}
};
    initPhotoSwipeFromDOM('.nymf-gallery');
})();

Answer 1

Photowipe 文档解释了收听事件。

使用 jQuery：

// Listen for Photoswipe close then pause all videos of class
gallery.listen('unbindEvents', function() {
  $(".yourVideoClass").each(function(){
    $(this).get(0).pause();
  });
});
// Listen for change slide navigation then pause all videos of class
gallery.listen('beforeChange', function() {
  $(".yourVideoClass").each(function(){
    $(this).get(0).pause();
  });
});