Is there a way to include IMG elements that are not inside of an A element to be included in the gallery?

jasonkhanlar commented 2 years ago

In this function it appears to suggest that only A HTML elements are able to be children in a gallery to contain image data, and IMG HTML elements are not evaluated or considered. Is there a way to include IMG elements that are not inside of an A element to be included in the gallery?

For example see https://dev.moasspedia.org/photoswipe.php

or

<!DOCTYPE html><html class="client-nojs" lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>Debugging PhotoSwipe</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dimsemenov/PhotoSwipe@master/dist/photoswipe.css"/>
<script type="module">
import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/gh/dimsemenov/PhotoSwipe@master/dist/photoswipe-lightbox.esm.min.js';
import PhotoSwipeDeepZoom from 'https://cdn.jsdelivr.net/gh/dimsemenov/photoswipe-deep-zoom-plugin@main/photoswipe-deep-zoom-plugin.esm.min.js';
const lightbox = new PhotoSwipeLightbox({
// may select multiple "galleries"
gallery: '.photoswipe',
// Elements within gallery (slides)
children: 'img',
// setup PhotoSwipe Core dynamic import
pswpModule: () => import('https://cdn.jsdelivr.net/gh/dimsemenov/PhotoSwipe@master/dist/photoswipe.esm.min.js'),
// Recommended PhotoSwipe options for this plugin
allowPanToNext: false, // prevent swiping to the next slide when image is zoomed
allowMouseDrag: true, // display dragging cursor at max zoom level
wheelToZoom: true, // enable wheel-based zoom
zoom: false // disable default zoom button
});
const deepZoomPlugin = new PhotoSwipeDeepZoom(lightbox, {
// deep zoom plugin options, for example:
tileSize: 256
});
lightbox.init();
</script>
</head>
<body>
<table class="photoswipe">
<tbody><tr>
<td><img src="https://i.redd.it/8dovotu9ljt61.jpg" alt="8dovotu9ljt61.jpg" /></td>
<td><img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg" alt="2" /></td>
</tr></tbody></table>
</body>
</html>

I am preparing to work with a MediaWiki environment using wiki syntax for external hotlinked images, where the URL of an image is typed in plaintext all by itself, and that alone generates an IMG element to appear in its place, and no A element surrounding it.

jasonkhanlar commented 2 years ago

I am using this for now:

document.querySelectorAll('table.photoswipe img').forEach((e,i) => {
  if (e.parentElement.tagName !== 'A') {
    document.querySelectorAll('img')[i].outerHTML = `<a href="${e.src}" data-my-size="${e.naturalWidth}x${e.naturalHeight}">${e.outerHTML}</a>`;
  }
});

dimsemenov commented 2 years ago

Just fyi, you can via domItemData filter https://photoswipe.com/data-sources/#custom-html-markup , but test accessibility part.

dimsemenov / PhotoSwipe

Is there a way to include IMG elements that are not inside of an A element to be included in the gallery? #1894