Question

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

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

你非常接近。只需将您的项目作为参数传递给$("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");函数：

openPhotoSwipe

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

var openPhotoSwipe = function(items) {

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

}

使用JSFiddle：https://jsfiddle.net/LukaszWiktor/j7zo5Lvk/

在photoswipe中调用函数时选择var

1 个答案: