javascript - Button inside Magnific Popup (not close) -
i'm working on site has gallery page, using magnific popup plugin. client has come huge 'captions' (more stories) each image.
i have used title function in mfp create , display caption. need show/hide caption, layer placed directly on image absolute position.
i have of in place - modified mfp js file write in div called mfp-description - which, when clicked should add new class title div display block - button have created inside image window not have effect. i'm guessing in mfp script stopping can't work out what...
page here:
http://www.kindledesign.co.uk/strand/gallery.php
code show:
$(".mfp-content").click(function() { var target = $( event.target ); if (target.is(".mfp-description")) { $(this).addclass("visible"); }; });
css show:
.mfp-title { text-align: left; font-size: .9em; line-height: 1.3em; color: #333; word-wrap: break-word; padding: 1em 40px 1em 1em; background: white; position: absolute; bottom: 100%; display: none; } .mfp-title.visible { display: block; }
all appreciated! thanks
it sounds trying bind click
event .mfp-title
before exists on page.
you need either:
run custom javascript after popup initialises (look @ callbacks available in api section of docs).
amend click event doesn't rely on element existing in dom.
for (2), like:
$(document.body).on('click', '.mfp-description', function(e) { $(this).parent().find('.mfp-title').toggleclass('visible'); });
you mentioned customised version of magnific. avoid amending plugin code directly: make debugging hard , updating in future pain. use callbacks built in plugin (i.e. add markup in magnific's beforeopen
or open
events).
Comments
Post a Comment