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

Build Status Downloads Version

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

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.

Contributing

Please read through our contributing guidelines.

Versioning

Maintained under the Semantic Versioning guidelines.

License

MIT © Chen Fengyuan

Viewer

Related posts:

Space Gallery
jQuery-flexImages
Captioner-Js

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
Couple Gift Ideas