Skip to content

Docs for 0.6

Jump to bottom Edit New page
can3p edited this page Feb 17, 2012 · 1 revision

JQuery.iviewer is an jquery ui widget representing image viewer component used to load and view image with ability to zoom image and to drag it with mouse in container.

Plugin is expected to work in ie6+, ff2+, google chrome, opera 9+, safari.

Demo: http://test.dpetroff.ru/jquery.iviewer/test/

Usage:

Div container must have position: absolute or position: relative, width and height for plugin to work correctly. For opera container has also to be wrapped in the div with overflow:hidden (see demo page).

Don't forget to look for known issues and to read the Frequently Asked Questions

To run plugin add to your code: $("#yourid").iviewer(options);

Options are:

  • src - url to the image
  • ui_disabled - if true, toolbar buttons will not be added
  • zoom - zoom at plugin start (% or "fit" to fit image in container);
  • zoom_max - max zoom, that can be achieved (%)
  • zoom_min - minimal zoom, that can be achieved (%)
  • zoom_delta - zoom scale step when pressing controls or scrolling with mouse ( default 1.4)
  • zoom_animation - whether the zoom change should be animated ( default true)
  • zoom_base - value in %, which is used in calculation of image scale. Zoom is calculated by formula zoom_base * pow(zoom_delta, n)
  • update_on_resize - boolean; if false plugin doesn't update on window resize and this can be controlled manually (default true)

Callbacks:

  • onZoom(new_zoom) - is called on zoom change. new_zoom - new zoom value to be set. If callback returns false, action is aborted;
  • onStartDrag - is called when user starts to drag image; if false action aborts
  • onDrag - is called during drag action
  • onMouseMove - is triggered when mouse moves over image
  • onClick - is triggered, when user clicks on the image. All callbacks besides onZoom have one parameter - coords = {x,y}, which contains pointer coordinates on image. Coordinates are reduced to the original image size;

All callbacks are fired with caller set ro iviewer object. Useful fields and methods:

  • set_zoom(value) - set zoom to value, in %
  • fit() - fit image into container
  • center() - center image in container
  • zoom_by(value) - change image scale by value. E.g. +1 multiplies zoom by zoom_delta, -1 - reduces by zoom_delta
  • moveTo(x,y) - move point on the container to the center if container
  • containerToImage(x,y) - converts point coordinates from container to image original
  • imageToContainer(x,y) - converts point coordinates from image original size to container
  • update() - force container to update internal data to fit in current window size
  • update_container_info() - update iviewer object to actual container size
  • loadImage(src) - load different image in viewer. Image will be zoomed to settings.zoom value. Previous image is not cached and zoom value is not remembered

All the methods should be called through jquery ui notation: $('#viewer').iviewer('method', 'arg1', 'arg2')

All buttons can be completely customized via css.

Look at test example for details.

Known issues:

Setting display:none will result in errors, because browsers set width and height to zero in this case.

Showcase

Add a custom footer
Add a custom sidebar
Clone this wiki locally