net-tools/view-bigimg

Composer library view-bigimg

Maintainers

Details

github.com/net-tools/view-bigimg

Source

Installs: 6

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 10

Language:JavaScript

1.0.0 2020-06-09 12:14 UTC

MIT 32aabdf02fcea48f10fcf2116ab012236f066c18

  • Pierre <dev.woop@nettools.ovh>
  • https://github.com/newming/view-bigimg

This package is auto-updated.

Last update: 2024-12-09 22:15:53 UTC

README

a pure library for zooming and panning your web images

demo

Features

  • Support touch devices
  • Smooth dragging and panning images
  • Pinch in / Pinch out to zoom in/ zoom out

How to use

A. with inline script

<link rel="stylesheet" href="view-bigimg.css">
<script src="view-bigimg.js"></script>
<script>
  var viewer = new ViewBigimg()

  var wrap = document.getElementById('wrap')
  wrap.onclick = function (e) {
    if (e.target.nodeName === 'IMG') {
      viewer.show(e.target.src.replace('.jpg', '-big.jpg'))
    }
  }
</script>

B. with npm

npm i view-bigimg
import 'view-bigimg/lib/view-bigimg.css'
import ViewBigimg from 'view-bigimg'

var viewer = new ViewBigimg
viewer.show(imgsrc)

API

  • new ViewBigimg(options)
    • show(imgsrc)
    • destroy()

new ViewBigimg(options)

Creates an instance of ViewBigimg