Home

pupunzi edited this page Oct 29, 2011 · 10 revisions
Clone this wiki locally

jquery.mb.zoomify

This is a jQuery component make images zoommable and pannable.


multi thumbnail zoommify


self zoommify


overlay zoommify

go to Demo page
go to Blog page

JS call:

Add the jQuery.js library.
Add the jquery.mb.zoomify.js library.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="inc/mb.zoomify.js"></script>

HTML constructor:

Create an IMG element with a low resolution image and add a “data-highres” attribute containing the path to the high resolution image:


  <img  src="elements/18_self.jpg"  data-highres="elements/18_hr.jpg" onclick="$(this).mbZoomify({screen:'self', startLevel:3});">

How to zoom in/out:

How to Zoom in:

1. Double click on the image to zoom in to that point.
2. Or hold down the  key (mac) or the ctrl key (PC) and click on the image.
3. Or hold down the plus key to increment the zoom.
4. Or hold down the  key (mac) or the ctrl key (PC) and use the mouse wheel (not in Firefox).

How to Zoom out:

1. Double click on the zoomed image to zoom out.
2. Or hold down the  + alt key (mac) or the ctrl + alt key (PC) and click on the image.
3. Or hold down minus key to decrement the zoom.
4. Or hold down the  key (mac) or the ctrl key (PC) and use the mouse wheel (not in Firefox).

Parameters:

  • zoomSteps:[1, 2, 3, 100], (array) define the zoom steps value for zoom in and out; image can’t be zoommed more than its original size.
  • screen:“self”, (string) define where the image should be zoomed possible value are “self” (default) or the ID of the DOM element where you whant to zoom it (for ex.: “#screen”)
  • startLevel:0, (int) define the start zoom level by index of the defined array
  • activateKeyboard:true, (boolean) activate the zoom via keyboard: + to zoom in, - to zoom out
  • onStart, onZoomIn, onZoomOut, onDrag: function(){}, (function) collbacks function for each event

Methods:

  • $.fn.mbZoomify_overlay(opt):This constructor create an overlayed screen for the zoom: Ex: $(this).mbZoomify_overlay({startLevel:2}); opt overrides the default parameters