dimsemenov / magnific-popup Goto Github PK
View Code? Open in Web Editor NEWLight and responsive lightbox script with focus on performance.
Home Page: http://dimsemenov.com/plugins/magnific-popup/
License: MIT License
Light and responsive lightbox script with focus on performance.
Home Page: http://dimsemenov.com/plugins/magnific-popup/
License: MIT License
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
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.
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!
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.
Bug on WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=53340
Isolated issue: http://codepen.io/dimsemenov/pen/gjGbF
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
Currently the plugin doesn't have some important Accessibility and ARIA features:
role="dialog"
, aria-describedby
, and aria-labelledby
to better identify and label the lightbox. Please refer to jQuery UI's modal implementation. [2]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?
In my case I want to open html page inside my popup. It is probably that part of documentation
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
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!
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!
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,
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
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>
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
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.
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 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.
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?
The modal closes every time i click an element, button or toggle of the ajax loaded content.
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,
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,
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.open
will 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 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.
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.
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.
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.
As above you can see the bug here http://test.partnuz.hekko.pl/magnify/test.html
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 !
Hi,
any plans of adding swipe gesture to this great script?
Sincerely,
macsamiro
looking into 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.
http://dimsemenov.com/plugins/magnific-popup/ , Lightbox gallery
Version: 12.12
Build: 1707
Platform: Mac OS X 10.7.5
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?
Hi,
I think there is a bug in which when animation is enabled, the background behind the modal/overlay will:
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);
}
},
});
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!
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.
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.
Here link Project on Github
leads to the same page instead of https://github.com/dimsemenov/Magnific-Popup
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?
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.
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?
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 :)
Hi! Would be great if you can add support for multiple simultaneous popups. What do you think?
Keep up the awesome work!
Cheers.
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,
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 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.
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...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.