通过单击外部内容区域来关闭GLightbox画廊

Question

I'm using the GLightbox JS library for a portfolio gallery and want to be able to close the gallery when clicking outside the inner element.

I found other questions of a similar nature, but I'm avoiding jQuery and haven't been able to find a solution that works for this specific use case. Plus it looks like the functionality I want is built in. I'm just trying to access it.

The documentation lists a number of options, and includes what appears to be a function for closing the gallery with something other than the default button.

Their documentation is here: http://glightbox.mcstudios.com.mx/

The markup for the gallery is generated on the fly, and follows this structure:

<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
  <div id="lightbox-slider">
    <div class="gslide">
      <div class="gslide-inner-content"><!-- image/text content -->
        <img src="img/image.jpg" alt="">
      </div>
    </div>
  </div>
</div>

Based on their documentation there is a method to trigger closing the gallery listed toward the bottom of the page:

// Close the lightbox
myLightbox.close();

I want to be able to click outside of .gslide-inner-content to close the gallery, and this is the basic idea I've come up with so far:

var closeTheGallery = document.getElementsByClassName('.gslide');

closeTheGallery.onclick = function() {
  myLightbox.close();
  e.stopPropagation();
};

I've tried several iterations of the above code targeting various parent and child elements to see if there's anything I can hook into. So far no luck - any insights would be appreciated - thanks in advance.

Answer 1

The myLightbox.close(); feature didn't seem to do anything regardless of what event or <div> I used, but Doug provided some helpful guidance.

As a workaround, I added an event listener for a click on the .current slide container and set it to trigger another click on the default .gclose button.

// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'current')) {
      document.querySelector('.gclose').click();
    }
}, false);

It may not be the most elegant solution, but it gets the job done and doesn't interfere with the existing functionality of the gallery.

Posting the code here in case other folks using the GLightbox gallery run into the same thing.