customize url of an image

[danielgimeno]

Hi there, is it possible to customice the url of an image with the title? I need to prepare the sitemap.xml of my site and I would need a proper url for every image, instead of #&gid=1&pid=3.
Thank you in advance, a great library!
Daniel.

[dimsemenov]

PhotoSwipe no longer implements functionality that modifies URL, you're probably referring to the old version. There are ways to implement a custom URL for each image, but this feature is not available out of the box.

[BilouMaster]

Hi,

If it helps, here's how I manage urls/history in my gallery...
(with the latest version of PhotoSwipe)

I'm very bad and not confident at javascript so this may be a very poor/spaghettish solution, yet it works...

The lightbox.pswp.currSlide.data.element.title / href part should be replaced by wherever the custom title/url is defined in your own model.

let noHistoryBack = false;
let noHistoryPush = false;
let noHistoryReplace = false;
let noPopState = false;
let lastIndex = 0;
let titleOrigin = document.title;

lightbox.on('afterInit', () => {
  if (!noHistoryPush) {
    // init - push
    document.title = (lightbox.pswp.currSlide.data.element.title || 'No title') +  ' - ' + titleOrigin;
    history.pushState(null, "", lightbox.pswp.currSlide.data.element.href);
  };
  noHistoryPush = false;
});

lightbox.on('beforeOpen', () => {
  noHistoryReplace = true;
});

lightbox.on('change', () => {
  if (!noHistoryReplace) {
    // change - replace
    document.title = (lightbox.pswp.currSlide.data.element.title || 'No title') +  ' - ' +  titleOrigin;
    history.replaceState(null, "", lightbox.pswp.currSlide.data.element.href);
  };
  noHistoryReplace = false;
  lastIndex = lightbox.pswp.currIndex;
});

lightbox.on('close', () => {
  if (!noHistoryBack) {
    // close - back
    noPopState = true;
    history.back();
    document.title = titleOrigin;
  };
  noHistoryBack = false;
});

onpopstate = () => {
  if (!noPopState) {
    if (lightbox.pswp && lightbox.pswp.isOpen) {
      // popstate - close
      noHistoryBack = true;
      lightbox.pswp.close();
    } else {
      // popstate - open
      noHistoryPush = true;
      noHistoryReplace = true;
      lightbox.loadAndOpen(lastIndex);
    }
  }
  noPopState = false;
};