Zoom - GrayYoung/jQuery.UI.Extension GitHub Wiki

Type: Boolean | Default: false

Always show the zoom view.

$('#zoom').zoom({
    alwaysOn : true
});

Type: Boolean | Default: true

Position the image to center.

$('#zoom').zoom({
    center : false
});

Type: Object | Default: null

Add other classes to the widget.

Type: String

Type: String

Type: String

Type: String or Number| Default: "auto"

The height of the zoom view.

Type: Object | Default: null

How to animate the hiding of the element. See more

Type: Object | Default: { my : "left top", at : "right+30 top", collision : "none" }

The position of the zoom view. This value only for type[ standard | drag ], but 'inner'.
See API.jQueryUI.Position.

Type: Boolean| Default: true

If preload the larger image.

Type: Object | Default: null

How to animate the showing of the element. See more

Type: String or Number | Default: "auto"

The width of the zoom view.

Type: Number | Default: 0

Magnification of the zoom image.

Type: String | Default: "standard" | [ standard | inner | drag ]

How to position the zoom image.

Refresh image of the zoom view, it's obvious if you change the image src attribute.
This method does not accept any arguments.
#####Code examples: $( ".selector" ).zoom("refresh");

Removes the dialog functionality completely. This will return the element back to its pre-init state.
This method does not accept any arguments.
#####Code examples: $( ".selector" ).zoom("destroy");

Triggered when the wigdet is created.

• event
  Type: Event
• ui
  Type: Object Note: The ui object is empty but included for consistency with other events. This method does not accept any arguments.

#####Code examples: Initialize the dialog with the create callback specified:
$( ".selector" ).zoom({ create: function( event, ui ) {} });

<div id="jq_ui-zoom" style="width: 400px; height: 600px;" class="row photoViewer" data-src="http://placehold.it/1000x1252&text=Product Photo">
  <img src="http://placehold.it/400x600&text=Product Photo A" alt="Product Photo" title="Product Photo" />
</div>

var $zoom = $('#jq_ui-zoom').zoom({
  type : 'inner'
});