PhotoSwipe with jQuery Mobile

Question

https://jsfiddle.net/tavn3ccy/2/

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

I need to load different galleries based on the ID of the target element.

Upon clicking, I need to use the jquery page and show the header, footer as well as the side panel. I could use photoswipe directly, but its important for me to use the panel which only works if the view is a page.

Currently if you see the gallery seems to load but doesn't show up correctly in the content area.

Answer 1

Turned out I wasn't waiting for the page to load up, this did the trick:

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