CODEWITHSUNDEEP
cssfancyboxfancybox-2
gota
gota

Reputation: 2659

Preventing fancybox returning to top of page

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

Upvotes: 0

Views: 2396

Answers (2)

samueldy
samueldy

Reputation: 103

Update: seems not to work if you trigger the Fancybox while on a URL that points to a tag with an ID (e.g., "https://example.com/#currentsection"). When you exit the Fancybox, it doesn't go to the top of the page, but does scroll to the top of the tag with the ID, even if you've set the autoFocus and placeFocusBack options to false. Strangely, it still works if your URL is pointed at #top.

Original answer

I found that when using Fancybox in Next.js, binding or configuring Fancybox with autoFocus set to false fixed this. It then seems that placeFocusBack property (default: true) will apply. Set it up like so:

npm install --save @fancyapps/ui

components/fancybox-wrapper.js:

// Fancybox UI wrapper for lightbox
// Thanks to https://fancyapps.com/docs/ui/fancybox/react
import React, { useEffect } from "react";

import { Fancybox as NativeFancybox } from "@fancyapps/ui/dist/fancybox.esm.js";

function Fancybox(props) {
  const delegate = props.delegate || "[data-fancybox]";

  useEffect(() => {
    const opts = props.options || {};

    NativeFancybox.bind(delegate, opts);

    return () => {
      NativeFancybox.destroy();
    };
  }, []);

  return <>{props.children}</>;
}

export default Fancybox;

pages/_app.js:

import Fancybox from "../components/fancybox-wrapper";
import "@fancyapps/ui/dist/fancybox.css";
import { SSRProvider } from "@react-aria/ssr";

function MyApp({ Component, pageProps }) {
  return (
    <SSRProvider>
      <Fancybox options={{ infinite: false, autoFocus: false }}>
        <Component {...pageProps} />
      </Fancybox>
    </SSRProvider>
  );
}

export default MyApp;

Upvotes: 2

Farshad
Farshad

Reputation: 1485

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/

Upvotes: 0

Related Questions