A lightweight TypeScript library for image and video zooming, as seen on Medium.
A lightweight TypeScript library for image and video zooming, as seen on Medium.
zoom.ts easily plugs into your application with minimal overhead by including
no third-party dependencies and requiring just 8kB of bandwidth when
optimized. Once marked as zoomable, clicking an image or video will smoothly
expand it to fit the browser's entire viewport. The zoomed element will then
await dismissal from the user, either by clicking or scrolling away.
A running demonstration can be found here.
Holding either the ⌘ or Ctrl key whilst clicking the element will open the image in a new tab.
Zoomed elements can be dismissed either by clicking the element, scrolling away, or pressing Esc.
The TypeScript library can be imported and instantiated:
import { Zoom } from 'zoom.ts/lib/Zoom';
new Zoom().listen();
Or the JavaScript distribution can be linked, which will register
zoom as a global which can be accessed by the browser:
<script type="text/javascript" src="dist/zoom.js"></script>
<script type="text/javascript">
new window.zoom.Zoom().listen();
</script>
A minified version of the JavaScript distribution is available at
./dist/zoom.min.js.
The SCSS file can be imported:
@import '~zoom.ts/style/zoom';
Or the CSS distribution can be linked:
<link rel="stylesheet" type="text/css" href="dist/zoom.css" />
A minified version of the CSS distribution is aviailable at
./dist/zoom.min.css.
Add the data-zoom="zoom-in" attribute to an <img> or <video> to have it
zoom in when clicked.
The loading of a large resource can be deferred by specifying a data-zoom-src
attribute, where the value assigned contains the resource to load once the user
expands the element. The resource specified in the attribute is also the
resource that will be loaded if the user opens the image by clicking with either
⌘ or Ctrl held.
In the example snippet below an image of a forest will be displayed. Once the
user clicks to zoom in the image their browser will request the larger
forest-full.jpg file and replace the original <img> with the full-resolution
version.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="zoom.min.css" />
</head>
<body>
<main>
<img src="forest.jpg" data-zoom="zoom-in" data-zoom-src="forest-full.jpg">
</main>
<script type="text/javascript" src="dist/zoom.min.js"></script>
<script type="text/javascript">
new window.zoom.Zoom().listen();
</script>
</body>
</html>
Documentation is generated in the ./docs directory by TypeDoc and
can be viewed online here.
Node.js is used to build the distribution.
The following commands can be ran in the project:
npm run build
npm run watch
npm run clean
./dist directory.Bug reports and pull requests are welcome on GitHub.
This project is available under the terms of the MIT license. See the
LICENSE file for the copyright information and licensing terms.
FAQs
A lightweight TypeScript library for image zooming, as seen on Medium.
The npm package zoom.ts receives a total of 0 weekly downloads. As such, zoom.ts popularity was classified as not popular.
We found that zoom.ts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.