Hi,

When I set http://www.soccernet.com as the iframe url, it shows up in the lightbox.

But when you scroll down the site inside the lightbox, suddenly the entire window gets switched to http://www.soccernet.com, even though nothing was clicked.

Hi! Would be great if you can add support for multiple simultaneous popups. What do you think?

Keep up the awesome work!
Cheers.

Here link Project on Github leads to the same page instead of https://github.com/dimsemenov/Magnific-Popup

Bug on WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=53340

Isolated issue: http://codepen.io/dimsemenov/pen/gjGbF

I'm working on implementing a login popup window using this framework and stuck with the issue of how to programmably open and close some specified popup without having a corresponding link?
Your documentation is great, but unfortunately I haven't found anything in this regard.
Could you please provide some handy API just to open and close specific popup?
Thank you in advance for your answer!

Very weird. I can't make any sense of this myself. Tested in recent Chrome and Firefox.

Test case: http://lab.netzgestaltung.net/lightbox2.html

Tested with a local build created using grunt nosite as well as a build tool build including all Magnific Popup modules.

jQuery.delegate() works when new elements are added to the dom.

The plugin don't do that, instead it bind the click event to the parent element, searches for children that matches the selector and store then on options object.

When the plugin receive the event it cannot find the element. If, in the options, type is specified it will try to load "undefined", if not it will throw a error.

Photo gallery popup "X" close button, clicking on the background, and ESC key all fail to exit the popup. Everything else behaves fine: opening popup, left and right arrows, titles. Refreshing the page clears the popup.

Console reveals this error: "Uncaught SyntaxError: Invalid regular expression: /(^|.)mfp-gallery(.|$)/: Stack overflow" with a pointer to line 3 of jquery.min.js.

Running Chrome 26.0.1410.43 on Ubuntu 12.04. Link to jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js". Magnific Popup 0.8.3.

Hi,

Already implementing this on my ThemeForest theme, I think it's stable enough. Just can't wait until you finish it :)
There is however a problem with the next/prev arrows on IE8 (seems the arrow falls below the container, so the bottom part gets hidden).

Here's the screenshot:

Thanks

On Android 2.3's default browser opening an iframe popup is problematic. When the popup is opened the body of the page seems to double in height. The overlay is the correct size, but the popup content seems to get placed somewhere in the extra space added to the document.

This occurs on the demo page, and only with iframes.

I'm trying to implement magnific popup on my website but for some reason my test image is not opening in popup mode. What could be the issue? Here is my link:http://goo.gl/flvob Many thanks for your help

I am guessing this is a feature request but it would be great to be able to deep link to an image that's in a Magnific Popup. For example, example.jpg opened would be example.com/#example.jpg and going to that URL would trigger the Magnific-Popup to open right off with that image.

I checked the documentation but I did not see anything specifically about that. My use case is for a photo site I am building in Drupal and this would be a nice feature. Thanks.

Hello

Thanks for this great lib !
We would like to have a pop-up that displays an iframe taking all the visible screen.
Because of the fixed 16/9 ratio used in the mfp-iframe-scaler CSS class

.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; <----- 16/9 ratio
}

we got vertical slider on a large number of screens with different ratio...

A great feature would be to autodetect the screen's size and set the correct padding-top according to the detected ratio.

Or is ti already possible to achieve that with another ways ?

Thank you for the help !

http://dimsemenov.com/plugins/magnific-popup/ , Lightbox gallery

Version: 12.12
Build: 1707
Platform: Mac OS X 10.7.5

Hi,

Firstly, congrats for the great work, I was looking for an alternative to jQuery Colorbox with css resizing and I'm glad I found your library!

Now that I'm trying to migrate from Colorbox to Magnific Popup, I can't do something I was doing before: chaining popups. This is a new issue, first discussed in #36 (comment).

Here is an example of what I'm trying to do: http://codepen.io/vjrabanelly/pen/dzGKH
The link in the popup Open Magnific Popup 2 should open #content2 but it's not doing anything. I inspected the code and saw that $.magnificPopup.openwill return if mfp.isOpen.
So the alternative I found is to close the popup first and then open a new one. It works if no animation is set. See http://codepen.io/vjrabanelly/pen/Kvlxh.

But now I want to use animations as in the examples, and it's not working anymore because it doesn't have the time to close before opening again. http://codepen.io/vjrabanelly/pen/xIiwC. Furthermore, I wouldn't even want any animation between content change.

With Colorbox, I could just call $.colorbox again and again with different content and it would overwrite the previous content in the same popup. Is there a proper way of doing this with Magnific Popup?

Thank you very much.

I realized that you have added patterns to guess sort of video storage services. Is it possible add do the same for other URLs? For example, if url looks like png image we open it like image, if it point to youtube we'll show youtube video and if we can't guess sort of content we open it like iframe.

The modal closes every time i click an element, button or toggle of the ajax loaded content.

Hi, Dmitry!

Unfortunately I can't add navigation arrows. I use lightbox gallery code from here http://dimsemenov.com/plugins/magnific-popup/ Any help please?

After closing the overlay in IE10, you can still hear the video playing in the background. The only way to stop it from playing is to open the video popup again.

I'm using MagnificPopup with NiceScroll plugin.

It seems that if fixedContentPos is true, then the body overflow style will be set to hidden, and this causes nicescroll to reset it's position to the top.

Is there any way to fix this?

Hi,

I think there is a bug in which when animation is enabled, the background behind the modal/overlay will:

1. Scroll/Jump down a bit (~20 pixels) at the moment the popup appears and remain there even after the popup is closed. I.e. when you are at the top, after opening/closing the popup the container will have scrolled down. It will jump up instead of down when changing:

mfp.bgOverlay.add(mfp.wrap).prependTo( document.body );

to

mfp.bgOverlay.add(mfp.wrap).appendTo( document.body );

My settings are:

        // Initalize popup
        $.magnificPopup.open({ 
            items: popupData,
            type: 'inline',
            closeBtnInside: true,
            preloader: false,
            removalDelay: 200,
            fixedContentPos: true,
            fixedBgPos: true,
            closeOnContentClick: false,
            overflowY: 'scroll',
            mainClass: 'my-mfp-slide-bottom',
            inline: {
                // Define markup. Class names should match key names.
                markup: '<div class="small-dialog"><div class="mfp-close"></div>'+
                            '<h2 class="mfp-title"></h2>'+
                            '<div class="mfp-message"></div>'+
                        '</div>'
            },
            callbacks: {
                markupParse: function(template, values, item) {
                  // optionally apply your worn logic modify "template" element based on data in "values"
                  // console.log('Parsing:', template, values, item);
                }
            },
        });

1. If content position and bg position is set to auto/false and there is a horizontal scrollbar on the document's body, there is a occasional right/left jump when the body has the overflow: visible css property and the content is wrapped.

In my humble opinion, I would avoid replacing/restoring CSS of the document's body when opening/closing the popup because it affects the display of the background, causing jumping of the content and appearing/disappearing of the scrollbar.

Maybe at least create a setting/option do disable affecting the body. I might be wrong though as this might not work in other browsers.

Please note I have only tested on Chrome Version 26.0.1410.65.

Thanks again and excellent work!

I need a method for disabling and re-enabling the popup. I've tried the disabledOn option but it only works once. Maybe I'm missing something. Idea is my page has inline editing on the images. Normally you click on the image and get your popup. But when set to edit it pops up a dialog to upload a new image. When in edit both your popup and mine appear. I'd like to be able to disable your popup when in edit mode.

Nice work by the way

Hi,

Is there currently any method to get the AJAX window content it's added to the DOM?

For example if you want to put an AJAX loaded fluid width video along with text in a popup window, then FitVids jquery plugin is required to be called after the content is added to the DOM.

Thanks

In Safari 6.0.4 for Mac, the image (and caption, amazingly) can get stretched out if you trigger the lightbox and then expand the window horizontally (see attached screenshot).

While it is Safari-specific (it works fine in Chrome), I narrowed it down to this CSS rule:

.mfp-figure:after {
  z-index: -1;
}

Removing that z-index appears to fix the issue.

Just running grunt might not work for all users because of the Jekyll dependency in the default task.

A task grunt.registerTask('nosite', ['sass', 'mfpbuild', 'uglify', 'copy']); would be nice for users who don't have it installed. Also, the README.md should reflect that.

Hi,

From the code I have noticed that clicking on the background/overlay/modal area will always close the magnific popup. There is no option to disable that and I think it would be really useful if somebody was to use it as a prompt/confirmation replacement.

Thanks and excellent work!

The documentation mentions a GoTo function, but I can not find it in the code

// Navigation when gallery is enabled
magnificPopup.next(); // go to next item
magnificPopup.prev(); // go to prev item
magnificPopup.goTo(4); // go to item #4

I would like the ability to specify a title (similar to how a titles are handled by the image type) that appears just below the inline content. I use this in colorbox to have a caption below the content and it's also used in a lot of other lightbox type plugins.

Hi, i was wondering if you have any tips on how to prevent the main page from scrolling when you scroll through the first of the ajax popup examples?

To be clear:
On an iphone, tap on the ajax popup "Load content via ajax) on an iOS device.
What happens is that when you scroll downwards to the bottom of the popup content, and then close it, the entire main page has also scrolled down.
This does not happen when doing the same on a desktop (Safari), only on iPhone.

Is there anything that could be done about this?
Any help would be appreciated.

Keep up the good work!

Hi,

is there any way of loading only specific content, for example only content with a certain #id from a subpage.html when using ajax popup?

To explain, i am trying to use the "disableOn" function, so that when a user enters the subpage (when Magnific Popup is disabled) from a "mobile-friendly" device/screensize, i want it to load scripts like zepto, jquery or other bits of html.

The problem now is that when Magnific Popup is enabled with ajax, it loads zepto/jquery another time for each popup with ajax.

Hope you know what i mean, and hope there is a simple method for doing this as i don't know anything about ajax really :)

looking into the issue

100% height of the window is displayed incorrectly on iPhone, it seems like it's reduced by height of the status bar.

The only hack that I've found that fixes this bug is to add additional 60px to the height of the wrapper on iOS. http://blog.nateps.com/how-to-hide-the-address-bar-in-a-full-screen But it isn't future-friendly at all + this issue gets fixed if you enter fullscreen mode on iOS6 mobile Safari (and if I'm not mistaken there is no reliable way to detect this):

The other hack is using window.innerHeight, but it reduces if user is zoomed in.

In IE8, the pop-up video will load fine, but when I press the "X" or press "ESC", the entire screen goes black and IE reports errors.
Even on the examples pages with the Youtube Video this happens.

Currently the plugin doesn't have some important Accessibility and ARIA features:

• Using ARIA live region ^[1] semantics to allow users of assistive technologies to be aware of the new content if the lightbox is launched without explicit user action.
• Using ARIA attributes such as role="dialog", aria-describedby, and aria-labelledby to better identify and label the lightbox. Please refer to jQuery UI's modal implementation. ^[2]
• The opened lightbox must respond to common keyboard and browser functionality, for example:
  • Tab-able elements outside of the lightbox should be suppressed from the tab order until the lightbox is closed.
  • The Home key should take users to the first slide. And the End key should take users to the last slide.

1. http://www.w3.org/TR/wai-aria/states_and_properties#attrs_liveregions
2. http://jqueryui.com/resources/demos/dialog/modal-form.html

This plugin is really exciting, and look forward to seeing it ready!

Do you have any tip to how to make the slider fade smoothly between slides?
I know you are trying to keep it lightweight, but maybe there is a way to make it crossfade with CSS3 transitions?

Thanks

v0.8.1 - 2013-04-28 (with the latest version gives a similar error : b.off is not a function... )

Tested with this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Magnific test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="scripts/jquery/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery.magnific.js" type="text/javascript"></script>
<link rel="stylesheet" href="scripts/jquery/magnific.css">

<style type="text/css">
.showInfo {
  position: relative;
  background: #EEE;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}
</style>

</head>
<body>

<div>
  <div id="C1Q1" class="showInfo mfp-hide">
    <h3>
        Company 1</h3>
    Question 1 information
  </div>
  <div id="C1Q2" class="showInfo mfp-hide">
    <h3>
        Company 1</h3>
    Question 2 information
  </div>
  <div id="C1Q3" class="showInfo mfp-hide">
    <h3>
        Company 1</h3>
    Question 3 information
  </div>
</div>
<div>
<p><a class="magnific" href="#C1Q1">Company 1 Q 1</a></p>
<p><a class="magnific" href="#C1Q2">Company 1 Q 2</a></p>
<p><a class="magnific" href="#C1Q3">Company 1 Q 3</a></p>
</div>
<script language="javascript" type="text/javascript">
<!--
  $(document).ready(function() { $('.magnific').magnificPopup({ type:'inline', midClick: true}); });
//-->
</script>
</body>
</html>

Hi,

I visited the demo page on my Samsung S3, Firefox is my default browser, and the demo layout is broken, see image below...

If I rotate the phone to landscape the layout is normal.

I tried Opera mobile, and that is also broken, see image below...

I checked on the following browsers, and the layout is normal.
Stock browser
Chrome
Maxthon
Skyfire

Unfortunately I don't have the ability to debug on my phone, so this is the only information I can give.

Regards,

Chris.

I'm not sure I'm setting up the title correctly. I currently have this:

image: {
    titleSrc: function(item) {
        return item.el.attr('title') + '<small>Photo by Marsel Van Oosten</small>';
    }
}

But the title attribute outputs as "Undefined". How do I define the attribute?

Better yet, would it be possible to have it grab the filename and output that?

Thanks for any help. Let me know if this was too vague.

There should be a way to open the popup without selector.
Example $.magnificPopup({ items: { src: 'html or jquery selector etc...' } });

This could be helpful after successful ajax callack or open popup on page load.

I'm trying to throw together a simple image upload form into a standard popup window, but when the file browse button is selected, the popup closes and I am unable to select the files in which to upload.

<form action="/scripts/addimg.php" method="POST" enctype="multipart/form-data">
<input type="file" name="file[]" id="file" accept="image/*" multiple>
<input type="hidden" name="doaid" value="<? echo $_GET['id']; ?>">
<br><br> 
<button type="submit" name="submit" class="btn btn-success btn-small"><i class="icon-upload icon-white"></i> Upload</button>
</form>

Is there a way to either override this closing the popup, or would it be something you would actually work into the functionality?

Hi,

it would be nice to have the option to disable/hide the navigation arrows in gallery mode if there is just one image. Adding a "disabled" class to the navigation for example.

Thank you

Hi,

any plans of adding swipe gesture to this great script?

Sincerely,

macsamiro

In my case I want to open html page inside my popup. It is probably that part of documentation

I'm including Magnific Popup in my website. I have several <li> in a <ul>. In the <li> is a <a> and an <img> with the thumbnail. Clicking the thumbnail opens the popup and navigating to the next en previous images works fine. However when I click outside the popup or on the close button the popup doesn't close. The javascript console logs this upon clicking close:

Uncaught 
b.event.remove
b.event.remove
b.event.remove
b.event.remove
b.event.remove
b.event.remove...

Minor irritation. If you have a large amount of text in the title of an image in gallery mode the text will overwrite the gallery counter.

I'm aware that there might be some limitations or problems with doing this in mobile Safari, but the fact that you can scroll a modal completely out of the viewport in iOS raises some usability issues. Are there any plans to disable scrolling of the body when a modal is open, so that the top or bottom edge of the modal can't be scrolled off screen?

As above you can see the bug here http://test.partnuz.hekko.pl/magnify/test.html

Hi,

was wondering if you have an approximate aim to when the steady version is to be released?
I know you are doing this on your own time, so i am by no means complaining or expecting anything :)
Really like this light and solid plugin, and can't wait to get started.

Keep up the good work!

Ps: for some reason i can't get the plugin to work with the latest Zepto, especially the ajax demos. Am i doing something wrong, or is the plugin just not ready?

Hello,
i have multiple wordpress posts on the same page.

<article class="hentry" id="post-1234">
  <h1><a href="http://example.com/post/">Title</a></h1>
  <div class="entry-content">
    <a href="http://google.com/">Normal link</a>
    <a href="http://example.com/img1.jpg"><img src="http://example.com/img1_thumb.jpg"></a>
    <a href="http://example.com/img2.jpg"><img src="http://example.com/img2_thumb.jpg"></a>
  </div>
</article>

Actually I'm trying to replace the following code:

$('.hentry').each(function() {
      var $this = $(this);
      $thisID = $this.attr('id');
      $this.find('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').attr('rel','shadowbox['+$thisID+']');
      Shadowbox.init();  
    });    

I tried to use the following to add Magnific-Popup to image links Wordpress posts

$('.hentry').magnificPopup({
  delegate: 'a', 
  type: 'image',
  gallery:{enabled:true}
});

But the gallery is spread over "all links" on the page, across all .hentry. But i want a post specific gallery (multiple gallerys for each .hentry) only for image links.

Does this plugin auto-resizing the lightbox if dimensions of gallery images are different? Please see the following one for example: http://leandrovieira.com/projects/jquery/lightbox/

If so, could you illustrate that on the plugin's homepage?