To close my lightbox by clicking the red zone, visit this link:
The HTML structure of the lightbox is as follows:
<div id="#lightbox" style="display:block;">
<div class="contents_lb">
<div class="img_box" style="margin-top: 74.5px; width: 398px; height: 563px;">
<a class="close" href="#" style="left: calc(50% + 159px);"></a>
<a class="full" href="#" style="left: calc(50% + 159px); top: 523px;"></a>
<div class="img_wrap" style="width: 398px; left: calc(50% - 199px);">
<img class="lightbox" alt="Wito RenderA3 TEISHITSUblue 1000p wide" src="http://naokonishimura.com/witoart/wp-content/uploads/2015/03/Wito-RenderA3-TEISHITSUblue-1000p-wide.png" style="opacity: 100; height: 596px;">
<div class="desc">
<h2>
Wito RenderA3 TEISHITSUblue 1000p wide
</h2>
<p></p>
</div>
</div>
</div>
</div>
I am struggling to determine how to select a specific area in #lightbox. I attempted using this jQuery code to close the lightbox:
jQuery("#lightbox.close,#lightbox:not(.contents_lb):not(.img_box):not(.img_wrap):not(.img_wrap img):not(.img_wrap .desc)").click(function(){
jQuery("#lightbox").remove();
});
However, the issue is that the lightbox closes when clicking anywhere on #lightbox. Can someone advise me on selecting only certain areas in #lightbox excluding the image? Thank you!