jquery view js

https://github.com/fengyuanchen/jquery-viewer

https://toscode.gitee.com/mirrors/Viewer-jQuery

demo:https://fengyuanchen.github.io/viewer/

Options

You may set viewer options withnew Viewer(image, options). If you want to change the global default options, You may useViewer.setDefaults(options).

backdrop

• Type:BooleanorString
• Default:true

Enable the modal backdrop, specifystaticfor the backdrop that will not close the modal on click.

button

• Type:Boolean
• Default:true

Show the button on the top-right of the viewer.

navbar

• Type:BooleanorNumber
• Default:true
• Options:
  • 0orfalse: hide the navbar
  • 1ortrue: show the navbar
  • 2: show the navbar only when the screen width is greater than 768 pixels
  • 3: show the navbar only when the screen width is greater than 992 pixels
  • 4: show the navbar only when the screen width is greater than 1200 pixels

Specify the visibility of the navbar.

title

• Type:BooleanorNumberorFunctionorArray
• Default:true
• Options:
  • 0orfalse: hide the title
  • 1ortrueorFunctionorArray: show the title
  • 2: show the title only when the screen width is greater than 768 pixels
  • 3: show the title only when the screen width is greater than 992 pixels
  • 4: show the title only when the screen width is greater than 1200 pixels
  • Function: customize the title content
  • [Number, Function]: the first element indicate the visibility, the second element customize the title content

Specify the visibility and the content of the title.

The name comes from thealtattribute of an image element or the image name parsed from its URL.

For example,title: 4equals to:

new Viewer(image, { title: [4, (image, imageData) => `${image.alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`] });

toolbar

• Type:BooleanorNumberorObject
• Default:true
• Options:
  • 0orfalse: hide the toolbar.
  • 1ortrue: show the toolbar.
  • 2: show the toolbar only when the screen width is greater than 768 pixels.
  • 3: show the toolbar only when the screen width is greater than 992 pixels.
  • 4: show the toolbar only when the screen width is greater than 1200 pixels.
  • { key: Boolean | Number }: show or hide the toolbar.
  • { key: String }: customize the size of the button.
  • { key: Function }: customize the click handler of the button.
  • { key: { show: Boolean | Number, size: String, click: Function }: customize each property of the button.
  • Available built-in keys: "zoomIn", "zoomOut", "oneToOne", "reset", "prev", "play", "next", "rotateLeft", "rotateRight", "flipHorizontal", "flipVertical".
  • Available built-in sizes: "small", "medium" (default) and "large".

Specify the visibility and layout of the toolbar its buttons.

For example,toolbar: 4equals to:

new Viewer(image, { toolbar: { zoomIn: 4, zoomOut: 4, oneToOne: 4, reset: 4, prev: 4, play: { show: 4, size: 'large', }, next: 4, rotateLeft: 4, rotateRight: 4, flipHorizontal: 4, flipVertical: 4, }, });

see more for custom toolbar.

className

• Type:String
• Default:''

Custom class name(s) to add to the viewer's root element.

container

• Type:ElementorString
• Default:'body'
• An element or a valid selector for Document.querySelector

Container to place the viewer in the modal mode.

Only available when theinlineoption is set tofalse.

filter

• Type:Function
• Default:null

Filter the images for viewing (should returntrueif the image is viewable, returnfalseto ignore the image).

For example:

new Viewer(image, { filter(image) { return image.complete; }, });

Note that images without thesrcattribute set will be ignored by default.

fullscreen

• Type:Booleanor FullscreenOptions
• Default:true

Enable to request full screen when play.

Requires the browser supports Fullscreen API.

inheritedAttributes

• Type:Array
• Default:['crossOrigin', 'decoding', 'isMap', 'loading', 'referrerPolicy', 'sizes', 'srcset', 'useMap']

Define the extra attributes to inherit from the original image.

Note that the basic attributessrcandaltwill always inherit from the original image.

initialCoverage

• Type:Number
• Default:0.9

Define the initial coverage of the viewing image. It must a positive number between 0 (0%) and 1 (100%).

initialViewIndex

• Type:Number
• Default:0

Define the initial index of the image for viewing.

Also used as the default parameter value of theviewmethod.

inline

• Type:Boolean
• Default:false

Enable inline mode.

interval

• Type:Number
• Default:5000

The amount of time to delay between automatically cycling an image when playing.

keyboard

• Type:Boolean
• Default:true

Enable keyboard support.

focus

• Type:Boolean
• Default:true

Focus the active item in the navbar when initialized.

Requires thekeyboardoption set totrue.

loading

• Type:Boolean
• Default:true

Indicate if showing a loading spinner when loading the image or not.

loop

• Type:Boolean
• Default:true

Indicate if enabling loop viewing or not.

If the current image is the last one, then the next one to view is the first one, and vice versa.

minWidth

• Type:Number
• Default: 200

Define the minimum width of the viewer.

Only available in inline mode (set theinlineoption totrue).

minHeight

• Type:Number
• Default: 100

Define the minimum height of the viewer.

Only available in inline mode (set theinlineoption totrue).

movable

• Type:Boolean
• Default:true

Enable to move the image.

rotatable

• Type:Boolean
• Default:true

Enable to rotate the image.

scalable

• Type:Boolean
• Default:true

Enable to scale the image.

zoomable

• Type:Boolean
• Default:true

Enable to zoom the image.

zoomOnTouch

• Type:Boolean
• Default:true

Enable to zoom the current image by dragging on the touch screen.

zoomOnWheel

• Type:Boolean
• Default:true

Enable to zoom the image by wheeling the mouse.

slideOnTouch

• Type:Boolean
• Default:true

Enable to slide to the next or previous image by swiping on the touch screen.

toggleOnDblclick

• Type:Boolean
• Default:true

Indicate if toggle the image size between its natural size and initial size when double click on the image or not.

In other words, call the toggle method automatically when double click on the image.

Requires dblclick event support.

tooltip

• Type:Boolean
• Default:true

Show the tooltip with image ratio (percentage) when zooming in or zooming out.

transition

• Type:Boolean
• Default:true

Enable CSS3 Transition for some special elements.

zIndex

• Type:Number
• Default:2015

Define the CSSz-indexvalue of the viewer in modal mode.

zIndexInline

• Type:Number
• Default:0

Define the CSSz-indexvalue of the viewer in inline mode.

zoomRatio

• Type:Number
• Default:0.1

Define the ratio when zooming the image by wheeling the mouse.

minZoomRatio

• Type:Number
• Default:0.01

Define the min ratio of the image when zooming out.

maxZoomRatio

• Type:Number
• Default:100

Define the max ratio of the image when zooming in.

url

• Type:StringorFunction
• Default:'src'

Define where to get the original image URL for viewing.

If it is a string, it should be one of the attributes of each image element. If it is a function, it should return a valid image URL.

For example:

<img src="picture.jpg?size=160">

new Viewer(image, { url(image) { return image.src.replace('?size=160', ''); }, });

ready

• Type:Function
• Default:null

Shortcut of thereadyevent.

show

• Type:Function
• Default:null

Shortcut of theshowevent.

shown

• Type:Function
• Default:null

Shortcut of theshownevent.

hide

• Type:Function
• Default:null

Shortcut of thehideevent.

hidden

• Type:Function
• Default:null

Shortcut of thehiddenevent.

view

• Type:Function
• Default:null

Shortcut of theviewevent.

viewed

• Type:Function
• Default:null

Shortcut of theviewedevent.

move

• Type:Function
• Default:null

Shortcut of themoveevent.

moved

• Type:Function
• Default:null

Shortcut of themovedevent.

rotate

• Type:Function
• Default:null

Shortcut of therotateevent.

rotated

• Type:Function
• Default:null

Shortcut of therotatedevent.

scale

• Type:Function
• Default:null

Shortcut of thescaleevent.

scaled

• Type:Function
• Default:null

Shortcut of thescaledevent.

zoom

• Type:Function
• Default:null

Shortcut of thezoomevent.

zoomed

• Type:Function
• Default:null

Shortcut of thezoomedevent.

play

• Type:Function
• Default:null

Shortcut of theplayevent.

stop

• Type:Function
• Default:null

Shortcut of thestopevent.

⬆ back to top

Methods

All methods allow chain composition.

As there are some asynchronous processes when start the viewer, you should call a method only when it is available, see the following lifecycle:

new Viewer(image, { ready() { // 2 methods are available here: "show" and "destroy". }, shown() { // 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy". }, viewed() { // All methods are available here except "show". this.viewer.zoomTo(1).rotateTo(180); } });

show([immediate])

• immediate (optional):
  • Type:Boolean
  • Default:false
  • Indicates if show the viewer immediately or not.

Show the viewer.

Only available in modal mode.

hide([immediate])

• immediate (optional):
  • Type:Boolean
  • Default:false
  • Indicates if hide the viewer immediately or not.

Hide the viewer.

Only available in modal mode.

view([index])

• index (optional):
  • Type:Number
  • Default:0(inherits from theinitialViewIndexoption)
  • The index of the image for viewing

View one of the images with the image index. If the viewer is hidden, it will be shown first.

viewer.view(1); // View the second image

prev([loop=false])

• loop (optional):
  • Type:Boolean
  • Default:false
  • Indicate if turn to view the last one when it is the first one at present.

View the previous image.

next([loop=false])

• loop (optional):
  • Type:Boolean
  • Default:false
  • Indicate if turn to view the first one when it is the last one at present.

View the next image.

move(x[, y = x])

• x:

  • Type:Number
  • The moving distance in the horizontal direction.

• y (optional):

  • Type:Number
  • The moving distance in the vertical direction.
  • If not present, its default value isx

Move the image with relative offsets.

viewer.move(1); viewer.move(-1, 0); // Move left viewer.move(1, 0); // Move right viewer.move(0, -1); // Move up viewer.move(0, 1); // Move down

moveTo(x[, y = x])

• x:

  • Type:Number
  • The new position in the horizontal direction.

• y (optional):

  • Type:Number
  • The new position in the vertical direction.
  • If not present, its default value isx.

Move the image to an absolute point.

rotate(degree)

• degree:
  • Type:Number
  • Rotate right: requires a positive number (degree > 0)
  • Rotate left: requires a negative number (degree < 0)

Rotate the image with a relative degree.

viewer.rotate(90); viewer.rotate(-90);

rotateTo(degree)

• degree:
  • Type:Number

Rotate the image to an absolute degree.

viewer.rotateTo(0); // Reset to zero degree viewer.rotateTo(360); // Rotate a full round

scale(scaleX[, scaleY])

• scaleX:

  • Type:Number
  • Default:1
  • The scaling factor to apply on the abscissa of the image
  • When equal to1it does nothing.

• scaleY (optional):

  • Type:Number
  • The scaling factor to apply on the ordinate of the image
  • If not present, its default value isscaleX.

Scale the image.

viewer.scale(-1); // Flip both horizontal and vertical viewer.scale(-1, 1); // Flip horizontal viewer.scale(1, -1); // Flip vertical

scaleX(scaleX)

• scaleX:
  • Type:Number
  • Default:1
  • The scaling factor to apply on the abscissa of the image
  • When equal to1it does nothing

Scale the abscissa of the image.

viewer.scaleX(-1); // Flip horizontal

scaleY(scaleY)

• scaleY:
  • Type:Number
  • Default:1
  • The scaling factor to apply on the ordinate of the image
  • When equal to1it does nothing

Scale the ordinate of the image.

viewer.scaleY(-1); // Flip vertical

zoom(ratio[, showTooltip[, pivot]])

• ratio:

  • Type:Number
  • Zoom in: requires a positive number (ratio > 0)
  • Zoom out: requires a negative number (ratio < 0)

• showTooltip (optional):

  • Type:Boolean
  • Default:false
  • Indicates whether to show the tooltip.

• pivot (optional):

  • Type:Object
  • Default:null
  • Schema:{ x: Number, y: Number }
  • The pivot point coordinate for zooming.

Zoom the image with a relative ratio

viewer.zoom(0.1); viewer.zoom(-0.1);

zoomTo(ratio[, showTooltip[, pivot]])

• ratio:

  • Type:Number
  • Requires a positive number (ratio > 0)

• showTooltip (optional):

  • Type:Boolean
  • Default:false
  • Indicates whether to show the tooltip.

• pivot (optional):

  • Type:Object
  • Default:null
  • Schema:{ x: Number, y: Number }
  • The pivot point coordinate for zooming.

Zoom the image to an absolute ratio.

viewer.zoomTo(0); // Zoom to zero size (0%) viewer.zoomTo(1); // Zoom to natural size (100%) // Zoom to 50% from the center of the window. viewer.zoomTo(.5, { x: window.innerWidth / 2, y: viewer.innerHeight / 2, });

play([fullscreen])

• fullscreen (optional):
  • Type:Booleanor FullscreenOptions
  • Default:false
  • Indicate if request fullscreen or not.

Play the images.

stop()

Stop play.

full()

Enter the modal mode.

Only available in inline mode.

exit()

Exit the modal mode.

Only available in inline mode.

tooltip()

Show the current ratio of the image by percentage.

Requires thetooltipoption set totrue.

toggle()

Toggle the image size between its current size and natural size.

Used by the toggleOnDblclick option.

reset()

Reset the image to its initial state.

update()

Update the viewer instance when the source images changed (added, removed, or sorted).

If you load images dynamically (with XMLHTTPRequest), you can use this method to add the new images to the viewer instance.

destroy()

Destroy the viewer and remove the instance.

⬆ back to top

Events

All events can access the viewer instance withthis.viewerin its handler.

Be careful to use these events with other components which have the same event names, e.g.: Bootstrap's modal.

let viewer; image.addEventListener('viewed', function () { console.log(this.viewer === viewer); // > true }); viewer = new Viewer(image);

ready

• event.bubbles:true
• event.cancelable:true
• event.detail:null

This event fires when a viewer instance is ready for viewing.

In modal mode, this event will not be triggered until you click on one of the images.

show

• event.bubbles:true
• event.cancelable:true
• event.detail:null

This event fires when the viewer modal starts to show.

Only available in modal mode.

shown

• event.bubbles:true
• event.cancelable:true
• event.detail:null

This event fires when the viewer modal has shown.

Only available in modal mode.

hide

• event.bubbles:true
• event.cancelable:true
• event.detail:null

This event fires when the viewer modal starts to hide.

Only available in modal mode.

hidden

• event.bubbles:true
• event.cancelable:false
• event.detail:null

This event fires when the viewer modal has hidden.

Only available in modal mode.

view

• event.bubbles:true
• event.cancelable:true
• event.detail.index:
  • Type:Number
  • The index of the original image.
• event.detail.image:
  • Type:HTMLImageElement
  • The current image (a clone of the original image).
• event.detail.originalImage:
  • Type:HTMLImageElement
  • The original image.

This event fires when a viewer starts to show (view) an image.

viewed

• event.bubbles:true
• event.cancelable:false
• event.detail: the same as theviewevent.

This event fires when a viewer has shown (viewed) an image.

move

• event.bubbles:true
• event.cancelable:true
• event.detail.x:
  • Type:Number
  • The new position in the horizontal direction.
• event.detail.y:
  • Type:Number
  • The new position in the vertical direction.
• event.detail.oldX:
  • Type:Number
  • The old position in the horizontal direction.
• event.detail.oldY:
  • Type:Number
  • The old position in the vertical direction.
• event.detail.originalEvent:
  • Type:Eventornull
  • Options:pointermove,touchmove, andmousemove.

This event fires when a viewer starts to move an image.

moved

• event.bubbles:true
• event.cancelable:false
• event.detail: the same as themoveevent.

This event fires when a viewer has moved an image.

rotate

• event.bubbles:true
• event.cancelable:true
• event.detail.degree:
  • Type:Number
  • The new rotation degrees.
• event.detail.oldDegree:
  • Type:Number
  • The old rotation degrees.

This event fires when a viewer starts to rotate an image.

rotated

• event.bubbles:true
• event.cancelable:false
• event.detail: the same as therotateevent.

This event fires when a viewer has rotated an image.

scale

• event.bubbles:true
• event.cancelable:true
• event.detail.scaleX:
  • Type:Number
  • The new scaling factor in the horizontal direction.
• event.detail.scaleY:
  • Type:Number
  • The new scaling factor in the vertical direction.
• event.detail.oldScaleX:
  • Type:Number
  • The old scaling factor in the horizontal direction.
• event.detail.oldScaleY:
  • Type:Number
  • The old scaling factor in the vertical direction.

This event fires when a viewer starts to scale an image.

scaled

• event.bubbles:true
• event.cancelable:false
• event.detail: the same as thescaleevent.

This event fires when a viewer has scaled an image.

zoom

• event.bubbles:true
• event.cancelable:true
• event.detail.ratio:
  • Type:Number
  • The new (next) ratio of the image (imageData.width / imageData.naturalWidth).
• event.detail.oldRatio:
  • Type:Number
  • The old (current) ratio of the image.
• event.detail.originalEvent:
  • Type:Eventornull
  • Options:wheel,pointermove,touchmove, andmousemove.

This event fires when a viewer starts to zoom (in or out) an image.

zoomed

• event.bubbles:true
• event.cancelable:false
• event.detail: the same as thezoomevent.

This event fires when a viewer has zoomed (in or out) an image.

play

• event.bubbles:true
• event.cancelable:true
• event.detail:null

This event fires when the viewer starts to play.

You can abort the playing process by callingevent.preventDefault().

stop

• event.bubbles:true
• event.cancelable:true
• event.detail:null

This event fires when the viewer starts to stop.

You can abort the stopping process by callingevent.preventDefault().

⬆ back to top

No conflict

If you have to use another viewer with the same namespace, call theViewer.noConflictstatic method to revert to it.

<script src="other-viewer.js"></script> <script src="viewer.js"></script> <script> Viewer.noConflict(); // Code that uses other `Viewer` can follow here. </script>

Browser support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 9+

Contributing

Please read through our contributing guidelines.

Versioning

Maintained under the Semantic Versioning guidelines.