When you want to incorporate a zoom property within your images, jQuery is probably one of the best options thanks to its fluidity and easy operability. There are many great plugins to work with zoom, but most of them are a quite cumbersome due the amount of steps that are required in order to set up the zoom or the quantity of images needed.
With Zoomy things are easier than before, this jQuery plugin only needs two copies of a picture, one with the default size and the other it’s going to be the zoom image. The plugin requires no further adjustment beyond a few lines of code.
The plugin is easy to customize and implement, you can adjust its appearance and usability with ease and, without slowing down your site, you will be capable to prettify even the lamest picture.
To explain how Zoomy works we can say that it adds two objects into the document. The first one is a div that encases the zoomed image and the second is an “optional” element that has a CSS3 gradient background. Zoomy has a simple loader to handle the larger image as well as several positioning options. At the time being there’s a total of six functions that running with Zoomy.
On the official site you will find a complete documentation as well as the download links. The plugin is currently free for download but you can make a kind donation to the team behind this project. Since its latest version there have been incorporated a series of features such as:
- Three different CSS3 styles (RGBA, border-radius and gradient-fill).
- Adjust the clickability of each image.
- Good integration with lightbox plugins.
- Activate the zoom property by clicking instead of hovering over.
- Multiple states for each Zoomy object.