jquery-mobile - Photoswipe 库中的第一个选择不起作用

Question

我正在使用带有 jQ​​uery Mobile 的 Photoswipe 图库。第一个选择，当单击/点击时仅显示具有完整 URL 的图像，并且不适用于图库方式。当我返回并再次选择时，它工作正常。

谁能告诉我如何解决这个问题？

干杯!

Answer 1

当用户直接使用链接 photoswipe 进入 photoswipe 画廊页面时，不会初始化。例如，即使使用直接链接进行官方演示也会呈现此问题。链接：http ://www.photoswipe.com/latest/examples/04-jquery-mobile.html#Gallery1

尝试将 photoswipe 附加处理程序pageshow和pagehide事件的脚本放在jquery-mobile.js. 如果在用户第一次访问页面时不会触发处理程序后附加处理程序。

<script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>
<script type="text/javascript">
    (function(window, $, PhotoSwipe){

        $(document).ready(function(){
            $('div.gallery-page')
                .live('pageshow', function(e){
                    if( $('ul.gallery', e.target).length > 0 ){
                        var 
                            currentPage = $(e.target),
                            options = {},
                            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));

                            return true;
                    }
                })

                .live('pagehide', function(e){
                    if( $('ul.gallery', e.target).length > 0 ){
                        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));

</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>