https://github.com/oom-components/viewer
Image viewer
https://github.com/oom-components/viewer
es6 image-viewer progressive-enhancement vanilla-javascript viewer
Last synced: 9 months ago
JSON representation
Image viewer
- Host: GitHub
- URL: https://github.com/oom-components/viewer
- Owner: oom-components
- License: mit
- Created: 2017-06-03T14:30:31.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-05T10:16:26.000Z (almost 9 years ago)
- Last Synced: 2025-03-10T00:55:32.861Z (over 1 year ago)
- Topics: es6, image-viewer, progressive-enhancement, vanilla-javascript, viewer
- Language: JavaScript
- Size: 26.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PW Viewer
Image viewer with the following features:
* Follows the progressive enhancement strategy: **if javascript fails, the web page keeps working**
* CSS powered:
* **High performance:** Use css transform to scale, rotate, translate elements
* No styles or themes are provided with this package. **You decide how the viewer must look.**
* Responsive:
* **Suport for touch devices**
* **Works with ``** element
* **Light and fast**
* Modern
* Build with ES6 and modern tools (webpack, babel, etc)
* Easy to extend and adapt to your needs
* Support for **all modern browsers.** IE10+ should work
## Install
Requirements:
* NPM to install the [package and the dependencies](https://www.npmjs.com/package/pw-viewer)
* Webpack (or any other javascript loader)
```
npm install pw-viewer
```
## Usage
### Html
Let's say we have the following html code:
```html
Zoom
Reset
![]()
```
Note the `data-viewer-src` attribute in the image. It's used to load a full quality image on zoom.
### CSS
The following css code is optional (but recommended):
```css
.viewer {
overflow: hidden;
margin: 0;
}
.viewer img {
max-width: 100%;
display: block;
margin: 0 auto;
transition: transform .5s;
}
```
### JS
And finally the javascript to build the viewer:
```js
import Viewer from 'pw-viewer';
//Init the viewer
var myViewer = new Viewer(document.querySelector('.viewer img'));
//Zoom on click the button
document.querySelector('.viewer-zoom').addEventListener('click', event => {
myViewer.transform({ scale: 1.5 }); //zoom
myViewer.drag(true); //enable dragging
});
document.querySelector('.viewer-reset').addEventListener('click', event => {
myViewer.reset(); //Reset transforms
myViewer.drag(false); //disable dragging
});
```
## Demo
To run the demo, just clone this repository enter in the directory and execute:
```sh
npm install
npm start
```
You should see something in `http://localhost:8080/`