Show HN: Amplify – A tiny script allowing inline image zoom | Hacker News Reader

Show HN: Amplify – A tiny script allowing inline image zoom

github.com

50 pointsCharlesTati16 comments

Shameless plug ~7 years ago when canvas was still a new thing I did a weird take on this zooming concept http://maxpert.github.io/wadda/

The demo link does not work for me on Firefox 55.0.3 on OSX 10.12.6

Works in Chrome, Safari and Opera.

Doesn't work for me either in FF 53.0.3 (32-bit) on Win 7.

Also doesn't work with FF 57.0a1 Nightly on Win7

Apparently the author of the project didn't fully implement flexbox properties, making it not work in IE/Firefox.

Reported the issue and suggested a fix: https://github.com/charlestati/amplify/issues/2

It might just be that I don't have much experience with JS, but it profoundly annoys be that a "tiny" script has 8 additional config files...

The configuration files are just for working on the source. The final file looks like this: https://github.com/charlestati/amplify/blob/master/docs/ampl...

One of the reasons I like lightboxes is because it doesn't trigger a content reflow. This does, which is an issue on slow mobile devices.

Similar with potentially smoother UX:

- https://github.com/fat/zoom.js/ (jQuery)

- https://github.com/nishanths/zoom.js/ (fork with no dependencies)

I don’t think so? Those are closer to lightboxes, they’re not really that “inline”

There's a related annoyance I've had for a while now: I grew up reading PC Gamer magazine and one of the great things about it was, for me, seeing the fancy new graphics coming out in large, glossy screenshots. Now, I read Rock Paper Shotgun and PC Gamer online and the screenshots are tiny, tiny things! On screenshot-focused articles, they'll be expandable but on most they're just little blocks the size of the textbox I'm writing in right now. And even when they are expandable, they almost never actually let you expand to full-screen. It kills some of the fun for me - but I guess now we have fullscreen video to more than make up for it though I don't always want to watch a video.

While expanding them inline would be nice, it doesn't really fix the problem that they're serving tiny images.

Missed opportunity to call it Enhance! :)

I was wondering, because there is an Amplify library already, but I think it goes by AmplifyJS.

Thumbnail and srcset support would be nice.

how do you can use it in angular (2)?

The functionality is simple and mostly based on CSS, so just set relevant attributes in your template and toggle 'aria-expanded' on click as in the JS file[1]. Then, include (S)CSS copy which handles resizing based on above attribute[2].

All files other than those in src/ are just processing fluff and irrelevant for the actual functionality.

[1]: https://github.com/charlestati/amplify/blob/master/src/ampli... [2]: https://github.com/charlestati/amplify/blob/master/src/ampli...

Reply on news.ycombinator.com