magnific-popup

Magnific popup and infinite scrolling

由 自作多情 提交于 2019-12-11 09:07:44
问题 I have a tumblr blog whit infine scrolling and magnific-popup to visualize the image. When I scroll to the bottom and load new posts, magnific-popup doesn't works in the new posts loaded but only in the old. If I try to go to "page-2" manually everything works. Is there a way to reload magnific-popup on load posts or something similar? Many thanks 回答1: All you need to do is call the .magnificPopup method on the new elements when infinitescroll is loaded, this way: $YOUR_CONTAINER

Sharing buttons in Magnific Popup

由 一曲冷凌霜 提交于 2019-12-11 04:15:59
问题 I'm hoping to add sharing buttons (Pinterest to start) to each image within a gallery without having to go in and manually include URLs etc. for each individual image/entry. There is plenty of instruction to be had when it comes to including this functionality for other lightboxes--most notably in conjunction with a specific CMS; and I have been reviewing those instructions, as well as w3 resources and other stackoverflow.com entries--with the hope that I could put something together. I'd

how to load magnific popup modal on page load

由 喜你入骨 提交于 2019-12-10 19:42:10
问题 I'm trying to load my magnific popup modal on page load, however I can't quite understand the syntax in the documentation. How do I call the modal on page load? My HTML: <div id="test-modal" class"white-popup-block mfp-hide"> <h1>Modal Test</h1> <p> Test Some text. </p> <p> <a class="popup-modal-dismiss">Dismiss</a> </p> </div> My JS: $(window).load(function(){ ???? What code should I place??? }); I have already preloaded the script and css files, what do I type inside the JS to make it load

Dynamically add items to Magnific Popup gallery

由 限于喜欢 提交于 2019-12-10 14:53:02
问题 Is there any way to dynamically add gallery items in Magnific Popup that is already open? (or update the current item). Can't find anything about in in plugin docs. 回答1: Yes, it's possible: // get instance (after popup was opened) var mfp = $.magnificPopup.instance; // modify the items array (push/remove/edit) mfp.items.push({ src: "some-image.jpg" }); // call update method to refresh counters (if required) mfp.updateItemHTML(); Regarding to what to put in items array, refer to documentation

infinite Scroll with Magnific Popup callback

由 笑着哭i 提交于 2019-12-10 13:37:15
问题 I'm using Infinite scroll and Magnific Popup. The popup works on the content which is 'page 1' but fails after that. I've attempted to use a callback for MagnificPopup within the infiniteScroll call. $grid.infiniteScroll({ path: '.pagination__next', append: '.grid__item', outlayer: msnry, status: '.page-load-status', }, function( newElements ) { $('.open-pop').magnificPopup({ type: 'inline', mainClass: 'mfp-fade', fixedContentPos: false, gallery: { enabled: true, navigateByImgClick: false, }

Why is my popup styling messed up?

由 女生的网名这么多〃 提交于 2019-12-10 11:03:51
问题 I'm using Magnific Popup to create a popup form. I copied and pasted the code from the "Popup with Form" demo here, resulting in the following test file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" > <head> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../js/magnific/jquery.magnific

Multiple Galleries with Magnific Popup

由 百般思念 提交于 2019-12-09 06:56:54
问题 I'm trying to create a page with a few galleries using the Magnific-Popup jQuery plug-in. I different sections contained in div s with separate ids and a .gallery class containing the images. <div id="content_1"> <p>Some content</p> <div class="gallery"> <a href="img/pic_1"><img src="img/pic_1.jpg"></a> <a href="img/pic_2"><img src="img/pic_2.jpg"></a> </div> </div> <div id="content_2"> <p>More content</p> <div class="gallery"> <a href="img/pic_3"><img src="img/pic_3.jpg"></a> <a href="img

Magnific Popup: source title from span

由 孤街醉人 提交于 2019-12-09 06:04:44
问题 I want to take the title for my Magnific images from a hidden caption field inside the anchor tag - NOT from the title. This is because my title contains markup. HTML <a href="img/zoom.jpg"> <img src="img/small.jpg" alt=""> <span class="hide">This is a caption with <a href="#">a link</a> in it</span> </a> JS // initialise the magnific lightbox $('.js-lightbox').each(function() { $(this).magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', gallery: { enabled:

Pass data-attribute value of clicked element to ajax settings

由 a 夏天 提交于 2019-12-08 04:32:07
问题 For an implementation of Magnific Popup, I need to pass a post id to the ajax settings. The post id is stored in a data attribute of the element to which Magnific Popup is bound. I would like this to work: html element: <a data-id="412">Clicke me</a> Javascript: $('.element a').magnificPopup({ type: 'ajax', ajax: { settings: { url: php_array.admin_ajax, type: 'POST', data: ({ action:'theme_post_example', id: postId }) } } }); Where postId is read from the data attribute. Thanks in advance.

Can't get magnific popup to work, two javascript errors

由 馋奶兔 提交于 2019-12-07 08:10:47
问题 I am trying to make a lightbox gallery and have used the example source code. Here is the documentation I read over: http://dimsemenov.com/plugins/magnific-popup/documentation.html Uncaught TypeError: undefined is not a function Uncaught ReferenceError: $ is not defined I am not sure what the errors mean or what to do with them. In a video tutorial I watched, they said something about a jquery conflict being a potential problem. On a different page of the website, I used a Kwicks sliding menu
订阅 magnific-popup