Как интегрировать photoswipe внутри jquerymobile страниц? - PullRequest
Новая
       13

Как интегрировать photoswipe внутри jquerymobile страниц?

2 голосов
/ 23 марта 2012

Я пытаюсь реализовать photoswipe внутри моего приложения jquerymobile. Я использую jquerymobile и Django для разработки своего приложения, и теперь я хочу настроить галерею на одной из моих страниц. В основном у меня есть 3 страницы, страница 1 - это индекс категории, затем я получил индекс подкатегории для каждой категории, и, наконец, я перехожу на страницу с подробным описанием.

На itemPage я поместил код для обработки библиотеки photoswipe, однако он не работает так, как я ожидал, потому что содержимое страницы загружается через ajax (мне нужно сделать полное обновление, чтобы загрузить сценарии photoswipe) Я знаю, что могу решить эту проблему, вызывая ссылки на уровне подкатегорий с rel = "external", но это вызывает полное обновление Itempage, и я хочу сохранить плавные переходы между страницами. Поэтому мне нужно знать, как настроить код для photoswipe перед загрузкой страницы.

Код ниже взят из уровня itemPage (я поместил код из демонстрации photoswipe внутри) 

<!DOCTYPE html>
<html>
<head>
    <title>PhotoSwipe</title>
    <meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />
    <link href="{{ STATIC_URL }}styles/jquery-mobile.css" type="text/css" rel="stylesheet" />
    <link href="{{ STATIC_URL }}styles/photoswipe.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="{{ STATIC_URL }}scripts/lib/klass.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}scripts/code.photoswipe.jquery-3.0.4.min.js"></script>


</head>
<body>

<div data-role="page" id="Home">

    <script type="text/javascript">

        (function(window, PhotoSwipe){

            document.addEventListener('DOMContentLoaded', function(){

                var
                    options = {},
                    instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

            }, false);


        }(window, window.Code.PhotoSwipe));

    </script>



    <div data-role="header">
        <h1>PhotoSwipe</h1>
    </div>


    <div data-role="content" >  

        <p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>        

        <ul data-role="listview" data-inset="true">
            <li><a href="#Gallery1">First Gallery</a></li> 

        </ul> 

        <p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>

        <ul data-role="listview" data-inset="true">
            <li><a href="01-default.html" target="_blank">Code Computerlove</a></li> 
        </ul> 

    </div>

    <div data-role="footer">
        <h4>&copy; 2011 Code Computerlove</h4>
    </div>

</div>


<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">

    <div data-role="header">
        <h1>First Gallery</h1>
    </div>

    <div data-role="content">   

        <ul class="gallery">

            <li><a href="{{ STATIC_URL }}images/chichen1.jpg" rel="external"><img src="{{ STATIC_URL }}images/chichen1.jpg" alt="Image 001" /></a></li>
            <li><a href="{{ STATIC_URL }}images/002.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/002.jpg" alt="Image 002" /></a></li>
            <li><a href="{{ STATIC_URL }}images/003.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/003.jpg" alt="Image 003" /></a></li>
            <li><a href="{{ STATIC_URL }}images/004.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/004.jpg" alt="Image 004" /></a></li>
            <li><a href="{{ STATIC_URL }}images/005.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/005.jpg" alt="Image 005" /></a></li>
            <li><a href="{{ STATIC_URL }}images/006.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/006.jpg" alt="Image 006" /></a></li>
            <li><a href="{{ STATIC_URL }}images/007.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/007.jpg" alt="Image 007" /></a></li>
            <li><a href="{{ STATIC_URL }}images/008.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/008.jpg" alt="Image 008" /></a></li>
            <li><a href="{{ STATIC_URL }}images/009.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/009.jpg" alt="Image 009" /></a></li>

        </ul>

    </div>

    <div data-role="footer">
        <h4>&copy; 2011 Code Computerlove</h4>
    </div>

</div>

</div>

</body>
</html>

Я поставил скрипт для обработки галереи внутри <div data-role="page" id="Home"> Т.к. если я положу код в голову, то никогда не будет выполнен вызов ajax. Однако, когда я выполнил код выше, страница не показывает последний уровень (itempage никогда не появляется) Я полагаю, что проблему можно решить, изменив способ загрузки страницы с некоторым кодом, как показано ниже <div data-role="page" id="Home">

$( document ).delegate("#Home", "pagebeforecreate", function() {
             alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
          });

но как я могу вызвать скрипт photoswipe, если я заменил код из функции оповещения на 

(function(window, PhotoSwipe){

            document.addEventListener('DOMContentLoaded', function(){

                var
                    options = {},
                    instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

            }, false);


        }(window, window.Code.PhotoSwipe));

это не работает? страница не загружается Надеюсь, вы можете помочь мне!

Спасибо

Ответы [ 2 ]

1 голос
/ 24 марта 2012

Вы должны взглянуть на примеры , предоставленные Photoswipe, и на то, как они инициализируют photoswipe в своих галереях образцов.

Я использую это, что также гарантирует, что вы можете позвонить большечем одна фотогалерея на многостраничной, а также позволяет использовать различные HTML-контейнеры для изображений.Не стесняйтесь изменять ваши потребности: 

(function (window, $, PhotoSwipe) {

// still using live for photoswipe vs. on()/off()
$('div:jqmData(role="page")').live('pageshow', function (e) {

    var currentPage = $(e.target),
        options = {},
        // allow multiple galleries
        swipesOnPage = currentPage.find('.photoswipeable');

    // no photoswipe, we're done
    if (swipesOnPage.length == 0) {
        return false;
    }

    // if there are swipes init each
    swipesOnPage.each(function (i) {

        // make sure swipe is initialized once in case events bubble
        if ($(this).data('photoswipe') != 'init') {
            $(this).data('photoswipe', 'init');
            // init - make sure you add a class of swipeMe to your images!!
            var photoSwipeInstance = $(this).find(":not('.cloned') a.swipeMe", e.target).photoSwipe(options, currentPage.attr('id'));
        }
        return true;
    });
// un-init when leaving the page
}).live('pagehide', function (e) {

    var currentPage = $(e.target),
        photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

    if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
        PhotoSwipe.detatch(photoSwipeInstance);
    }

    return true;
});

}(window, window.jQuery, window.Code.PhotoSwipe));
0 голосов
/ 28 июля 2012

Добавьте data-ajax="false" к странице, вызывающей подстраницы.

Аналогичным образом добавьте к index.html для ссылки на portfolio.html.

Если у вас есть слайд-шоу на домашней странице, добавьте ссылку на portfolio.html для index.html.

...