Question

我使用Phonegap和PhotoSwipe时遇到问题;我想调用包含照片库的ajax页面;但在这种情况下PhotoSwipe不起作用。这似乎很容易。

感谢您的帮助

亨利

这是我的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));

});

这是简单的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

当我点击列表中的照片时，图像正在加载为没有Photoswipe效果的外部页面。

这表明照片没有被解雇。尝试删除document.ready事件，因为文档准备就绪后会触发pageshow事件。

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

    console.log("photo1");

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

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

});

Here是您的代码的简化示例。

ajax电话中的Phonegap和PhotoSwipe

1 个答案: