Get new jQuery plugins just once a week

×

Viewer

December 9, 2015

Viewer | An awesome jQuery image viewing gallery plugin.

Viewew is an awesome jQuery image viewing plugin for photo galleries.

Created by Fengyuan Chen

Download

Example

viewer jQuery plugin

gallery


Viewer

Downloads Version

A simple jQuery image viewing plugin.

Table of contents

Features

Main

dist/
├── viewer.css
├── viewer.min.css   (compressed)
├── viewer.js        (UMD)
├── viewer.min.js    (UMD, compressed)
├── viewer.common.js (CommonJS, default)
└── viewer.esm.js    (ES Module)

Getting started

Install

npm install imageviewer

Include files:

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>

Usage

Initialize with $.fn.viewer method.

<!-- a block container is required -->
<div>
  <img class="image" src="picture.jpg" alt="Picture">
</div>

<div>
  <ul class="images">
    <li><img src="picture.jpg" alt="Picture"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>
// View one image
$('.image').viewer();

// View some images
$('.images').viewer();

Keyboard support

Only available in modal mode.

⬆ back to top

Options

You may set viewer options with $().viewer(options). If you want to change the global default options, You may use $.fn.viewer.setDefaults(options).

inline

Enable inline mode.

button

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

navbar

Specify the visibility of the navbar.

title

Specify the visibility of the title (the current image's name and dimensions).

The name comes from the alt attribute of an image element or the image name parsed from URL.

toolbar

Specify the visibility of the toolbar.

tooltip

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

movable

Enable to move the image.

zoomable

Enable to zoom the image.

rotatable

Enable to rotate the image.

scalable

Enable to scale the image.

transition

Enable CSS3 Transition for some special elements.

fullscreen

Enable to request full screen when play.

Requires the browser supports Full Screen API.

keyboard

Enable keyboard support.

interval

Define interval of each image when playing.

minWidth

Define the minimum width of the viewer.

Only available in inline mode (set the inline option to true).

minHeight

Define the minimum height of the viewer.

Only available in inline mode (set the inline option to true).

zoomRatio

Define the ratio when zoom the image by wheeling mouse.

minZoomRatio

Define the min ratio of the image when zoom out.

maxZoomRatio

Define the max ratio of the image when zoom in.

zIndex

Define the CSS z-index value of viewer in modal mode.

zIndexInline

Define the CSS z-index value of viewer in inline mode.

url

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 will be called on each image and should return a valid image URL.

ready

A shortcut of the "ready" event.

show

A shortcut of the "show" event.

shown

A shortcut of the "shown" event.

hide

A shortcut of the "hide" event.

hidden

A shortcut of the "hidden" event.

view

A shortcut of the "view" event.

viewed

A shortcut of the "viewed" event.

⬆ back to top

Methods

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

$().viewer({
  built: function () {
    // 2 methods are available here: "show" and "destroy".
  },
  shown: function () {
    // 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy".
  },
  viewed: function () {
    // All methods are available here except "show".
    $(this).viewer('rotate', 90).viewer('scale', -1, -1);
  }
}

show()

Show the viewer.

Only available in modal mode.

hide()

hide the viewer.

Only available in modal mode.

view([index])

View one of the images with image's index.

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

prev()

View the previous image.

next()

View the next image.

move(offsetX[, offsetY])

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])

Move the image to an absolute point.

zoom(ratio[, hasTooltip])

Zoom the image with a relative ratio

$().viewer('zoom', 0.1);
$().viewer('zoom', -0.1);

zoomTo(ratio[, hasTooltip])

Zoom the image to an absolute ratio.

$().viewer('zoomTo', 0); // Zoom to zero size (0%)
$().viewer('zoomTo', 1); // Zoom to natural size (100%)

rotate(degree)

Rotate the image with a relative degree.

Requires CSS3 2D Transforms support (IE 9+).

$().viewer('rotate', 90);
$().viewer('rotate', -90);

rotateTo(degree)

Rotate the image to an absolute degree.

Requires CSS3 2D Transforms support (IE 9+).

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

scale(scaleX[, scaleY])

Scale the image.

Requires CSS3 2D Transforms support (IE 9+).

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

scaleX(scaleX)

Scale the abscissa of the image.

Requires CSS3 2D Transforms support (IE 9+).

$().viewer('scaleX', -1); // Flip horizontal

scaleY(scaleY)

Scale the ordinate of the image.

Requires CSS3 2D Transforms support (IE 9+).

$().viewer('scaleY', -1); // Flip vertical

play()

Play the images.

stop()

Stop play.

full()

Enter modal mode.

Only available in inline mode.

exit()

Exit modal mode.

Only available in inline mode.

tooltip()

Show the current ratio of the image with percentage.

Requires the tooltip option set to true.

toggle()

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

reset()

Reset the image to its initial state.

update()

Update the viewer when images changed.

If you load images dynamically, 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

ready

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

This event fires when the viewer modal starts to show.

Only available in modal mode.

shown

This event fires when the viewer modal has shown.

Only available in modal mode.

hide

This event fires when the viewer modal starts to hide.

Only available in modal mode.

hidden

This event fires when the viewer modal has hidden.

Only available in modal mode.

view

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

viewed

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

⬆ back to top

No conflict

If you have to use other plugin with the same namespace, just call the $.fn.viewer.noConflict method to revert to it.

<script src="other-plugin.js"></script>
<script src="viewer.js"></script>
<script>
  $.fn.viewer.noConflict();
  // Code that uses other plugin's "$().viewer" can follow here.
</script>

Contributing

Please read through our contributing guidelines.

Browser support

As a jQuery plugin, you also need to see the jQuery Browser Support.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Chen Fengyuan

⬆ back to top

Viewer

Related posts:

TouchTouch
nanoGallery
PhotoSwipe

To install using Bower
bower install imageviewer

viewer jQuery plugin

http://jquer.in/wp-content/uploads/2015/11/viewer.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever