PhotoSwipe jQuery 手机

Question

var pswpElement = document.querySelectorAll('.pswp')[0];
$('.list').on('click', 'a', function (e) {
    console.log(this.id);
    var ID = this.id;
    var items = [{
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
    }, {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
    }];
    var options = {
        galleryUID: ID,
        showAnimationDuration: 500,
        hideAnimationDuration: 500,
        closeOnVerticalDrag: false,
        closeOnScroll: false,
        spacing: 0,
        history: true,
        focus: true,
        closeEl: false,
        captionEl: false,
        fullscreenEl: false,
        zoomEl: false,
        shareEl: false,
        arrowEl: false,
        loop: false,
        indexIndicatorSep: ' of ',
        tapToToggleControls: false,
        escKey: false,
        modal: true
    };

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

    gallery.init();
});

我需要根据目标元素的 ID 加载不同的图库。

单击后，我需要使用 jquery page 并显示 header、footer 以及侧面 panel。我可以直接使用 photoswipe，但使用 panel 对我来说很重要，它仅在视图为 page.

时才有效

目前，如果您看到图库似乎已加载但未在内容区域中正确显示。

Answer 1

原来我并没有在等待页面加载，这成功了：

$( "body" ).pagecontainer({
    transition: function( event, ui ) {
        // load photoswipe here
    }
});

PhotoSwipe jQuery 手机

PhotoSwipe with jQuery Mobile

javascript

jquery

jquery-mobile

photoswipe