Search jQuery

jQuery Forum

madrid1980

Combining MixItUp and Magnific Popup won't work.

in Using jQuery Plugins • 7 years ago

Hi could anybody please help.

I have lightbox popups with Magnific popup on the boxes on this page: www.yorkshire.hosting

They work great until you click to filter the categories (which I use MixItUp for) - then the popups no longer work. Could anybody please take a look as I can't figure out a fix... Thanks for any help.

Replies(12)

jakecigar

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

If you run

$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});

after each you mix it up, it works. Use onMixEnd event as documented on Docs | MixItUp

JΛ̊KE

madrid1980

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

Hi thanks. I've tried adding the code to my script with the onMixEnd but I'm still unsure where this should go. Here is my current call if you can please advise where to add this:

    <script type="text/javascript" src="[[++base_url]]assets/template/js/jquery.mixitup.min.js"></script>
    <script type="text/javascript">
    $(function () {

        var filterList = {

            init: function () {

                // MixItUp plugin
                // http://mixitup.io
                $('#portfoliolist').mixitup({
                    targetSelector: '.portfolio',
                    filterSelector: '.filter',
                    effects: ['fade'],
                    easing: 'snap',
                    // call the hover effect
                    onMixEnd: filterList.hoverEffect()
                });

            },

            hoverEffect: function () {

                // Simple parallax effect
                $('#portfoliolist .portfolio').hover(
                    function () {
                        $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
                        $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
                    },
                    function () {
                        $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
                        $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
                    }
                );
            }
        };

        // Run the show!
        filterList.init();

    });
    </script>

jakecigar

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

onMixEnd: filterList.hoverEffect()
is wrong.

onMixEnd: filterList.hoverEffect

is right

Then put those lines at inside that function, and give it a better name.

JΛ̊KE

madrid1980

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

Thank you!

madrid1980

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

Hi sorry I thought it was working on changing the script to this:

<script type="text/javascript" src="[[++base_url]]assets/template/js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect
});
},
hoverEffect: function () {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
}
};
// Run the show!
filterList.init();
});
</script>

But unfortunately it doesn't work. Could you please demonstrate what you mean by adding it to the function and giving it a better name? Do I not need the same name for the popup to work once filtered??

Thanks again for your help.

jakecigar

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

What happened to your link?

JΛ̊KE

madrid1980

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

Hi sorry but now the whole things has stopped working after I tried to revert it! The link is http://www.yorkshire.hosting

Thanks.

jakecigar

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

Can you put it back so that the mixitup works?

JΛ̊KE

madrid1980

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

Hi I'm not sure why the mix it is now broken... I'll take another look thanks.

madrid1980

Re: Combining MixItUp and Magnific Popup won't work.

7 years ago

Hi the last amended script I posted above did work as I first thought - thank you. It then broke again due to a template variable permission in modx cms, now I've fixed that everything is as it should be. Thanks very much again!

jakecigar