Photoswipe + JQM：回事件问题

  $（document）.on（“pagecreate”，function（）{
             $ .jsonp（{
                 url：'URL_TO_GET_JSONP'，
                 callbackParameter：'get_photo'，
                成功：函数（json，status）{
                     var photo = [];
                     var path ='URL_TO_GET_JSONP';
                     $ .each（json，function（a，b）{
                         photo.push（” 
  “）;
                         photo.push（ ''）;
                         photo.push（” 
  “）;
                     }）;
                     $（ '画廊 '）HTML（photo.join（''））;

                     var myPhotoSwipe = $（“。gallery a”）。photoSwipe（{ 
                         enableMouseWheel：false，
                     }）
                 }，
                错误：function（）{
                    警报（“无法加载照片。”）;
                 }
             }）;
         }）;

我遇到了图库和浏览器后退按钮的问题。 与小（x）按钮相反，用户更有可能按下他们的后退按钮离开画廊。 问题是，当您使用后退按钮时，您最终会在空白页面上没有导航或内容只是页面背景。 （例如： http ： //www.photoswipe.com/latest/examples/04-jquery-mobile.html ）

它有什么工作吗？

Answer 1

我自己仍在寻找答案，但也许这会对你有所帮助。

jQuery Mobile使用哈希来保留历史记录中的页面并导航回来。 当使用Photoswipe进入轮播模式时，事件处理程序附加到后退事件（关闭（x）按钮只不过是在历史记录中返回到图库索引页面）。 使用close（x）按钮分离事件处理程序并将控制权交还给jQuery Mobile。 使用设备的后退按钮离开旋转木马不起作用，因为不知何故哈希列表搞砸了jQuery Mobile。

如果我找到修复程序，我会在此处发布。

（已编辑添加解决方案。）

我找到了一个适合我的解决方案。

您需要做两件事：1）从body标签中删除ps-active类2）找到所有photoswipe实例并取消设置它们

以下代码对我有用：

$(document).bind('pagebeforechange', function(e) { if ($('.ps-carousel').length) { $('body').removeClass('ps-active'); $('div.gallery-page').each(function(){ var photoSwipe = window.Code.PhotoSwipe; var photoSwipeInstance = photoSwipe.getInstance($(this).attr('id')); if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) { photoSwipe.unsetActivateInstance(photoSwipeInstance); } }); } }); 

请注意，如果您没有使用照片组示例中使用的相同类，则需要更改“div.gallery-page”（例如http://www.photoswipe.com/latest/examples/04-jquery-mobile .html ）

Answer 2

我找到了解决方案。 请看一下。

 $就（{
         url：URL_TO_GET_JSON，
        成功：函数（json，status）{
             var p = [];
             $ .each（json，function（a，b）{
                 //在这里绘制图像
             }）;
             $（ '画廊 '）HTML（photo.join（''））;


         //在这里创建实例        
             var myPhotoSwipe = $（“。gallery a”）。photoSwipe（{ 
                 enableMouseWheel：false，
             }）

           / ********** UNSET INSTANCES HER**** ***************** /

             $（document）.bind（'pagebeforechange'，function（e）{
                 if（$（'。ps-carousel'）。length）{
                     $（ '主体'）removeClass（ 'PS-活性'）;
                     var photoSwipe = window.Code.PhotoSwipe;
                     var photoSwipeInstance = photoSwipe.getInstance（$（myPhotoSwipe）.attr（'id'））;
                     if（typeof photoSwipeInstance！=“undefined”&& photoSwipeInstance！= null）{
                         photoSwipe.unsetActivateInstance（photoSwipeInstance）;
                         photoSwipe.detatch（photoSwipeInstance）;
                     }
                 }
             }）;
         }
     }）;

Answer 3

我已经投了另一个答案，但经过更多的测试意识到它不能持续工作。 在查看了照片源代码后，我意识到最好使用自己的hide（）函数，而不是试图找出一种不同的关闭方法。

这对我来说仍然不是很完美，有时后退按钮会关闭叠加层，有时它会移回上一页，这是我不想要的。 但至少在这种方式下，我在压下后永远不会卡住。

我使用photoSwipe对象返回的实例数组，并检查是否通过设置documentOverlay可见：

 $(document).on('pagebeforechange', function(e) { if ($('.ps-carousel').length) { var photoSwipe = window.Code.PhotoSwipe; for( i = 0 ; i < photoSwipe.instances.length ; i++ ) { if( !Code.Util.isNothing( photoSwipe.instances[i].documentOverlay ) ) { photoSwipe.instances[i].hide(); } } } });