6 ms·
Show HN: Weekend project - Magnific Popup
- gregdav82 13y agoThank you for a great plugin. I've used PrettyPhoto before, but yours looks much nicier. Can't wait to try it in new project!
- jvzr 13y agoAwesome! I was looking for that kind of intelligent lightbox plugin. It's exactly what I wanted. Kudos to you, me good sire!
- diiiimaaaa 13y agoAlways glad to help!
- jvzr 13y agoI've tried the demos on my iPhone: my only gripe is that when a pop-in is taller than the screen and that I scroll down/up, the whole page scrolls down/up. Is there any way to dissociate scrolling until the pop-in is closed?
- diiiimaaaa 13y agoHere is discussion about this https://github.com/dimsemenov/Magnific-Popup/issues/12 https://github.com/dimsemenov/Magnific-Popup/issues/12
- mifchip 13y agoNice plugin sir. Thank you very musssh!
- hoest 13y agoNice plugin!!! Good work!!!
- jwarren 13y agoVery nice - beautiful, chrome-light and mobile-friendly. Decent API. Good documentation too!
- igvadaimon 13y agoDid it really take one weekend to make this? ;)
- diiiimaaaa 13y agoI thought so when I started writing it :)
- rs26 13y agoThis is awesome, but watching the Youtube video is a little problematic on iOS. Users may get lost when you throw them over to the native player. Is there anyway to make it popup in Quicktime instead (like when you try to watch an embedded video) ?
- diiiimaaaa 13y agoProbably you're right, I agree that such behavior might be confusing in some cases. I don't think that it's possible to launch fullscreen YouTube video player in mobile Safari by just clicking on link. Maybe we should just link directly to the video (not to video page), like so: http://www.youtube.com/embed/PZvi11Yy9r8 http://www.youtube.com/embed/PZvi11Yy9r8 This should be tested on real users for a while to see which option is best.
- rs26 13y agoThat seems to work a little better for iOS. Platforms with an OS-level back button are fine with the video page IMO.
- drinchev 13y agoI'm glad its license is MIT ... I've been searching for similar plugin, but never found one with that license!
- zzenon 13y agogreat project! Does it work with AngularJS's JQuery lite?
- marknutter 13y agoIf not, just include zepto, which is pretty darn lightweight.
- deleted 13y ago[deleted]
- iusable 13y agoThis looks perfect! We have been using some sort of a hackup of a bunch of different ones; thank you for this (& using the MIT license)!
- thomseddon 13y agoReally good work, particularly like the fade-slide animation.
- jimsc 13y agoyeah, that really did it for me too.
- tomasien 13y agoIt's so funny, but as I become an exponentially better and better programmer, I start finding myself more and more drawn to stuff like this that someone put together in 2 days and is billed as "light weight" over any other feature than something with a trillion options already built for me. Whenever a Javscript library throws a ton of inline !important css just to get their shit to look good, I'm like "now what am I supposed to do to make it look how I want it to look? To behave how I want it to behave? STOP IT!"
- highace 13y agoThere's only one logical outcome: we need to introduce the !really-important marker.
- tomasien 13y agoMaybe it would make things more confusing, but I've never understood why you can't just add extra !'s to !important and make it more important, like a z-index of importance. I can never see it getting very many levels deep, it's only REALLY for using other peoples code and overriding it where you can't get to it.
- tekacs 13y agoI strongly suspect that this would, amongst other things, encourage some particularly sloppy library maintainers to ship 'fixes' or indeed first versions with many rules marked with !!!!!!!!!!important, to avoid just this. :/
- FuzzyDunlop 13y agoIt'd be akin to the smattering of z-index:9999 you see all over the place.
- avalaunch 13y agoTrue, but just because something can be abused by sloppy programmers doesn't mean it isn't a good idea. Can you imagine if you z-index was a boolean?
- bluetidepro 13y agoThis looks really great! Nice work! Do you have a breakdown of why this is better than the other million plugins out there? And I don't mean that in a rude way, either. I just think it would be beneficial for the plugin marketing to explain why it's better (or any other key differences) than others out there! :) Again, great work! EDIT: I don't know how I originally missed the breakdown of why it's better at the top of the demo page. My apologies! :)
- diiiimaaaa 13y agoYep there is a list of unique features on plugin homepage: http://dimsemenov.com/plugins/magnific-popup/ http://dimsemenov.com/plugins/magnific-popup/ Also, be sure to check my article on the Smashing Magazine that explains how this plugin was made - http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/ http://coding.smashingmagazine.com/2013/05/02/truly-responsi...
- bluetidepro 13y agoWow, I feel very ignorant for how quickly I over looked that text on your example page, just to see the demos. Thanks for politely reminding me they were already on there. Doh! Thanks! Keep up the great work! :)
- C0d3r 13y agoAwesome plugin! But what's up with yundex.ru?
- diiiimaaaa 13y agoNot sure if I understand the question :) I have no relation to Yandex company.
- Samuel_Michon 13y agoIf you couldn’t tell from the omission of indefinite articles in the copy, the author is Russian. He apparently uses Yandex (‘the Russian Google’) analytics, hence the yandex.ru links in the code.
- diiiimaaaa 13y agoThe reason why I use it in conjunction with GA is that it provides some cool unique features, like this one http://metrica.yandex.com/promo/ http://metrica.yandex.com/promo/
- Samuel_Michon 13y agoCool, I didn’t know it had that feature. I use Clicktale to record visits. http://www.clicktale.com/ http://www.clicktale.com/
- ChrisNorstrom 13y agoI remember you from your Royal Slider Plugin which is just gorgeous. Your plugins are so much more responsive than other scripts which use too many sluggish transitions. I'm sold on the progressive loading. And I still can't believe you're not charging for this. Or perhaps you're the type that just gets joy from seeing your work all over the internet. In that case, include a donation box. (Responsive as in "responds quickly"... Is it to late to ask the internet to stop saying Responsive when talking about Adjustive design that scales according to window size or device?)
- csmatt 13y agoThank you! I've never found 'responsive' to be descriptive of 'adjustive design'. I like 'adjustive design' and am going to start using it.
- diiiimaaaa 13y agoThank you. By the way, here is a good discussion related to "responsive" term - http://stackoverflow.com/questions/14831530/responsive-design-vs-adaptive-design http://stackoverflow.com/questions/14831530/responsive-desig...
- LordIllidan 13y agoLooking forward to try this out - I've also used the author's Royal Slider plugin[1], and it works great. 1: http://dimsemenov.com/plugins/royal-slider/ http://dimsemenov.com/plugins/royal-slider/
- purephase 13y agoI like this. I'm using a lot of FancyBox at the moment, but the ability to resize via CSS sounds like a killer feature. And, let's just pretend that the Bootstrap modal doesn't exist. Thanks for sharing!
- nfoz 13y agoPopups are bad. They're still bad on websites.
- Kudos 13y agoAlthough it is named as such this is not actually a popup, it is a modal.
- deleted 13y ago[deleted]
- jaredstenquist 13y agoExcellent work. I love the style and simplicity. It will certainly be used in my future projects.
- kevincoughlin 13y agoThis looks like a great alternative Popup library. Looking forward to reading through the source later today. Great work!
- mrdoom-yc 13y agoGodly plugin!
- Domenic_S 13y agoAnother UX widget page with its demo buried. I don't care how sweet and lightweight your widget is if it doesn't do what I'm looking for, so put the demo up front!! At least this one actually has a demo. Sorry for the rant, pet peeve of mine. Otherwise, looks nice.
- hnriot 13y agoIt's not exactly difficult to find? If you have the attention span of a goldfish, I suppose the time it takes to reach the demo might be a challenge but the typical hn crowd can actually read, unlike most forums :)
- harlanlewis 13y agoThat's all reasonable, but unnecessary. In my case, the effort is simply out of order - I don't mind reading, but I always hit the demo first (low effort) to see if the copy is worth reading (higher effort).
- asafira 13y agoAlso, it's telling me that the Youtube video chosen was not available in my country (of the USA). Hm...maybe they should choose another video?
- diiiimaaaa 13y agoThanks for the heads-up, will change it.
- HorizonXP 13y agoSo I'm trying to integrate this with my site, and when I enabled gallery mode, I can no longer click to close, or hit the ESC key. Chrome's console seems to show a Uncaught RangeError: Maximum call stack size exceeded in jquery. Ideas?
- diiiimaaaa 13y agoPlease isolate your problem on CodePen and open a new issue on GitHub.
- HorizonXP 13y agoI'm still trying to isolate it, but it seems that in gallery mode, when mfpClose is fired, it gets into a infinite loop, which causes the stack to overflow, and ultimately cause the page to crash. I'm using jQuery 1.9.1 and Twitter Bootstrap. On a whim, I looked at your example code and noticed you were using Zepto. I tried switching to Zepto, and this fixed the issue with your gallery, and it closed properly. However, it breaks Bootstrap. Did you only test with Zepto? There might be an issue in jQuery, where you're selecting elements incorrectly, thus spawning too many events.
- saraid216 13y ago> Uncaught RangeError: Maximum call stack size exceeded Chrome should give you a stack trace for that. Look for patterns: in my experience, that generally shows up when there's a mutual unterminated recursion, e.g. "A calls B, B calls A, A calls B, ..." or "A calls B calls C calls A calls B calls C ...".
- msurguy 13y agoThis is pretty amazing!
- aoroz 13y agoGreat work! I will definitely be using this in the near future.
- coldarchon 13y agoThe lightweight Gallery doesn't work with Opera. Pictures don't swap or you see a line at the top getting changed.
- marknadal 13y agoNobody seemed to notice that the header graphic changes on every load, nice little touch.
- moe 13y agoThis kind of attention to detail is rare. Keep up the good work!
- diiiimaaaa 13y agoThank you!
- jrochkind1 13y agoOn OSX Chrome, after I open one of the popups off a 'view source' links in the demo section and close it... I can't seem to open any other 'view source' popups (including the first one) again, clicking on the links does nothing. Just me?
- jrochkind1 13y agoIs there an easy way to load via ajax, and then make it such that additional links in that loaded content will also have their content loaded in that same popup? Sort of a little mini-window effect? I've hacked that together for other modal/popup implementations before, and it works pretty well for simple interactions. But I'm starting to get weary of re-implementing it on the next new better modal/popup implementation, heh.
- nosecreek 13y agoVery nice. One feature request: add touch navigation (touch and drag like in RoyalSlider) for galleries. Add this and it will probably be my goto lightbox.