Question

I have a lightbox with only one image. Yes, I know its not really inteded for that.

<p:lightBox styleClass="imagebox" widgetVar="light">
  <h:outputLink value="#{imageBean.getImageResourceLink(id)}" title="#{name}" onclick="light.hide();"/> 
   <h:graphicImage library="thumb_lib" name="#{id}" width="165"/>
  </h:outputLink>  
</p:lightBox>

Now I want the lightbox to be closed/hided when I click inside the opened lightbox.
This doesn’t work as expected. Only when I click the lightbox navigation-arrows the lightbox hides. Good, hiding somehow works. But how can I hide it by just clicking inside the lightbox?

How can I achieve this?

Jonny

Answer 1

Don’t see any “onclick” events inside the p:lightBox

So I guess you could use the help of jQuery…
The following should work just fine (add to your js file or script tag)

jQuery(document).delegate(".imagebox", "click", function (event) {
    light.hide(); 
});

or

jQuery(document).delegate(".ui-lightbox-content-wrapper", "click", function (event) {
    light.hide(); 
});

if your lightBox got an id you can use ....delegate("#idOfLightBox ",....