jQuery to show icon after .hide

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

(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).