
Show HN: Weekend project - Magnific Popup - diiiimaaaa
http://dimsemenov.com/plugins/magnific-popup/
======
ChrisNorstrom
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?)_

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

------
tomasien
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!"

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

~~~
tomasien
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.

~~~
tekacs
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.
:/

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

~~~
avalaunch
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?

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

~~~
diiiimaaaa
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...](http://coding.smashingmagazine.com/2013/05/02/truly-responsive-
lightbox/)

~~~
bluetidepro
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! :)

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

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

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

~~~
diiiimaaaa
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.

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

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

~~~
hnriot
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 :)

~~~
harlanlewis
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).

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

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

~~~
HorizonXP
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.

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

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

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

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

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

~~~
diiiimaaaa
Always glad to help!

~~~
jvzr
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?

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

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

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

~~~
Samuel_Michon
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.

~~~
diiiimaaaa
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/>

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

<http://www.clicktale.com/>

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

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

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

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

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

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

~~~
diiiimaaaa
Thank you!

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

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

~~~
jimsc
yeah, that really did it for me too.

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

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

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

~~~
diiiimaaaa
I thought so when I started writing it :)

------
hoest
Nice plugin!!! Good work!!!

------
msurguy
This is pretty amazing!

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

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

------
mrdoom-yc
Godly plugin!

------
mifchip
Nice plugin sir. Thank you very musssh!

