1.1.0 • Published 6 years ago

imageviewer v1.1.0

Weekly downloads
313
License
MIT
Repository
github
Last release
6 years ago

Viewer

Build Status Downloads Version Dependencies

A simple jQuery image viewing plugin. As of v1.0.0, the core code of Viewer is replaced with Viewer.js.

  • Demo
  • Viewer.js - JavaScript image viewer (recommended)
  • jquery-viewer - A jQuery plugin wrapper for Viewer.js (recommended for jQuery users to use this instead of Viewer)

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

Installation

npm install imageviewer jquery

Include files:

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

Usage

Initialize with $.fn.viewer method.

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

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>
var $image = $('#image');

$image.viewer({
  inline: true,
  viewed: function() {
    $image.viewer('zoomTo', 1);
  }
});

// Get the Viewer.js instance after initialized
var viewer = $image.data('viewer');

// View a list of images
$('#images').viewer();

Options

See the available options of Viewer.js.

$().viewer(options);

Methods

See the available methods of Viewer.js.

$().viewer('method', argument1, , argument2, ..., argumentN);

Events

See the available events of Viewer.js.

$().on('event', handler);

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>

Browser support

It is the same as the browser support of Viewer.js. As a jQuery plugin, you also need to see the jQuery Browser Support.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Chen Fengyuan

1.1.0

6 years ago

1.0.0

7 years ago

1.0.0-beta

7 years ago

1.0.0-alpha

7 years ago

0.6.0

8 years ago

0.5.1

9 years ago

0.5.0

10 years ago

0.4.0

10 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.0

10 years ago