Phonegap and PhotoSwipe in ajax call

Question

I have a problem using Phonegap and PhotoSwipe; I want to call a ajax page that contains the photo gallery; but in this case PhotoSwipe doesn't work. It Seems very easy.

Thanks for the help

Henry

This is my Javascript:

$(document).on('pageshow','#photo', function(){

    console.log("photo1");

    (function(window, $, PhotoSwipe){
        $(document).ready(function(){
        var options = {};
            $("#Gallery a").photoSwipe(options);

        });


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

});

This is the simple html:

 <!-- Start of page - GALLERY -->
 <div data-role="page" id="photo">

     <div data-role="header" data-theme="b" data-position="fixed">
         <a href="#page4" data-icon="arrow-l" data-transition="slide" data-direction="reverse">Back</a><h1>ABC</h1>
     </div><!-- /header -->

     <div data-role="content">

         <ul id="Gallery" class="gallery">

             <li><a href="/img/page/155/icon4.jpg" rel="external"><img src=""/img/page/155/icon.jpg" alt="Image 005" /></a></li>
             <li><a href="/img/page/155/icon4.jpg" rel="external"><img src=""/img/page/155/icon.jpg" alt="Image 006" /></a></li>
             <li><a href="/img/page/155/icon4.jpg" rel="external"><img src=""/img/page/155/icon.jpg" alt="Image 007" /></a></li>
             <li><a href="/img/page/155/icon4.jpg" rel="external"><img src=""/img/page/155/icon.jpg" alt="Image 008" /></a></li>
             <li><a href="/img/page/155/icon4.jpg" rel="external"><img src=""/img/page/155/icon.jpg" alt="Image 009" /></a></li>
             <li><a href="/img/page/155/icon4.jpg" rel="external"><img src="/img/page/155/icon.jpg" alt="Image 010" /></a></li>
         </ul>

     </div><!-- /content -->

 </div><!-- /page -->

Answer 1

when I click an photo from the list, the image is loading as a external page without Photoswipe effects.

this indicates that photoswipe is not being fired. Try removing document.ready event, because pageshow event is fired after document is ready.

$(document).on('pageshow','#photo', function(){

    console.log("photo1");

    (function(window, $, PhotoSwipe){
        var options = {};
        $("#Gallery a").photoSwipe(options);

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

});

Here is a simplified example of your code that works.