How to integrate photoswipe inside jquerymobile pages?

ajax django jquery-mobile photoswipe

12,931

You should take a look at the examples provided by Photoswipe and how they are initializing photoswipe in their sample galleries.

I'm using this, which also ensures you can call more than one photoswipe-gallery on a multipage and also allows different HTML containers for the images. Feel free to modifiy to your need:

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

12,931

Author by

Tonymx

Updated on June 04, 2022

Comments

Tonymx almost 2 years

I am trying to implement photoswipe inside my jquerymobile application. I am using jquerymobile & Django to develop my application and now I want to setup a gallery on one my pages. Basically I have 3 pages, page 1 is the the category index, then I got a subcategory index for each category and finally I goto a detail item page.

On the itemPage I put the code to handle the photoswipe library however it doesn't work as I expected because the content of the page is loaded via ajax ( I have to do a full refresh in order to load the photoswipe scripts) I know I can solve the issue, calling the subctageory level links with rel="external", but this cause a total refresh on Itempage and I want to keep the smooth transitions between pages. So I need to know how to setup the code for photoswipe before page load.

The code below is from the itemPage level( I put the code from the photoswipe demo inside)

<!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>

I put the script to handle the gallery inside <div data-role="page" id="Home"> since If I put the code in the head is never executed for the ajax call. However when I executed the code above, the page doesn't show the last level(itempage never appears) I guess the problem can be fixed changing ther way the page is loaded with some code like below inside <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!');
          });

but how I can call the photoswipe script, If I replaced the code from alert function with

(function(window, PhotoSwipe){

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

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

            }, false);


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

it doesn't work? the page doesn't load Hope you can help me!

Thanks