Download jquery.zoomz without NPM

Scroll down to download

jquery.zoomz

Build Status

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

features

lighweight

flexible

compatabile

modular

Markup

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

All versions of jquery.zoomz with dependencies

No informations.