How to prevent page change on Back button when Fancybox image is fullscreen in JQM?

Question

The initial task is to handle hardware back button, when Fancybox image is in fullscreen mode. At now, when user press back button on phone, current page changes to previous and fulscreen image stays on foreground. The task is to close Fancybox image and stay at current page. I did it this way:

$(document).on("pagecontainerbeforechange", function (e, data) {
  if (typeof data.toPage == "string" && data.options.direction == "back") {
    if ($(".fancybox-is-open").length) {
      // close fancybox
      $.fancybox.close();

      // stay at current page
      data.toPage = '#' + $.mobile.activePage.data('url');
      $.extend(data.options, {
        changeHash: true
      });
    }
  }
});

Fancybox is closed, user stays at current page, but when he clicks on Back button again, he gets on page, which is before previous one. How correctly prevent page change?

Here is the example http://jsbin.com/sucodokoza/edit?html,js,output. Back button jumps from page 3 to page 1 instead of page 2. — ntym, Aug 21 '18 at 11:46

score 0 · Answer 1 · answered Sep 12 '18 at 12:15

Problem was solved by itself, when I started to use fancybox gallery widget. Old problem link was:

<a href="image_thumb" data-fancybox data-caption="caption"><img src="image_full" /></a>

New link is:

<a href="image_thumb" data-fancybox="gallery" data-caption="caption"><img src="image_full" /></a>

And no js additional code is required.

Guilherme Kich · Answer 2 · 2021-05-27T00:03:05.410

there might a solution also. I have the same problem. I think you have to add a "a" around your image such as, with only href to #:

<a href="#biggerImage"><img...> </a>

Then you have to create a js function to detect a hash change. With the hash change, you select your modal and close it. Add this javascript:

<script type="text/javascript">
     window.onhashchange = function() {
        //console.log(location.hash);  // for debbuging
        if(location.hash=="#biggerImage"){
          $('#myModal').show(); // $ is the jQuery selector - it will see the hash is for opening the image and it will show the Modal
        }
        else{
          $('#myModal').hide(); // $ is the jQuery selector - in the case where the user presses "BACK" button , the hash will not have the #biggerImage anymore, so the code will hide the Modal, giving the effect that the back button closes the Modal 
        }
      }

</script>

In the case where the user presses "BACK" button , the hash will not have the #biggerImage anymore, so the code will hide the Modal, giving the effect that the back button closes the Modal

How to prevent page change on Back button when Fancybox image is fullscreen in JQM?

2 Answers2