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:

  1. run custom javascript after popup initialises (look @ callbacks available in api section of docs).

  2. 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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -