pupunzi edited this page Oct 29, 2011 · 10 revisions

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
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.