Show HN: Weekend project - Magnific Popup | Hacker News Reader

Show HN: Weekend project - Magnific Popup

dimsemenov.com

196 pointsdiiiimaaaa64 comments

I 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?)

Thank you! I've never found 'responsive' to be descriptive of 'adjustive design'. I like 'adjustive design' and am going to start using it.

Thank you.

By the way, here is a good discussion related to "responsive" term - http://stackoverflow.com/questions/14831530/responsive-desig...

It'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!"

There's only one logical outcome: we need to introduce the !really-important marker.

Maybe 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.

I 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. :/

It'd be akin to the smattering of z-index:9999 you see all over the place.

True, 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?

The allowance of only one important is a feature not a bug. If everything is important than nothing is.

The Ministry of Doublespeak reminds you to simply use two !important !important.

I completely agree with you. For this exact reason I've made this plugin modular. Which means that you can include only parts that actually use, both from JS part (thanks to Grunt) and from CSS part (thanks to Sass).

Is it possible to use this as a dialog box/modal without the image features?

This 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! :)

Yep there is a list of unique features on plugin homepage:

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-responsi...

Wow, 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! :)

Looking 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/

Is 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.

This 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) ?

Probably 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

This should be tested on real users for a while to see which option is best.

That seems to work a little better for iOS. Platforms with an OS-level back button are fine with the video page IMO.

Another 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.

It'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 :)

That'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).

Also, 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?

Thanks for the heads-up, will change it.

So 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?

Please isolate your problem on CodePen and open a new issue on GitHub.

I'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.

> 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 ...".

On 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?

I 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!

Very 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.

This 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)!

Awesome! I was looking for that kind of intelligent lightbox plugin. It's exactly what I wanted. Kudos to you, me good sire!

Always glad to help!

I'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?

Here is discussion about this https://github.com/dimsemenov/Magnific-Popup/issues/12

Thank you for a great plugin. I've used PrettyPhoto before, but yours looks much nicier. Can't wait to try it in new project!

Awesome plugin! But what's up with yundex.ru?

Not sure if I understand the question :) I have no relation to Yandex company.

If 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.

The 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/

Cool, I didn’t know it had that feature. I use Clicktale to record visits.

http://www.clicktale.com/

This looks like a great alternative Popup library. Looking forward to reading through the source later today. Great work!

I'm glad its license is MIT ... I've been searching for similar plugin, but never found one with that license!

Excellent work. I love the style and simplicity. It will certainly be used in my future projects.

Very nice - beautiful, chrome-light and mobile-friendly. Decent API. Good documentation too!

Nobody seemed to notice that the header graphic changes on every load, nice little touch.

This kind of attention to detail is rare. Keep up the good work!

Thank you!

Great work! I will definitely be using this in the near future.

Really good work, particularly like the fade-slide animation.

yeah, that really did it for me too.

Popups are bad. They're still bad on websites.

Although it is named as such this is not actually a popup, it is a modal.

Did it really take one weekend to make this? ;)

I thought so when I started writing it :)

Nice plugin!!! Good work!!!

This is pretty amazing!

great project! Does it work with AngularJS's JQuery lite?

If not, just include zepto, which is pretty darn lightweight.

Godly plugin!

Nice plugin sir. Thank you very musssh!

Reply on news.ycombinator.com