fengyuanchen / Jquery Viewer
Licence: mit
A jQuery plugin wrapper for Viewer.js.
Stars: ✭ 235
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
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
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
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
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].