CODEWITHSUNDEEP
jqueryshow-hidemagnific-popup
preissy
preissy

Reputation: 15

magnific popup show title on click span

I use magnific popup in my wordpress gallery. But i want, that the title (.mfp-title) fade in if the user click on a span element (info). I tried the following solutions, but nothing will work:

Set opacity:0 for .mfp-title and add a class with opacity:1 if user click on info:

jQuery(document).ready(function() {
jQuery('.mfp-info').click(function(){
     jQuery('.mfp-title').toggleClass('title-active');
});
});

Result: Nothings happen if i click on info

CSS Solution:

.mfp-title {opacity: 0;}
.mfp-info:hover + .mfp-title{opacity: 1 !important;}

Same result as the solution before (even with display:none/block).

I also tried this solution:

$(".mfp-info").hover(function () {
$(this).find(".mfp-title").show();
}

$('.mfp-title').mouseout(function () {
$('.mfp-title').hide();
});

These are only 3 of 13 solutions i tried in the last days, the will work on other projects or in single documents, but not in combination with magnific popup. Or is it not possible to add classes on magnific popup elements?

EDIT: Found the error, if you use MagnificPopup the Script must be into the Callbacks in MFP conditionals, because the rest of the site deactivated if MFP is open.

Upvotes: 0

Views: 796

Answers (1)

Stu Furlong
Stu Furlong

Reputation: 3629

Try your first attempt, but using "on" and applying it to each specifically:

jQuery(document).ready(function() {
    jQuery('.mfp-info').on('click', function(){
        var title = $(this).next('.mfp-title');

        title.toggleClass('title-active');
    });
});

I'm surprised the CSS solution didn't work though, are you sure that your mfp-info has map-title as the directly next sibling?

Upvotes: 0

Related Questions