Versatile & Flexible jQuery Image Viewer Plugin - viewer

Versatile & Flexible jQuery Image Viewer Plugin - viewer
File Size: 2.78 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Viewer is a powerful, multi-functional, cross-browser and highly configurable image viewer plugin used to present your favorite images in an elegant way.

Features:

  • Responsive and touch friendly.
  • Keyboard support.
  • Modal and Gallery modes.
  • Allows to zoom, rotate, flip images.
  • Tons of configuration options and APIs.

Basic usage:

1. Include references to jQuery library, viewer.css and viewer.js itself at the bottom of the webpage.

<link rel="stylesheet" href="dist/viewer.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/viewer.js"></script>

2. Add a list of photos you want to present into the image viewer. The data-original attribute is used to specify the original version of your image.

<ul class="demo">
  <li><img data-original="full-1.jpg" src="thumb-1.jpg"></li>
  <li><img data-original="full-2.jpg" src="thumb-2.jpg"></li>
  <li><img data-original="full-3.jpg" src="thumb-3.jpg"></li>
</ul>

3. Initialize the image viewer with default options.

$('.demo').viewer();

4. Plugin's default options.

// Enable inline mode
inline: false,

// Show the button on the top-right of the viewer
button: true,

// Show the navbar
navbar: true,

// Show the title
title: true,

// Show the toolbar
toolbar: true,

// Show the tooltip with image ratio (percentage) when zoom in or zoom out
tooltip: true,

// Enable to move the image
movable: true,

// Enable to zoom the image
zoomable: true,

// Enable to rotate the image
rotatable: true,

// Enable to scale the image
scalable: true,

// Enable CSS3 Transition for some special elements
transition: true,

// Enable to request fullscreen when play
fullscreen: true,

// Enable keyboard support
keyboard: true,

// Define interval of each image when playing
interval: 5000,

// Min width of the viewer in inline mode
minWidth: 200,

// Min height of the viewer in inline mode
minHeight: 100,

// Define the ratio when zoom the image by wheeling mouse
zoomRatio: 0.1,

// Define the min ratio of the image when zoom out
minZoomRatio: 0.01,

// Define the max ratio of the image when zoom in
maxZoomRatio: 100,

// Define the CSS `z-index` value of viewer in modal mode.
zIndex: 2015,

// Define the CSS `z-index` value of viewer in inline mode.
zIndexInline: 0,

// Define where to get the original image URL for viewing
// Type: String (an image attribute) or Function (should return an image URL)
url: 'src',

// Event shortcuts
build: null,
built: null,
show: null,
shown: null,
hide: null,
hidden: null,
view: null,
viewed: null

6. Public methods.

// show the image viewer
$(#el).viewer('show');

// hide the image viewer
$(#el).viewer('hide');

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

// previous image
$(#el).viewer('prev');

// next image
$(#el).viewer('next');

// play the image gallery
$(#el).viewer('play');

// stop the autoplay
$(#el).viewer('stop');

// enter fullscreen modal mode
$(#el).viewer('full');

// exit fullscreen modal mode
$(#el).viewer('full');

// show the current ratio of the image with percentage.
$(#el).viewer('tooltip');

// toggle the image size between its natural size and initial size.
$(#el).viewer('toggle');

// reset the plugin.
$(#el).viewer('reset');

// destroy the plugin
$(#el).viewer('destroy');

// move images
$(#el).viewer('move', 1);
$(#el).viewer('move', -1, 0); // Move left
$(#el).viewer('move', 1, 0);  // Move right
$(#el).viewer('move', 0, -1); // Move up
$(#el).viewer('move', 0, 1);  // Move down

// Move the image to an absolute point.
// x: The left value of the image
// y: The top value of the image
moveTo(x, y)

// zoom in / out the image
$(#el).viewer('zoom', 0.1);

// zoom the image to a special ratio.
$(#el).viewer('zoomTo', 0); // Zoom to zero size (0%)
$(#el).viewer('zoomTo', 1); // Zoom to natural size (100%)

// rotate the image using CSS3 transform property
$(#el).viewer('rotate', 90);
$(#el).viewer('rotateTo', 360); // Rotate a full round

// flip the image using CSS3 transform property
$(#el).viewer('scale', -1); // Flip both horizontal and vertical
$(#el).viewer('scale', -1, 1); // Flip horizontal
$(#el).viewer('scale', 1, -1); // Flip vertical

// scale the image using CSS3 transform property
$(#el).viewer('scaleX', -1); // Flip horizontal
$(#el).viewer('scaleY', -1); // Flip vertical

7. Events.

// show the image viewer
$(#el).viewer('show');

// hide the image viewer
$(#el).viewer('hide');

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

// previous image
$(#el).viewer('prev');

// next image
$(#el).viewer('next');

// play the image gallery
$(#el).viewer('play');

// stop the autoplay
$(#el).viewer('stop');

// enter fullscreen modal mode
$(#el).viewer('full');

// exit fullscreen modal mode
$(#el).viewer('full');

// show the current ratio of the image with percentage.
$(#el).viewer('tooltip');

// toggle the image size between its natural size and initial size.
$(#el).viewer('toggle');

// reset the plugin.
$(#el).viewer('reset');

// destroy the plugin
$(#el).viewer('destroy');

// move images
$(#el).viewer('move', 1);
$(#el).viewer('move', -1, 0); // Move left
$(#el).viewer('move', 1, 0);  // Move right
$(#el).viewer('move', 0, -1); // Move up
$(#el).viewer('move', 0, 1);  // Move down

// zoom in / out the image
$(#el)..on({
  'build.viewer': handler,
  'built.viewer': handler,
  'show.viewer': handler,
  'shown.viewer': handler,
  'hide.viewer': handler,
  'hidden.viewer': handler
}).viewer(options);

Change logs:

v1.0.0alpha (2018-03-11)

  • Refactor in ES6.

v0.6.0 (2017-10-08)

  • Refactor in ES6.
  • Build CSS code with PostCSS.
  • Removed build event.
  • Renamed built event to ready.
  • Removed event namespace.

v0.5.1 (2016-03-11)

  • Fixed the issue of the "button" option 
  • Fixed the issue of the "$.fn.viewer.setDefault" static method

v0.5.0 (2016-01-21)

  • Add more available values to the "title", "toolbar" and "navbar" options.
  • Support to toggle the visibility of title, toolbar and navbar between different screen widths.
  • Exit fullscreen when stop playing.
  • Fixed title not generated bug.

v0.4.0 (2016-01-01)

  • Supports to zoom from event triggering point.

v0.3.1 (2015-12-28)

  • Supports to zoom from event triggering point.
  • Fix a bug of the index of viewing image.

v0.3.0 (2015-12-24)

  • Add 2 new options: "view" and "viewed"
  • Add 2 new events: "view" and "viewed"
  • Add keyboard support: stop playing when tap the Space key
  • Fix lost transition after call full method in inline mode
  • Fix incorrect tooltip after switch image quickly

v0.2.0 (2015-10-18)

  • Added one new method: "moveTo"
  • Improved the image loading and showing.

v0.1.1 (2015-10-07)

  • Fixed the issue of modal closing after zoomed in and zoomed out.

This awesome jQuery plugin is developed by fengyuanchen. For more Advanced Usages, please check the demo page or visit the official website.