PhotoSwipe：响应式图像示例

Question

使用此CodePen中的JS http://codepen.io/dimsemenov/pen/ZYbPJM我想将响应式图像添加为功能。

我可以简单地替换：

        // create slide object
        item = {
            src: linkEl.getAttribute('href'),
            w: parseInt(size[0], 10),
            h: parseInt(size[1], 10)
        };

与

var items = [

    // Slide 1
    {
        mediumImage: {
            src: 'path/to/medium-image-1.jpg',
            w:800,
            h:600
        },
        originalImage: {
            src: 'path/to/large-image-1.jpg',
            w: 1400,
            h: 1050
        }
    },

    // Slide 2
    // {
    //     mediumImage: {
    //         src: 'path/to/medium-image-2.jpg',
    //         ...
    //     
    // ...

];

然后添加

// create variable that will store real size of viewport
var realViewportWidth,
    useLargeImages = false,
    firstResize = true,
    imageSrcWillChange;

// beforeResize event fires each time size of gallery viewport updates
gallery.listen('beforeResize', function() {
    // gallery.viewportSize.x - width of PhotoSwipe viewport
    // gallery.viewportSize.y - height of PhotoSwipe viewport
    // window.devicePixelRatio - ratio between physical pixels and device independent pixels (Number)
    //                          1 (regular display), 2 (@2x, retina) ...


    // calculate real pixels when size changes
    realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;

    // Code below is needed if you want image to switch dynamically on window.resize

    // Find out if current images need to be changed
    if(useLargeImages && realViewportWidth < 1000) {
        useLargeImages = false;
        imageSrcWillChange = true;
    } else if(!useLargeImages && realViewportWidth >= 1000) {
        useLargeImages = true;
        imageSrcWillChange = true;
    }

    // Invalidate items only when source is changed and when it's not the first update
    if(imageSrcWillChange && !firstResize) {
        // invalidateCurrItems sets a flag on slides that are in DOM,
        // which will force update of content (image) on window.resize.
        gallery.invalidateCurrItems();
    }

    if(firstResize) {
        firstResize = false;
    }

    imageSrcWillChange = false;

});


// gettingData event fires each time PhotoSwipe retrieves image source & size
gallery.listen('gettingData', function(index, item) {

    // Set image source & size based on real viewport width
    if( useLargeImages ) {
        item.src = item.originalImage.src;
        item.w = item.originalImage.w;
        item.h = item.originalImage.h;
    } else {
        item.src = item.mediumImage.src;
        item.w = item.mediumImage.w;
        item.h = item.mediumImage.h;
    }

    // It doesn't really matter what will you do here, 
    // as long as item.src, item.w and item.h have valid values.
    // 
    // Just avoid http requests in this listener, as it fires quite often

});


// Note that init() method is called after gettingData event is bound
gallery.init();

介于

之间

        // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

        // insert responsive image code here 
        gallery.init();

item和items是两个不同的对象，因此我不确定在哪里放置。

从PhotoSwipe repo的网站文件夹查看index.html，该文件的JS部分中有响应式图像代码但是不起作用，PhotoSwipe未初始化，因此repo的默认示例不起作用（或需要额外的代码才能工作/初始化？）

是否有适用于PhotoSwipe响应式图像的工作示例？