Subscribe
Sign in
Start new thread
Hint.css 2.0
p/hint-css-2-0
A pure CSS tooltip library for your lovely websites.
Visit Product
kushagra gour
Simplezoom.js — A tiny JavaScript library to preview images, better way!
3
•
Replies
kushagra gour
Maker
Hey all! Simplezoom.js an image preview library for a blog I run so that the visitors are able to zoom in on the small thumbnails in the articles. I wanted a very simple to integrate library and also a user experience that is natural and intuitive. Existing image preview libraries either add too much UI to your website, or they require you to write some integration code in order to start them. Plus the user experience with them is so lengthy - you first click an image to preview, it zooms up. Then you cycle using the arrow keys and finally close the preview using esc or clicking somewhere - too long! Simplezoom.js has a very natural experience that works with just your mouse pointer. You point your mouse on an image, it shows up as a big preview placed smartly in the largest possible area without blocking your thumbnail. You can move on your thumbnail to pan the large image - just like on e-commerce product pages. Move the mouse out of thumbnail and the preview is closed! As simple as that. This is an UX I have experimented with to preview images. Would love to know your thoughts about it. Its being used on a blog I run: https://prakritee.com/blog/2016/...
Jai Pandya
@chinchang457 Lovely product. UX is spot on and solves the problem very well. I would like to use it in one of my own projects. Feedback: It seems that the library expects the thumbnails to be original images themselves. It forces the browser to do resizing, also delays the load event by some duration. I understand why you would have made this choice, but as a user of the library I would be happy if loading of original images could be delayed a bit. Second, the library works just by linking the JS file in. While it could be great in some cases, but at places where the element is not supposed show a thumbnail, it'll show a zoomed in preview that image as well. An override in addition to a drop in library would help here. Again, I loved the UX and the fact that it solves this problem in such a tiny size.
kushagra gour
Maker
@jaipandya Thats a completely valid point! I guess a way to specify the preview image URL and target only certain images would be a nice addition to the library. Thanks for your feedback Jai :)