How to go to next image if clicked on .next_image button, but close facebox window if clicked elsewhere

Note: I'm learning jQuery, so please forgive the newb question.

I have a lightbox gallery, and I want it such that if I were to click the 'next' button in the gallery, it shows the next image (as it already does), but click any开发者_Python百科where else, it closes the facebox window popup.

I played around with the code quite a bit but I'm stuck at around here:

$('#facebox :not(.image_next)').click($.facebox.close)

Where I was going with it was, (translated):

"In the div with the id of facebox, unless the click is on the image next class, close the facebox window."

Unfortunately, this closes the window no matter where I click, including on the img with that class.

Any help would rock.

---

The click event is bubbling up from the "next" button to its parent, which is your #facebox div.

Call event.stopPropagation() in the click handler for the "next" button to stop the event from being "seen" by your handler on #facebox.

---

 $('#facebox :not(.image_next)').click($.facebox.close)

That is doing exactly what you stated you wanted. Just noting.

Instead, try

 $('#facebox :not(.image_next), <other objects in windows>').click($.facebox.close);

What happened is you are simply saying everything but '.image_next' which would include the image inside of your facebox. So, instead, use Firebug to determine what other objects are there which you need to exclude or only bind to the objects which you really want to have cancel the event.