Close GLightbox gallery by clicking outside content area

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.

target the overlay `.goverlay` -- ideally it should cover the whole page and be under the gallery. (Also check in the web developer toolbar > console, that the myLightbox.close() method works as expected) — Doug, Mar 16 '18 at 18:21
Targeting `.goverlay` didn't work - would it make a difference if the markup is being generated on-the-fly? Technically the markup doesn't exist until the lightbox is active. It's not throwing an error in the console, but it also won't trigger the gallery closing. — Mike Jandreau, Mar 16 '18 at 18:27
good point, its quite possible that is your issue -- you can try something like suggested here: https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript — Doug, Mar 16 '18 at 18:32
Thanks! That got me looking in the right direction. I'll add the solution for other folks that may be looking for something similar. — Mike Jandreau, Mar 16 '18 at 19:18

score 1 · Answer 1 · answered Mar 16 '18 at 19:28

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.

Close GLightbox gallery by clicking outside content area

1 Answers1