Hash-based navigation for ajax loaded gallery

[snitchyuk]

Hi,

I'm loving the fact that I can now click the back button to automatically close fancybox galleries, but I can't figure out how to do this when loading a gallery programmatically. I don't know if I'm missing something, or if it's just not possible. Here is the code I'm using the display a gallery when clicking a single image:

$(".images").on('click', function () { event.preventDefault(); $.ajax({ type: 'GET', url: '/ajax/images.php, dataType: 'json', success: function (data) { Fancybox.show(data); } }); });

Is there a way to load this gallery, and also be able to use the back button on the browser to close the gallery?

[fancyapps]

Hi,

The latest release added support for custom hash for manually opened galleries. Upgrade and use it like this:

Fancybox.show(data, {slug : 'gallery'});

Keep in mind that this will just add #gallery to URL and will remove when Fancybox closes, even when back button is used. But, if user will later use forward button, then browser will add #gallery, but Fancybox will not start. The same will happen if user opens page with already included hash value. So, if you want to provide full functionality, you will have to implement it yourself. Here is an example:

const gallery_items = [
  {
    src: 'https://lipsum.app/id/32/1600x1200',
    thumb: 'https://lipsum.app/id/32/200x150',
  },
  {
    src: 'https://lipsum.app/id/22/1600x1200',
    thumb: 'https://lipsum.app/id/22/200x150',
  },
  {
    src: 'https://lipsum.app/id/23/1600x1200',
    thumb: 'https://lipsum.app/id/23/200x150',
  },
];

const gallery_options = {
  slug: 'gallery',
  startIndex: 0,
};

document
  .getElementById('trigger-fancybox')
  .addEventListener('click', function () {
    gallery_options.startIndex = 0;

    Fancybox.show(gallery_items, gallery_options);
  });

function startFancyboxFromUrl() {
  if (!Fancybox.getInstance()) {
    const { hash, slug, index } = Fancybox.Plugins.Hash.getParsedURL();

    if (hash && slug === gallery_options.slug) {
      gallery_options.startIndex = index - 1;

      Fancybox.show(gallery_items, gallery_options);
    }
  }
}

window.addEventListener('hashchange', startFancyboxFromUrl, false);

startFancyboxFromUrl();

Demo - https://stackblitz.com/edit/js-nkxhny?file=index.js

[snitchyuk]

Brilliant!

I must have come so close to getting this, as I tried setting the slug option whilst I was testing (I guessed it was called slug or hash) but obviously I was doing something wrong because it's working now. But it was worth asking anyway because I wouldn't have thought to implement your additional code to check for the hash on page load, which is going to make it even better.

Many thanks for the help, and for replying so quickly