All Projects → fengyuanchen → Jquery Viewer

fengyuanchen / Jquery Viewer

Licence: mit
A jQuery plugin wrapper for Viewer.js.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Jquery Viewer

Viewer
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-viewer
Stars: ✭ 985 (+319.15%)
Mutual labels:  jquery-plugin, viewer, image-viewer, jquery
Imgviewer
jQuery plugin to zoom and pan images, even those with a size that is a percentage of their container
Stars: ✭ 50 (-78.72%)
Mutual labels:  jquery-plugin, viewer, jquery
Bootstrap Checkbox
A checkbox component based on Bootstrap framework.
Stars: ✭ 214 (-8.94%)
Mutual labels:  jquery-plugin, jquery
Bs grid
Bootstrap Datagrid
Stars: ✭ 184 (-21.7%)
Mutual labels:  jquery-plugin, jquery
Liteaccordion
A lightweight horizontal accordion plugin for jQuery.
Stars: ✭ 234 (-0.43%)
Mutual labels:  jquery-plugin, jquery
Percircle
⭕️ CSS percentage circle built with jQuery
Stars: ✭ 217 (-7.66%)
Mutual labels:  jquery-plugin, jquery
Jquery.redirect
jQuery Redirect Plugin
Stars: ✭ 182 (-22.55%)
Mutual labels:  jquery-plugin, jquery
Amaranjs
Nice, sleek and stylish notifications.
Stars: ✭ 214 (-8.94%)
Mutual labels:  jquery-plugin, jquery
Sticky Sidebar
😎 Pure JavaScript tool for making smart and high performance sticky sidebar.
Stars: ✭ 2,057 (+775.32%)
Mutual labels:  jquery-plugin, jquery
Jquery Multiselect
Turn a multiselect list into a nice and easy to use list with checkboxes.
Stars: ✭ 221 (-5.96%)
Mutual labels:  jquery-plugin, jquery
Calx.js
jQuery Calx - a jQuery plugin for creating formula-based calculation form
Stars: ✭ 190 (-19.15%)
Mutual labels:  jquery-plugin, jquery
Jquery Gantt
🌈 Lightweight jQuery gantt plugin.
Stars: ✭ 193 (-17.87%)
Mutual labels:  jquery-plugin, jquery
Magnify
A lightweight jQuery magnifying glass zoom plugin.
Stars: ✭ 218 (-7.23%)
Mutual labels:  jquery-plugin, jquery
Bootstrap Input Spinner
A Bootstrap 4 / jQuery plugin to create input spinner elements for number input
Stars: ✭ 176 (-25.11%)
Mutual labels:  jquery-plugin, jquery
Jquery Contextmenu
jQuery contextMenu plugin & polyfill
Stars: ✭ 2,148 (+814.04%)
Mutual labels:  jquery-plugin, jquery
Bdialog
Extend the Bootstrap Modal features, making dialog more functions and easier to use, dialog type including modal, alert, mask and toast types
Stars: ✭ 174 (-25.96%)
Mutual labels:  jquery-plugin, jquery
Rangeslider.js
🎚 HTML5 input range slider element polyfill
Stars: ✭ 2,153 (+816.17%)
Mutual labels:  jquery-plugin, jquery
Hc Offcanvas Nav
JavaScript library for creating toggled off-canvas multi-level navigations, allowing endless nesting of submenu elements, supporting swipe gestures, keyboard interactions and ARIA attributes.
Stars: ✭ 201 (-14.47%)
Mutual labels:  jquery-plugin, jquery
Jquery Scrollstop
A jQuery plugin that fires events when scrolling stops and starts.
Stars: ✭ 158 (-32.77%)
Mutual labels:  jquery-plugin, jquery
Stickyfloat
This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.
Stars: ✭ 166 (-29.36%)
Mutual labels:  jquery-plugin, jquery

jquery-viewer

Build Status Coverage Status Downloads Version

A jQuery plugin wrapper for Viewer.js.

Main

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

Getting started

Installation

npm install jquery-viewer jquery viewerjs

Include files:

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

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="jquery-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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].