Javascript 在Photosweep中调用函数时选择var

我喜欢使用它的功能来创建三个简单的图像滑块，我想保持响应。我可以使用以下代码轻松创建一个图库：

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 gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

所以我想这就是我要修改的

---

你非常接近。只需将项目作为参数传递给

openphotosweep

函数：

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

---

正在工作的JSFIDLE:

您非常接近。只需将项目作为参数传递给

openphotosweep

函数：

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

---

工作JSFIDLE:

嗯，我想你可以为此付出很大的努力。您可以将三个item变量存储在一个数组中，并使用ID中的数字选择要使用的变量<代码>变量id=$（this.attr（'id'）；id=id.replace（'gallery'，''）；var gallery=新的Photosweep（pswpElement，Photosweepui_默认值，项目[id]，选项）等等这似乎是个好主意！嗯，我想你可以为此付出很大的努力。您可以将三个item变量存储在一个数组中，并使用ID中的数字选择要使用的变量<代码>变量id=$（this.attr（'id'）；id=id.replace（'gallery'，''）；var gallery=新的Photosweep（pswpElement，Photosweepui_默认值，项目[id]，选项）等等这似乎是个好主意！