Search code examples
javascriptjquerypopupmagnific-popup

Only start magnific popup when body has specific class

I am working with magnific popup and want to show a video when someone is coming to the side (including not showing it everytime a user comes to the site, hence the localStorage part). This all works and here is the code:

 (
    function($) {
        $(window).load(function () {
            if(localStorage.getItem('popState') != 'shown'){
            setTimeout(function(){
                $.magnificPopup.open({
                    items: {
                        src: 'https://www.youtube.com/watch?v=blabla'
                    },
                    type: 'iframe',
                    iframe: {

                        patterns: {
                        youtube: {
                index: 'youtube.com/', 
                id: 'v=',
                src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
            }
        }
    }
                });
            }, 5000);
            localStorage.setItem('popState','shown')}
        });
    })
(jQuery);

Now, I want to show the popup only on a specific page (when a specific language is selected). I noticed that the body tag changes the class when a user selects a language, example:

<body class="lang-en-EN">

or

<body class="lang-de-DE">

Is there a way to fire the popup, when the class changes from language EN to DE?

Update: Here is the Fiddle

Solution

  • In the if-statement you already have, just check for the class as well, adding (e.g.) $(body).hasClass("lang-en-DE"):

    (function($) {
    $(window).load(function () {
        if($(body).hasClass("lang-en-DE") && localStorage.getItem('popState') != 'shown'){
        setTimeout(function(){
            $.magnificPopup.open({
                items: {
                    src: 'https://www.youtube.com/watch?v=blabla'
                },
                type: 'iframe',
                iframe: {
                    patterns: {
                        youtube: {
                            index: 'youtube.com/', 
                            id: 'v=',
                            src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
                        }
                    }
                }
            });
        }, 5000);
        localStorage.setItem('popState','shown')}
    });
})
(jQuery);