non-image link

  • Resolved adijeff

    (@adijeff)


    5 years, 9 months ago

    Thanks for a great plugin Arno.

    I have captions that slide up over the image on hover and I want the user to be able to click on the caption or the image to get the lightbox. I am over-riding the gallery shortcode with post_gallery filter.

    Since the caption link does not contain an image, the lightbox does not open. I know this is as designed, but I wonder if there is a way to force the lightbox on text links using something like class="force-lightbox" on the link.

    Currently my workaround is to add an image inside the caption link and hide it with css, but it is not a nice solution because it creates two images in the lightbox.

    Thanks for any thoughts on this.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    Indeed only links which contain an IMG element will be used, as you can see in js/photoswipe.js (be aware, that only the minimised version is queued for the frontent, so modifiying the non-minimized version will not change anything):

        var parseThumbnailElements = function(el) {
        var elements = $('body').find('a[data-width]:has(img)'),

    Extending this to A elements which contain a certain attribute should not be a problem at all. Do you have any example for the HTML output you generate? So I can test this in my development environment and see, what I can do.

    Thread Starter adijeff

    (@adijeff)

    Thanks Arno. The output would be something like this (simplified):

    <div id="unique-id" class="item">
  <div class="wrapper">
    <a href="full-size-image.jpg" data-width="2880">
      <img class="image" src="thumbnail.jpg" srcset="..." sizes="...">
    </a>
  </div>
  <div class="caption">
    <a class="force-lightbox" href="full-size-image.jpg" data-width="2880">
      <p>Image caption</p>
    </a>
  </div>
</div>

    It’s the class="force-lightbox" on the link inside the caption that would do the work.

    • This reply was modified 5 years, 9 months ago by adijeff.
    • This reply was modified 5 years, 9 months ago by adijeff.
    Plugin Author Arno Welzel

    (@awelzel)

    I thought this should be easy. But it is not :-(.

    The problem: there would be two links to the same image element. And this is something PhotoSwipe can’t deal with.

    So sorry – no, your problem can’t be solved without changing the PhotoSwipe library itself.

    Thread Starter adijeff

    (@adijeff)

    Ah, OK – thanks for trying Arno. I appreciate your efforts.

    It made me try a different approach, and I have a solution that is so easy it’s embarrassing:

    I never knew about the pointer-events property, but if I add pointer-events: none; to the caption div, then the image link underneath becomes clickable through the caption. No need for the burden/complications of a hidden second image.

    I hope that might help someone else.

    Plugin Author Arno Welzel

    (@awelzel)

    Thanks for the feedback. That helped me with my galleries as well ??

    See for example:
    https://arnowelzel.de/geburtstagsreise-2013

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘non-image link’ is closed to new replies.