Lightbox setup for single images without <a> tag

[igor-baiborodine]

Hi,

Can your Simple Lightbox be used for single images without a <a> tag?

For example:

<p>
<img src="<path-to-image>" alt="<image-description">
</p>

I tried this setup, but it does not work:

new SimpleLightbox('p img', {
    sourceAttr:'img'
});

[sogrbilja]

I am not associated with this project and I have the same question. By examining the click event on the anchor element I see that it can't, look:

  if (n.isValidLink(t.currentTarget)) {
    if (t.preventDefault(), n.isAnimating) return !1;
    n.initialImageIndex = n.elements.indexOf(t.currentTarget), n.openImage(t.currentTarget)
  }

However, I don't understand why an anchor is needed for this. It could be any of the elements.

[sogrbilja]

Hi,

Can your Simple Lightbox be used for single images without a <a> tag?

For example:

<p>
<img src="<path-to-image>" alt="<image-description">
</p>

I tried this setup, but it does not work:

new SimpleLightbox('p img', {
    sourceAttr:'img'
});

After examining what isValidLink I concluded that it can be done! Look:

<div id="contmax">
  <span data-large="https://simplelightbox.js.org/img/full/02.jpg">
    <img draggable="false" style="padding: 5px" src="https://simplelightbox.js.org/img/thumb/02.jpg" />
  </span>
</div>

<script>
	let gallery = new SimpleLightbox('#contmax span', {"sourceAttr": "data-large"});
</script>

You "just" need to specify another attribute with the sourceAttr property