jQuery

ZoomIt is a JavaScript image zoom developed for MooTools 1.3 (1.2 compatible) and jQuery that allows display of detailed, large images based on smaller images that can be placed into the context of web pages. A new approach, different from the previous one (that can be seen here) allows easier placement and implementation along with possibilities of styling using CSS classes placed in stylesheets. The two script versions (for jQuery and MooTools) offer the very same functionality so whatever your preference, you get the same thing no matter what JavaScript framework you use.

The script allows mouse events customizations meaning that the zooming process can be started on either click or mouse movement over the thumbnail image. Also, moving the zoomed area can be set to work with drag or mouse movement over the image. The big image that displays the details has a loader CSS class on it that is available as a parameter (allowing to customize the loader in any way you want) and it also has “memory” capability, meaning that at a later time the user zooms the image, the previous position will be displayed by default. The script works well in all major browsers (Firefox, Safari, Chrome, Opera) with the latest versions. Older browser versions haven’t been tested but it shouldn’t be a problem with them (in case there is, please leave a comment below). (more…)