Photoswipe gallery close event on iOS

Question

I've implemented the fabulous photoswipe library in one of my recent mobile applications using jQueryMobile and I've run into a small problem using it in tandem with iOS 5 (could be others, but I've only got a iOS 5 device).

Below is a the implemented javascript

<script type="text/javascript">

    (function (window, $, PhotoSwipe) {

        $(document).ready(function () {

            $('div.gallery-page')
                    .live('pageshow', function (e) {

                        var 
                            currentPage = $(e.target),
                            options = {},
                            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));

                        photoSwipeInstance.show(0);

                        return true;

                    })

                    .live('pagehide', function (e) {

                        var 
                            currentPage = $(e.target),
                            photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

                        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                            PhotoSwipe.detatch(photoSwipeInstance);
                        }
                        console.log($(e.target));
                        history.back();

                        return true;

                    });

        });

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

</script>

The example above is pretty much exactly as the implementation guide says with one difference: when the pageshow event is raised and the instance has been attached, I'm calling "photoSwipeInstance.show(0);" so as to display the gallery immediately.

This all works fine except that when I close the gallery from the toolbar, it goes back to the static page rather than the page it was called from.

My first thought was to implement a method against the event "onHide" and perform a "history.back();" statement:

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
    history.back();
});

This worked like a charm on Android, but nothing happened on iOS, so I thought about a double history back for iOS devices:

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
    console.log(navigator.appVersion);
    if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        history.go(-2);
    } else {
        history.back();
    }

});

But still no luck, iOS just sits there and laughs at me. Does anyone know the best way to redirect back to the page that attached the photoswipe instance rather than going back to the actual html page? Here is an example of the final JS markup:

<script type="text/javascript">

(function (window, $, PhotoSwipe) {

    $(document).ready(function () {

        $('div.gallery-page')
                .live('pageshow', function (e) {

                    var 
                        currentPage = $(e.target),
                        options = {},
                        photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));

                    // onHide event wire back to previous page.
                    photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
                        console.log(navigator.appVersion);
                        if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
                            history.go(-2);
                        } else {
                            history.back();
                        }

                    });

                    photoSwipeInstance.show(0);

                    return true;

                })

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

</script>

Answer 1

I had a similar problem - i believe that the onHide event on iOS is not firing, so I solved it by listening to ToolBar events:

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onToolbarTap, function(e){
if(e.toolbarAction === 'close'){
    //i needed to use a specific location here: window.location.href = "something";
    //but i think you could use the history back
    history.back();
}
});