Fancyapps

Hash ​

This built-in plugin provides hash-based navigation:

  • starts Fancybox on page load if a matching element for the URL hash value is found;
  • updates URL hash value when navigating through gallery items;
  • closes Fancybox if it detects that the user is changing the URL hash (for example, by using the "Back" button in the browser).

The gallery name is used for the URL hash, e.g., the value of the data-fancybox attribute.

Customization ​

Custom values are supported using the data-slug attribute, example:

html
<a
  href="https://lipsum.app/id/32/1600x1200"
  data-fancybox="gallery"
  data-slug="cat"
>
  <img
    src="https://lipsum.app/id/32/200x150"
    width="200"
    height="150"
    alt="Sample image #1"
  />
</a>
Sample image #1Sample image #2Sample image #3

Troubleshooting ​

If you are having problems with hash navigation, disable this plugin. Example:

js
Fancybox.bind("[data-fancybox]", {
  Hash: false,
});

Note that it is not possible to make this plugin work perfectly in every scenario. It is easy to make the browser history entries contain several empty entries. This is because, due to privacy restrictions, it is not possible to determine, for example, what the previous page is in the history when a user presses "reload". Therefore, this plugin works by observing events like hashchange and tries to intelligently guess what exactly the user is doing and what the desired result is.