For the main source image tag:

xpreview - optional, but when it is set up, this attribute used as the medium preview image, while the src attribute in this case will be used as the small thumbnail image. If this attribute is not set up, then src attribute will be used as the medium preview image.

xtitle - text string that will be used as caption and will be shown in zoom output window inside "div" container with titleClass. If this attribute is not used then xZoom will use regular title attribute of the image.

Getting an instance:

$("selector").xzoom({options}); var instance = $("selector").data('xzoom');

After you got an instance, you are able to use API functions.

List of available methods:

xappend(jQuery_object) - this function can add new thumbnail to current xZoom instance. It will take as parameter 1, object that must be an image and passed as jQuery object.

gallery() - this function can be used for integration with gallery plugins, like "FancyBox" or "Magnific Popup", it returns an object with the next properties:
index - current selected thumbnail. Starting from 0.
ogallery - array of paths to original big images.
cgallery - array of paths to original big images. Order begins from current index.

//Example: Integration with FancyBox plugin
$('#main_image').bind('click', function() {
  var xzoom = $(this).data('xzoom');
  xzoom.closezoom();
  $.fancybox.open(xzoom.gallery().cgallery, {padding: 0, helpers: {overlay: {locked: false}}});
  event.preventDefault();
});

//Example: Integration with "Magnific Popup" plugin
$('#main_image').bind('click', function() {
  var xzoom = $(this).data('xzoom');
  xzoom.closezoom();
  var gallery = xzoom.gallery().cgallery;
  var i, images = new Array();
  for (i in gallery) {
    images[i] = {src: gallery[i]};
  }
  $.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}});
  event.preventDefault();
});

instance.eventopen(element) Function that is called on initialization step, that is binding an event "mouseenter" to the passed jQuery object "element" which is originnaly a main source image. And giving a function that need to be called when event will be triggered "instance.openzoom".

//Example
instance.eventopen = function(element) {
  element.bind('mouseenter', instance.openzoom);
}

Note: usually there is no need to change this function at all, but it is just present as optional feature. Because you just can use main source image via jQuery to bind to it any event and instance function "instance.openzoom" to open xZoom when event fired.

instance.eventleave(element) Function that is called on the step when it is needed to bind an event to the element on which the leaving will be tracked.

//Example
instance.eventleave = function(element) {
  element.bind('mouseleave', instance.closezoom);
}

instance.eventmove(element) Function that is called on the step when it is needed to bind an event to the element on which the moving will be tracked.

//Example
instance.eventmove = function(element) {
  element.bind('mousemove', instance.movezoom);
}

instance.eventscroll(element) Function that is called on the step when it is needed to bind an event to the element on which the scrolling for scale will be tracked.

//Example
instance.eventscroll = function(element) {
  element.bind('mousewheel DOMMouseScroll', instance.xscroll);
}

instance.eventclick(element) Function that is called on the step when it is needed to bind an event to the element on which the click will be tracked.

//Example
instance.eventclick = function(element) {
  element.bind('click', function(event) {
    $('#main_image').trigger('click');
  });
}

instance.openzoom(event) Function to open zoom, uses event.pageX and event.pageY as start location of lens.

instance.closezoom() Has no parameters, and simply closing the zoom.

instance.movezoom(event) This function also uses event.pageX and event.pageY to be able to provide movement of lens on the zoom.

instance.xscroll(event) This function is adapted for "mousewheel", "DOMMouseScroll" events and tested, and works fine on all major browsers. But if you are using some custom events where you will call this function directly then you can use event.xdelta as delta with value 0 or 1 to tell the direction of scaling by 5% from each call, or event.xscale for exact scale with value from -1 to 1 (which means -100% to 100%) to set up exact scale of the zoom as you need.

instance.eventunbind() Function that will delete original instance.event* functions by replacing them with blank functions and unbind default events on objects. It can help you to clear default mouse binding events that xzoom already setup.

instance.eventdefault() Function that will restore original instance.event* functions.

All new features and last updated docs you can find here: github.com/payalord/xZoom