fengyuanchen / Viewer
Licence: mit
⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-viewer
Stars: ✭ 985
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Viewer
Jquery Viewer
A jQuery plugin wrapper for Viewer.js.
Stars: ✭ 235 (-76.14%)
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 (-94.92%)
Mutual labels: jquery-plugin, viewer, jquery
Printthis
jQuery printing plugin; print specific elements on a page
Stars: ✭ 902 (-8.43%)
Mutual labels: jquery-plugin, jquery
Jquery Datetextentry
jQuery plugin providing a widget for date entry (not a date picker)
Stars: ✭ 19 (-98.07%)
Mutual labels: jquery-plugin, jquery
Jquery.lazy
A lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto.
Stars: ✭ 965 (-2.03%)
Mutual labels: jquery-plugin, jquery
Parallax background
jQuery parallax background plugin based on GSAP
Stars: ✭ 30 (-96.95%)
Mutual labels: jquery-plugin, jquery
Jquery Powertip
💬 A jQuery plugin that creates hover tooltips.
Stars: ✭ 822 (-16.55%)
Mutual labels: jquery-plugin, jquery
Cz Parallax
Simple and tiny jQuery plugin for Parallax effect.
Stars: ✭ 10 (-98.98%)
Mutual labels: jquery-plugin, jquery
Jquery Drawsvg
Lightweight, simple to use jQuery plugin to animate SVG paths
Stars: ✭ 759 (-22.94%)
Mutual labels: jquery-plugin, jquery
Bootstrap Msg
The jQuery plugin for showing message with Bootstrap alert classes
Stars: ✭ 10 (-98.98%)
Mutual labels: jquery-plugin, jquery
Gridstrap.js
gridstrap.js is a jQuery plugin designed to take Bootstrap's CSS grid system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour.
Stars: ✭ 32 (-96.75%)
Mutual labels: jquery-plugin, jquery
Trip.js
🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
Stars: ✭ 789 (-19.9%)
Mutual labels: jquery-plugin, jquery
Tableexport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
Stars: ✭ 781 (-20.71%)
Mutual labels: jquery-plugin, jquery
Push State
Turn static web sites into dynamic web apps.
Stars: ✭ 16 (-98.38%)
Mutual labels: jquery-plugin, jquery
Jquery Animatenumber
jQuery animate number
Stars: ✭ 768 (-22.03%)
Mutual labels: jquery-plugin, jquery
Inputtounsi
A jQuery plugin for entering and validating Tunisian users' data or any other data. It is made very easy to use and easier to customize
Stars: ✭ 25 (-97.46%)
Mutual labels: jquery-plugin, jquery
Sticky Nav
A jQuery plugin make the navbar sticky, smart anchor link highlighting, smooth scrolling. Simple and powerful.
Stars: ✭ 21 (-97.87%)
Mutual labels: jquery-plugin, jquery
Jquery Selectric
jQuery plugin for easy manipulation and customization of HTML selects
Stars: ✭ 724 (-26.5%)
Mutual labels: jquery-plugin, jquery
Simplelightbox
Touch-friendly image lightbox for mobile and desktop
Stars: ✭ 744 (-24.47%)
Mutual labels: image-viewer, jquery
Viewer
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
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].