0

In my website, I am using fancybox 2.1.5. when I open an image and close it I return to the top of the page unintentionally. The problem can be seen in the following minimal example

<!DOCTYPE html>
<head>
    <style media="screen" type="text/css">
        body {
            height: 100%;
        }
        html {
            height: 100%;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css?v=2.1.5" media="screen" />
</head>
<body>
    <a href=#>
        <img src="http://placehold.it/1000x600">
    </a>
    <a class="fancybox" href="img/Gallery/500x600.gif">
        <img src="http://placehold.it/500x600">
    </a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.js?v=2.1.5"></script>
    <script>
        $(document).ready(function() {
            $('.fancybox').fancybox();
        });
    </script>
</body>
</html>

You will see that if you open and close the second image you will find yourself at the top of the page.

It appears that if I delete the initial style in the head

<style media="screen" type="text/css">
    body {
        height: 100%;
    }
    html {
        height: 100%;
    }
</style>

The problem disappears. if I erase only the body style or the html style the problem also disappears. In order for the problem to appear both body and html heights must be to 100%

Unfortunately I don't understand why this is happening. Can someone please explain?

Note: I have found solutions and hacks to this problem but I would like to understand why this is happening

gota
  • 1,813
  • 2
  • 18
  • 38
  • 2
    Download the [latest master](https://github.com/fancyapps/fancyBox/archive/master.zip), where the bug was fixed ref: https://github.com/fancyapps/fancyBox/issues/860 – JFK Jul 05 '14 at 20:17
  • Thank you, I downloaded the latest master and it now works, but actually now when I open an image I see that the website in the back returns to the top and when I close the image it goes back to the original place. It is a bit wierd. Makes me think that the bug was fixed with a hack. Maybe it is something related to my body and html style definition, but I don't know – gota Jul 06 '14 at 20:24
  • possible duplicate of [fancybox2 / fancybox causes page to to jump to the top](http://stackoverflow.com/questions/13547007/fancybox2-fancybox-causes-page-to-to-jump-to-the-top) – Palec Jul 07 '14 at 10:05

1 Answers1

0

You can use native helper of fancy box to fix returning to top of page problem.

$('.fancybox').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

reference : http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

Farshad
  • 1,435
  • 1
  • 8
  • 12
  • Thank you for this hack, but I still didn't understand why this is happening and now I have the problem that I can scroll while viewing the image. Would rather not! But really thanks for the quick answer – gota Jul 05 '14 at 10:04
  • you have two options for disabling overlay scroll while fancybox is open 1). upgrade to v2.1.0 ... which automatically adds class="fancybox-lock" to the tag so you can't scroll the page behind fancybox - or - 2). Add these callbacks: beforeShow: function(){ $("body").css({'overflow-y':'hidden'}); }, afterClose: function(){ $("body").css({'overflow-y':'visible'}); } onStart and onClosed are NOT valid callback options for fancybox v2.x but 1.3.x – Farshad Jul 05 '14 at 10:12
  • Thank you, but I thought I was using 2.1.5 – gota Jul 05 '14 at 10:55
  • This is a temporary workaround to an issue that may create another for some scenarios (many people may not like to be able to scroll the content behind fancybox and this what will happen if locked is set to false.) This was a bug and it has been corrected in the latest master that you can download from here https://github.com/fancyapps/fancyBox/archive/master.zip – Farshad Jul 05 '14 at 11:02
  • @Farshad Please include explanation of what your code does and how it answers the question. If you get a code snippet as an answer, you may not know what to do with it. Answer should give the OP and future visitors guidance on how to debug and fix their problem. Pointing out, what the idea behind your code is, greatly helps in understanding the issue and applying or modifying your solution. Also please consider including your comment in the answer. – Palec Jul 05 '14 at 12:29
  • @Palec : if you read the question (edited 2 hours before your comment) you could read `?v=2.1.5` – JFK Jul 05 '14 at 20:21
  • @Farshad : copy/paste may be acceptable **IF** you refer to the source of your answer/comment instead of self-attribution (-1 because of that) – JFK Jul 05 '14 at 20:28