javascript - 在 photoswipe 中调用函数时选择 var

Question

我正在使用photoswipe因为我喜欢它的功能来创建三个简单的图像 slider ，我希望它们保持响应。我可以使用以下代码轻松创建一个画廊:

var openPhotoSwipe = function() {

    var pswpElement = document.querySelectorAll('.pswp')[0];
    var options = {};

    var items = [

        // Slide 1
        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=59',
                w:800,
                h:600
            },
            originalImage: {
                src: 'https://unsplash.it/1400/1050?image=59',
                w: 1400,
                h: 1050
            }
        },

        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=61',
                w:800,
                h:600
            },
            originalImage: {
                src: 'https://unsplash.it/1400/1050?image=61',
                w: 1400,
                h: 1050
            }
        },

        {
            mediumImage: {
                src: 'https://unsplash.it/800/600?image=64',
                w:800,
                h:600
            },
            originalImage: {
                src: 'https://unsplash.it/1400/1050?image=64',
                w: 1400,
                h: 1050
            }
        }

    ];

    // initialise as usual
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

    // 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();

} //open photoswipe

document.getElementById('gallery1').onclick = openPhotoSwipe;

我可以复制并粘贴它来创建其中三个，但由于唯一需要更改的是图库项目，我认为这相当低效。

是否可以创建三个 var items = [] 并在使用按钮打开图库时选择要选择的项目？例如:

var items_gal1 = []
var items_gal2 = []
var items_gal3 = []

document.getElementById('gallery1').onclick = openPhotoSwipe(items_gal1);
document.getElementById('gallery2').onclick = openPhotoSwipe(items_gal2);
document.getElementById('gallery3').onclick = openPhotoSwipe(items_gal3);

在我的函数内部调用 var items = [] 字符串:

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

所以我想这就是我必须修改的内容？

JSFIDDLE DEMO

Answer 1

你们很接近。只需将您的项目作为参数传递给 openPhotoSwipe 函数即可:

var openPhotoSwipe = function(items) {

   // remove "var items = [...]" from here

}

然后将适当的项目传递给 onclick 事件处理程序，如下所示:

document.getElementById('gallery1').onclick = function() { openPhotoSwipe(items_gal1) };
document.getElementById('gallery2').onclick = function() { openPhotoSwipe(items_gal2) };
document.getElementById('gallery3').onclick = function() { openPhotoSwipe(items_gal3) };

工作中的 JSFiddle: https://jsfiddle.net/LukaszWiktor/j7zo5Lvk/