I am using the SimpleLightbox plugin (https://wordpress.org/plugins/simplelightbox/) on a test site: http://joshrodg.com/theiveys/about.

If you click on one of the pictures, SimpleLightbox opens a larger version in a Lightbox. You'll notice that to close the Lightbox you need to click the white "X" in the upper-right hand corner, but that is directly over the page menu (where the three lines are).

So, I added some code that would remove the navigation bar from the page when the Lightbox loads, which looks like:

$(document).ready(function(){
    $(".simplelightbox").click(function(){
        $(".burger").hide();
    })
});

This works because the code gets executed when someone clicks on one of the Lightbox images with the class "simplelightbox"

The problem I'm having is making the nav bar re-appear.

I have tried:

$(document).ready(function(){
    $(".simple-lightbox").click(function(){
        $(".burger").show();
    })
});

but that doesn't work - the nav bar doesn't re-appear. That one uses class .simple-lightbox (because that is the main class when the Lightbox is showing) - there is also sl-overlay, sl-wrapper, sl-image, and sl-close but none of those worked either.

Anyone have any ideas?

Thanks,
Josh

  • I explored that post, literally copied and tweaked every suggested answer and I still get the same results...when I click the image the nav bar disappears and the Lightbox opens, but when I close the Lightbox, the nav bar is still hidden. Can you let me know which one is the solution @toscho – Josh Rodgers Apr 11 '17 at 12:11
  • What does your console say? – fuxia Apr 11 '17 at 13:30
  • That definitely fixes the errors, but not the behavior on the page...thanks for pointing out the issue. – Josh Rodgers Apr 11 '17 at 14:09

I assume the different spellings of .simplelightbox and .simple-lightbox are typos in your question and both are correct in your code.

My first thought would be to find the function in the plugin that is fired when the white 'X' is clicked (that closes the lightbox) and add your line of code. If you don't want to edit the plugin (which would have to be done every time the plugin is updated by the vendor), I would focus on the class of the white 'X' itself. Inspecting your page, it seems to be .sl-close. Well, you say that didn't work.

Have you tried playing with the jQuery toggle() function? It alternates between hide() and show() depending on the state of the element.

The last thing I might suggest is seeing if you can reduce the size of the lightbox by about 5%, making it so it doesn't overlap with your menu in the first place.

  • Actually, if you look at the code .simplelightbox is being applied to the href of the image and .simple-lightbox is being applied to the Lightbox itself. Although they are similar class names, they aren't typos. – Josh Rodgers Apr 11 '17 at 12:04
  • I did try the toggle() functionality, but it seems like that is only applicable from the same element, in other words click button A to show, click button A to hide...I'm clicking button A to show, and button B to hide. – Josh Rodgers Apr 11 '17 at 12:05
  • Looking into the size of the Lightbox (at the moment)...that's something I haven't tried. – Josh Rodgers Apr 11 '17 at 12:06
  • I tried the toggle() and the same things happens...here is the code: jsfiddle.net/j58x5oj4 – Josh Rodgers Apr 11 '17 at 12:26

Your actual button is hidden ( the link you provided ) . Right now your button is unclickable, and it's the overlay that closes your LightBox, not the close button. You have to define a width and height for it:

.sl-wrapper .sl-close {
    height:30px;
    width:30px
}

.button.sl-close::after {
    top:30px;
    right:30px
}

Then, you can use the button's class to show your Navigation menu on click:

$(document).ready(function(){
    $(".sl-close").click(function(){
        $(".burger").show();
    })
});

This should do the trick.

  • Hey there, I changed the name of the css file that has the Lightbox css to eliminate any confusion on the styling and then added your css with !important declarations (just in case the plugin's own styling was interfering), but that didn't solve the issue. When you click on an image the Lightbox opens, the nav bar is hidden, but then doesn't re-appear when the Lightbox closes. – Josh Rodgers Apr 11 '17 at 12:02
up vote 0 down vote accepted
(function($) {
    $(document).ready(function () {
        $('.simplelightbox').on('click', function () {
            $('.burger').addClass('active');
        });
        $('body').on('click', 'button.sl-close', function () {
            $('.burger').removeClass('active');
        });
        $('body').on('click', '.sl-overlay', function () {
            $('.burger').removeClass('active');
        });
    });
}(jQuery));

Not sure if this is the best solution, but it works.

This adds an "active" class to the "burger" element when one of the images is clicked because the on click is for the simplelightbox class...I then added some css to that class display: none

I am removing the active class with the button.sl-close (so we're targeting a specific button) and then .sl-overlay the Lightbox window itself (so when we click on any of the green space the class is also removed).

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.