LightBox: Support descendant image links in addition to direct children

[stolp]

1) Environment

• PrimeFaces version: 7.0.8

2) Expected behavior

Per documentation LightBox expects the image links it displays as direct children of the p:lightBox element:

<p:lightbox>
 <a>
  <img />
 </a>
 <a>
  <img />
 <a>
</p:lightbox>

I suggest to enhance the collection of image links to all descendant elements, so that the for example the following example works as well:

<p:lightbox>
 <div>
  <a>
   <img />
  </a>
 </div>
<div>
 <a>
   <img />
  </a>
 </div>
</p:lightbox>

In my case, I generate a list of preview image attachments links including additional textual information (left out in the example) vi< ui:repeat which I like to present via LightBox.

3) Actual behavior

The current behavior forbids putting more complex output inside a p:lightBox. This limits the usefulness of the implementation.

4) Steps to reproduce

See above

5) Suggested solution

I think the code in question is located in the setupImaging function in lightbox.js:

    setupImaging: function() {
        var _self = this;

        this.content.append('<img class="ui-helper-hidden"></img>');
        this.imageDisplay = this.content.children('img');
        this.navigators = this.contentWrapper.children('a');

As my Javascript skills are severely limited I feel I cannot provide an adequate PR here.

[melloware]

It's tricker than that. This line..

this.links = this.jq.children(':not(.ui-lightbox-inline)');

Is returning DIV's instead of anchor "A" like it is when there is no wrapper div.

[melloware]

@stolp i know this is old but don't you want to use the new Galleria instead in FullScreen mode instead of Lightbox?

https://www.primefaces.org/showcase/ui/multimedia/galleria/fullscreen.xhtml

I think then you can have DIV's or more control over the display of content?

[melloware]

And it has "caption" support to show the text I think you were trying to display? https://www.primefaces.org/showcase/ui/multimedia/galleria/caption.xhtml

[stolp]

@melloware thanks for bringing that up again!

I added some screenshots to illustrate my use case. The attachment list is generated via ui:repeat and is located inside the p:lightbox, thus my initial request for including descendant elements as well.

Looking back with 2.5 more years of experience I think I potentially can go for a different approach here indeed.

The basic idea would be to add p:overlayPanels to each thumbnail, each containing a p:galleria starting at a different index. Other ideas are welcome.

It is a bit more of an effort, but may be a good replacement. So if you feel inclined to close this feature request (I bet you do), please feel free to go ahead.

[melloware]

Yep I am checking to see if Lightbox should be deprecated with a PrimeTek as Galleria does everything that Lightbox does. Thanks for your feedback!