Please add a selector to uk-lightbox

[Bernhard Baumrock]

Summary

I'm having a blog post with markup coming from a pagebuilder like this:

<article>
  <div>Some Text</div>
  <div><img src="/some/image1.jpg"></div>
  <div>Some Text</div>
  <div><img src="/some/image2.jpg"></div>
  <div>Some Text</div>
  <div><img src="/some/image3.jpg"></div>
</article>

I'd like to open clicks on images open a lightbox with a larger version of the image. Unfortunately I can't do this:

<article uk-lightbox>
  ...
</article>

Because that makes ALL links inside the container open the lightbox and that totally messes up everything.

What I'd like to have is something like this:

<article uk-lightbox="selector: .image > a">
  ...
  <div class="image"><a href=...><img src="/some/image.jpg"></a></div>
  ...
</article>

Priority

Well I think that's a huge issue and I think this solution would solve issues like this #4574 and this #3967 (comment)

Thanks for your great work!

[desvu]

Hi!
<article uk-lightbox="toggle: .image > a">

lightbox props

[Bernhard Baumrock]

Thx, but that does not work at all.

The first image shows up when clicked, and also prev/next arrows appear, but when clicking one of those it only shows the loading spinner. Am I missing something?

This is my complete page markup:

<div sortable="" uk-lightbox="toggle: .rpb-image a" data-sortable-init="true">
  <section class="rpb-text uk-margin-medium-top uk-margin-medium-bottom rpb-block rpb-block-top alfred" data-rpbblock="2145">
    <div class="uk-container rpb-nomargin">
      <div id="pw-edit-3" class="pw-edit pw-edit-InputfieldTinyMCE" data-name="body" data-page="2145" data-lang="1010" style="position:relative" data-configname="body" data-settings="{&quot;inline&quot;:true,&quot;invalid_styles&quot;:&quot;&quot;}" data-features="imgUpload,imgResize,pasteFilter,lazyMode1">
        <p>Some text...</p>
      </div>
    </div>
  </section>
  <section class="rpb-image uk-margin-medium-top uk-margin-medium-bottom rpb-block alfred" data-rpbblock="2162">
    <div class="uk-container uk-text-center">
      <div class="uk-background-muted uk-padding-small" uk-lightbox2="">
        <a href="/site/assets/files/2162/pexels-pixabay-371589.1920x1920.webp" class="uk-link-reset hover-grow" role="button">
          <img src="/site/assets/files/2162/pexels-pixabay-371589.600x600.webp" alt="">
        </a>
      </div>
    </div>
  </section>
  <section class="rpb-image uk-margin-medium-top uk-margin-medium-bottom rpb-block alfred" data-rpbblock="2163">
    <div class="uk-container uk-text-center">
      <div class="uk-background-muted uk-padding-small" uk-lightbox2="">
        <a href="/site/assets/files/2163/pexels-miki-czetti-111963.1920x1920.webp" class="uk-link-reset hover-grow" role="button">
          <img src="/site/assets/files/2163/pexels-miki-czetti-111963.600x600.webp" alt="">
        </a>
      </div>
    </div>
  </section>
  <section class="rpb-text uk-margin-medium-top uk-margin-medium-bottom rpb-block alfred" data-rpbblock="2147">
    <div class="uk-container rpb-nomargin">
      <div id="pw-edit-5" class="pw-edit pw-edit-InputfieldTinyMCE" data-name="body" data-page="2147" data-lang="1010" style="position:relative" data-configname="body" data-settings="{&quot;inline&quot;:true,&quot;invalid_styles&quot;:&quot;&quot;}" data-features="imgUpload,imgResize,pasteFilter,lazyMode1">
        <p>Some text...</p>
      </div>
    </div>
  </section>
  <section class="rpb-downloads uk-margin-medium-top uk-margin-medium-bottom rpb-block rpb-block-bottom alfred" data-rpbblock="2124">
    <div class="uk-container">
      <table class="uk-table uk-table-small uk-table-striped">
        <tbody>
          <tr>
            <td>
              <a href="/site/assets/files/2124/leben_auf_der_falschen_seite_nzz.pdf" style="margin-right: 5px;" download="">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 18a3.5 3.5 0 0 0 0-7h-1A5 4.5 0 0 0 7 9a4.6 4.4 0 0 0-2.1 8.4M12 13v9m-3-3l3 3l3-3"></path>
                </svg>
              </a>
              <a href="/site/assets/files/2124/leben_auf_der_falschen_seite_nzz.pdf" target="_blank">Here is an interesting article about the author (NZZ 2011, German only)</a>
              <small>PDF, 541.0 kB</small>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>
</div>

[desvu]

codepen

[Bernhard Baumrock]

WOW @desvu that did indeed work! It did not work for me first, because I have some pagebuilder UI elements that I removed from my markup example.

I did now apply the following:

<body uk-lightbox="toggle: a.lightbox">

Now whenever I want to add an image to a lightbox slideshow all I need to do is add the "lightbox" class to the anchor!

Thank you very much for your help! If I can buy you a coffee let me know.