Stack Overflow
Stack Overflow

Questions tagged [magnific-popup]

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js).

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

Official Site: http://dimsemenov.com/plugins/magnific-popup/

Light and modular

You can choose to include only the features that you need using the online build tool or by compiling it yourself with Grunt.js. Size of core JS file is about 3KB + each module weighs about 0.5KB (gzipped). Sass CSS preprocessor is used for easier skinning, but you're not obligated to use it.

Content is resized with CSS

The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not - feel free to use relative units like EM's or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it'll resize and center.

Fast

Magnific Popup displays images before they're completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.

High-DPI (Retina) display support

Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays.

Conditional lightbox

Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size. Brad Frost has a terrific article about this technique.

Memory management

Popup has an extendable micro templating engine that reuses existing DOM elements (example), which is especially useful when your popups same pattern.

718 questions
7
votes
1 answer

Magnific Popup with upload image preview

I'm using Magnific popup to display an upload form where the user can select multiple images to upload and preview them before submitting the form, I let the user preview the images plus add a from inputs underneath the image when he clicks on it to…
Ruby
  • 1,492
  • 2
  • 26
  • 45
7
votes
6 answers

Magnific Popup closes when clicked anywhere

I don't get it, why does the Magnific Popup plugin closes the popup when I click anywhere on the popup. It has the X button in the corner designed that to do already. Anybody know how to fix it so that it closes only when I click on the X? Code…
user5248
  • 307
  • 1
  • 3
  • 17
7
votes
2 answers

Custom title for Magnific Popup

I'm trying to get Magnific Popup to display a title based on other elements around the target it uses. Given the following markup, I want the title to be "Foobar".

Foo

…
radu.luchian
  • 249
  • 1
  • 4
  • 21
7
votes
2 answers

Magnific Popup: source title from span

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
strangerpixel
  • 796
  • 1
  • 11
  • 26
7
votes
2 answers

Magnific Popup Callback when closing

I am using Magnific Popup for uploading images. When the user clicks or presses the close button, I'd like to get confirmation from the user whether to close on not. This is my Javascript: $('#upload').magnificPopup({ type:'inline', …
Mifas
  • 1,565
  • 6
  • 28
  • 45
7
votes
5 answers

Magnific Popup - Popup disappearing on click

I've just recently implemented the 'Magnific Popup' and the popup comes up fine, however when I click an input box the entire popup disappears back to the parent page. On the examples shown on the plugin website, the entire dialog box is clickable…
Frank
  • 71
  • 1
  • 3
6
votes
1 answer

infinite Scroll with Magnific Popup callback

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:…
sarah3585
  • 627
  • 12
  • 35
6
votes
1 answer

Magnific popup facebook share button works just on second click

I have a gallery with magnific popup with a share button as titleSrc. This is called on button click: function callFacebook(item){ console.log(item); FB.ui({ method: 'feed', link: item, caption: 'Die besten Party-Pics bei…
m1crdy
  • 1,341
  • 2
  • 25
  • 56
6
votes
4 answers

Magnific-popup: how to get image url from ?

Is it possible to force magnific-popup to get image url from 'src' attribute of img tag? This way there would be no need to wrap img with a tags. I tried the code below, but it doesn't work. Returned error is 'undefined' url.
Vasily802
  • 1,314
  • 16
  • 28
6
votes
4 answers

How can I get magnific popup to show both images and an iframe video in one dynamic gallery?

I am using magnific popup to create an image gallery via the below: $('.main-content').magnificPopup({ delegate: '.gallery', // child items selector, by clicking on it popup will open type: 'image', gallery: {enabled:true} // other…
user3398457
  • 93
  • 1
  • 5
6
votes
2 answers

Can I use magnific-popup to display an MP4 video?

I would like to use magnifico-popup to display a locally hosted mp4 file. Do I need to define an iframe pattern for this or is there a simpler option. Many thanks for your thoughts Anita
Anita Graham
  • 317
  • 1
  • 4
  • 12
6
votes
2 answers

select2 in magnific popup: search input cannot be focused

I use select2 jquery plugin together with magnific popup. If I click on the select in an open popup, searchbox with some results appears. The problem is that it is impossible to type anything into the searchbox - cursor just does not appear. Here is…
clime
  • 7,872
  • 8
  • 52
  • 80
6
votes
1 answer

Dynamically add items to Magnific Popup gallery

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.
Marvin3
  • 4,596
  • 6
  • 28
  • 39
6
votes
2 answers

Magnific Popup action before close

I have implemented Magnific Popup in my solutions and I am using Bootbox to get confirmation from the user that he wants to close the window without saving changes, etc. I hooked up my custom function to close callback but it doesn't work as…
Tobiasz
  • 1,059
  • 14
  • 29
5
votes
1 answer

Get error "TypeError: Cannot read property 'object' of undefined" when import "React-Magnific-Popup" package

I'm using react-magnific-popup package, but when I import anything from that package I get this error "TypeError: Cannot read property 'object' of…
Erbol Syzdykov
  • 51
  • 2
1
2
3
…
47 48