PhotoSwipe с jQuery Mobile

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

Мне нужно загрузить разные галереи на основе идентификатора целевого элемента.

После нажатия мне нужно использовать jquery page и показать header, footer, а также сторону panel. Я мог бы использовать фотосвайп напрямую, но для меня важно использовать panel, который работает только в том случае, если представление имеет вид page.

В настоящее время, если вы видите, что галерея загружается, но не отображается правильно в области содержимого.


javascript jquery jquery-mobile photoswipe
person eozzy    schedule 08.07.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оказалось, что я не ждал загрузки страницы, это помогло:

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