HTML slides from HTML on the page

[sharchun]

I'm trying to figure out how to make HTML slides without loading the dataSource from an array. I can't find any examples of how to do this, so I tried the following. It doesn't work. Is there any way to do this?

<div class="pswp-gallery" id="my-gallery">
  <a data-pswp-type="HTML"
        href="https://example.com/" 
       data-pswp-html='<div class="custom-html-slide">This is custom HTML slide. <a href="http://example.com" target="_blank" rel="nofollow">Test Link</a>.</div>' 
				target="_blank">
    <img src="img/thumbnail.gif" alt="thumbnail">
    <div class="pswp-caption-content">Test caption</div>
  </a>
</div>

[dimsemenov]

You can do:

lightbox.addFilter('itemData', (itemData, index) => {
  if (itemData.type === 'html' && itemData.element) {
    return {
      html: itemData.element.dataset.pswpHtml
    };
  }
  return itemData;
});

type is automatically parsed from data-pswp-type, as it is the default property. html is not. Care with case sensitivity of type though.

You can also store reference to dom element if it's needed, for example:

return {
  html: itemData.element.dataset.pswpHtml
  element: itemData.element
};

[sharchun]

Thanks for the reply! It would work great, except the ObjectPosition plugin which I'm also using doesn't like it. Throws up the error below.

Uncaught (in promise) TypeError: el is undefined
    getThumbnail photoswipe-object-position.js:16
    ObjectPosition photoswipe-object-position.js:52
    applyFilters eventable.js:53
    applyFilters eventable.js:52
    getThumbBounds get-thumb-bounds.js:87
    getThumbBounds photoswipe.js:488
    init photoswipe.js:129
    _openPhotoswipe lightbox.js:228
    preload lightbox.js:173
    promise callback*preload lightbox.js:170
    loadAndOpen lightbox.js:128
    onThumbnailsClick lightbox.js:72
    init lightbox.js:39
    init lightbox.js:38
    <anonymous> test.php:87
photoswipe-object-position.js:16:3
    getThumbnail photoswipe-object-position.js:16
    ObjectPosition photoswipe-object-position.js:52
    applyFilters eventable.js:53
    forEach self-hosted:167
    applyFilters eventable.js:52
    getThumbBounds get-thumb-bounds.js:87
    getThumbBounds photoswipe.js:488
    init photoswipe.js:129
    _openPhotoswipe lightbox.js:228
    preload lightbox.js:173
    (Async: promise callback)
    preload lightbox.js:170
    loadAndOpen lightbox.js:128
    onThumbnailsClick lightbox.js:72
    onThumbnailsClick self-hosted:1121
    (Async: EventListener.handleEvent)
    init lightbox.js:39
    forEach self-hosted:167
    init lightbox.js:38
    <anonymous> test.php:87
    InnerModuleEvaluation self-hosted:2331
    evaluation self-hosted:2292

[photoswipe-object-position.js:16:3]

[acwolff]

In this test album I have a lot of html slides.
I make thes slides in the itemData event:

    lightbox.on('itemData', (e) => {
       const element = e.itemData.element;
       if (element  && element.dataset.pswpIsPanosph) {
         e.itemData = {
           html: `<div id="Pan_container"></div>`
         };
       }
       else if (element  && element.dataset.pswpIsVideo) {
         const videoURL = element.href;
         const imgPoster= element.dataset.pswpIsPoster;
         e.itemData = {
           html: `<video controls  poster="${imgPoster}"><source src="${videoURL}" type="video/mp4"> </video>`
         };
       }
       else if (element  && element.dataset.pswpIsWebloc) {
         const weblocURL = element.href;
         e.itemData = {
           html: `<iframe frameborder="0" style=border:"0" src="${weblocURL}" height="100%" width="100%"> </iframe>`
         };
       }
       else if (element  && (getExtension(element.href) == 'pdf')) {
         const weblocURL = element.href;
         e.itemData = {
           html: `<iframe frameborder="0" style=border:"0" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" src="${weblocURL}" height="100%" width="100%" scrolling="auto"> </iframe>`
         };
       }
       else if (element  && isAudiofile(element.href)) {
         const audioURL = element.href;
         const pos= audioURL.lastIndexOf("/");
         const id= audioURL.substr(pos+1, audioURL.length - pos);
         e.itemData = {
           html: `<audio class="audioSlide" controls  title="${id}" controlsList="nodownload"><source src="${audioURL}" > </audio>`
         };
       }
    });

The local video in slide 2 is declared as follows in the Gallery:

<a id="s1" href= "slides/IMG_0877.mp4" data-pswp-is-video="true" data-pswp-is-poster="slides/IMG_0877.jpg"
data-pswp-width="608" data-pswp-height="1080"'data-cropped="true" data-caption='iPhone 5 MOV file in portrait format'>

The MP3 file in slide 5 is declared as

<a id="s4" href= "bensound-theelevatorbossanova.mp3" 'data-cropped="true" data-caption='Bossa Nova, music from Bensound'>

The PDF file in slide 11 is declared as:

<a id="s10" href= "routebeschrijving-den-haag.pdf"'data-cropped="true" data-caption='Local PDF-file dropped in the Explorer <a href="routebeschrijving-den-haag.pdf">click here</a> if you can&#39;t read the whole document.'>

The vimeo video oin slide 17 is declared as

<a id="s16" href= "https://player.vimeo.com/video/74152497" data-pswp-is-webloc="true"
'data-cropped="true" data-caption='Example of a video on the Vimeo site added as weblocation'>

The iframe in slide 20 is declared as:

<a id="s19" href= "https://nl.wikipedia.org/wiki/Davos" data-pswp-is-webloc="true"'data-cropped="true" data-caption=''>