Open Magnific Popup from a slide

contact's Avatar

contact

26 Jan, 2019 04:10 PM

Hi,

I'm failing at opening a modale from each slide in my slideshow.

Here's the code to initialize the popup from desired links with appropriate class ('.inline-modale' in this case, is passed as the elt when calling the function):

function inlineModaleInit(elt) {
    $(elt).magnificPopup({
        type: 'inline',
        fixedContentPost: true
    });
}

As long as the link isn't in a slide (ie. right before or after the slideshow), it works just fine. As soon as I put it inside a slide, it's just not working properly anymore: the first time, it moves to the # in the link's href but doesn't open the modale... all the following times, it works as expected.

What's also super strange is that I have some code that's supposed to open the modale corresponding to some #fragment in the URL by triggering the click event of the related link, and this actually works...

if(window.location.hash != '') {
    setTimeout(function() {$('a[href="'+window.location.hash+'"]').trigger('click');}, 2000);
}

I have set the navigateByClick option to false when initializing the slider.

I am initializing the links when initializing the slideshow by calling the init function again but still no go on the first click (selector here is '.instripe-slideshow'):

function initSliders(selector) {
    if(!$(selector).length) return;
    $(selector).each(function(index) {
        var currentSliderName = '#'+$(this).attr('id');
        if ($(currentSliderName+' .feature').length > minNumSlides && $(currentSliderName).data('royalSlider') == undefined) {
            var mySlider = $(currentSliderName).royalSlider({OPTIONS}).data('royalSlider');
            if (selector == '.instripe-slideshow') {
                //inlineModaleInit(currentSliderName+' .inline-modale'); // tried initializing the links again here in case but makes no diff
                mySlider.ev.on('rsSlideClick', function(event, originalEvent) {
                    //event.preventDefault();
                    //originalEvent.preventDefault();
                    inlineModaleInit(currentSliderName+' .inline-modale'); // initializing here otherwise it won't open at all
                    $(mySlider.currSlide).find('.inline-modale').trigger('click'); // doesn't trigger anything the first time, works all other times
                });
            }
        }
    });
}

Thanks in advance, it's driving me nuts!

  1. Support Staff 1 Posted by Dmitry Semenov on 26 Jan, 2019 07:31 PM

    Dmitry Semenov's Avatar

    Hello,

    RoyalSlider doesn't keep all slides in DOM at once, so you either need to bind events before it's initialized, or delegate click event.

    Magnific Popup supports event delegation, so you can do something like:

    $('.your-parent-container').magnificPopup({
      delegate: '.inline-modale',
      type: 'inline'
    });
    

    Also, to access DOM element of the current slide you do slider.currSlide.content, not just slider.currSlide.

  2. 2 Posted by contact on 01 Feb, 2019 12:24 PM

    contact's Avatar

    Hi!
    Thanks for your quick reply.
    I couldn't make the defer work so I just move the modale init before the slideshow one and it worked :)
    Have a nice day!

  3. contact closed this discussion on 01 Feb, 2019 12:24 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac