jquery.zoomz - Online Hosted Library

Get snippets for hosted files, download or install the jquery.zoomz NPM package inclusive dependencies. At this website you will find all NPM packages. These NPM packages can be added to an online managed NPM project. Out of this project it is possible, to create a single compressed CSS or JavaScript file to avoid too much HTTP request on your website.

Please rate this library. Is it a good library? Are there some bugs?

All versions of jquery.zoomz with all dependencies

Version


More infos about jquery.zoomz

jquery.zoomz

Build Status

jQuery plugin to magnify or zoom in on an image(s).

features

  • Supports both mobile touch & desktop mouse events.
  • Supports requirejs, npm or as a stand alone jQuery plugin.

lighweight

  • js: Only 1kb compressed
  • css: optional & only <1kb compressed

flexible

  • zoom over
  • zoom outside image (thumbnail)

compatabile

  • ie8 and up
  • modern browsers

modular

  • install via bower dependency manager
  • distributed with source scss & js files

Markup

  • Wrap an image with div.zoomz
  • Apply a data-zoomz attribute to the image with a value of either:

    1. the src of a larger version of the image (zoom over)
    2. id of a .target image (zoom outside, act as thumbnail)

Example

CSS

<link rel="stylesheet" href="jquery.zoomz.css" />

Javascript

<script src="src/jquery.zoomz.js"></script>
<script>
  (function($){
    $(window).load(function(){
      $('[data-zoomz]').zoomz();
    });
  })(jQuery);
</script>

Markup: Zoom over regular image

<div class="zoomz">
  <img data-zoomz="path/to/target.jpg" src="path/to/source.jpg">
</div>

Markup: Zoom outside regular image (Behaves as thumbnail)

<img data-zoomz="target-id" src="path/to/source.jpg">
...
<div class="zoomz">
  <img class="target" id="target-id" src="path/to/target.jpg">
</div>

Testing

Command line

gulp qunit

Browser

gulp serve:qunit

TODO

  1. Add additional unit tests
  2. Cross browser testing
  3. Add configuration object for target and caching
  4. Add option for zooming in

The package jquery.zoomz contains the following files

Loading the files please wait ....