Dependency-free implementation of zoom.js (no jQuery or Bootstrap)

Related tags

Learning resource zoom.js
Overview

ZOOM.JS

Repo status

  • Nov 2020: Maintained, but bug fixes only. No new features currently, please. There may eventually be a new major version with new API and features.

Overview

npm (scoped)

A pure JavaScript image zooming plugin; as seen on Medium.com.

Has no jQuery or Bootstrap dependencies.

This is a port of the original version by @fat: https://github.com/fat/zoom.js.

Usage

You can use zoom.js directly as a script, or install via npm.

Direct

  1. Link the zoom.js and zoom.css files to your site or application.
<link href="css/zoom.css" rel="stylesheet">
<script src="dist/zoom.js"></script>
  1. Add a data-action="zoom" attribute to the images you want to make zoomable. For example:
<img src="img/blog_post_featured.png" data-action="zoom">

Via npm

  1. Install the package: npm i @nishanths/zoom.js
  2. Link the zoom.css file to your application.
 <link href="css/zoom.css" rel="stylesheet">
  1. Import the package and call zoom.setup(elem) for each image you want to make zoomable.
import { zoom } from "@nishanths/zoom.js";

var imgElem = new Image();
imgElem.src = "tree.png";
document.body.appendChild(imgElem);

zoom.setup(imgElem);

Demo

https://nishanths.github.io/zoom.js

gif

Notes

It has the same behavior and all the features from the original implementation. But:

* In addition to the dist/ scripts, it's available as an npm module.
* Browser compatibility may be lower. Uses the transitionend event without
  vendor prefixes, so IE 10 or higher.

License

Original license

This is a fork of the original zoom.js implementation by @fat. Copyrights for the original project are held by @fat. All other copyright for changes in the fork are held by Nishanth Shanmugham.

Copyright (c) 2013 @fat The MIT License. Copyright © 2016 Nishanth Shanmugham.

Comments
  • CSS opacity transition onClose is missing

    CSS opacity transition onClose is missing

    to get the opacity transition to work at the end, it should read smtg like:

    .zoom-overlay {
  opacity: 0;
  -webkit-transition:      opacity 300ms ease-in-out;
       -o-transition:      opacity 300ms ease-in-out;
          transition:      opacity 300ms ease-in-out;
}
.zoom-overlay-open .zoom-overlay {
  opacity: 1;
}
.zoom-overlay-transitioning .zoom-overlay {
  opacity: 0;
}

    .zoom-overlay-open is remove at transitionEnd.

    opened by bbenezech 5
  • Build UMD version

    Build UMD version

    It would be easier to work with webpack and single page app, and init it manually:

    import zoom from 'zoom.js'

zoom.setup(document.querySelectorAll('.my-els'))
    opened by egoist 5
  • Publish to npm

    Publish to npm

    I can't seem to find the package on npm under zoom.js. this is the link I used and the package is not published: https://www.npmjs.com/package/zoom.js

    Do you think you can publish it?

    opened by kennetpostigo 3
  • Edge compability

    Edge compability

    I set up a minimum page, and it seems to work fine in all major browsers...except edge. When clicking an image, it zooms in correctly, but when zooming out all other content is gone from the webpage.

    opened by oaeide 3
  • Enhance to function as a lightbox

    Enhance to function as a lightbox

    I like the simplicity of this library and was considering using it. But it is not the same technique that medium uses to zoom images. They use the lightbox technique which requires 2 versions of the same image; a scaled-down version which is loaded by default and zoomed to the full-size version that is loaded upon click. Like this:

        <a href="full.jpg">
        <img src="thumb.jpg" />
    </a>

    In fact, a webpage using zoom.js will be penalized by google's search ranking algorithm for inefficiently formatting images.

    https://developers.google.com/speed/pagespeed/insights/?url=https://nishanths.github.io/zoom.js/

    Do you have plans to further develop this? I think it would be great it if had the ability to zoom from a scaled-down image to a full-size image. The API could stay the same:

        zoom.setup(elem);

    Where elem is either a normal img element, or it could be an anchor element wrapping an img element, as above. If an img element, it functions exactly as it does now. If an anchor element, it functions as a lightbox.

    opened by evoyy 2
Owner
Nishanth Shanmugham
Nishanth Shanmugham
GitHub https://nishanths.github.io/zoom.js
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Mario Duarte 8 Aug 3, 2022
My very own fantastic jQuery ZOOM plugin.

jQuery ZOOM plugin Coded by Robert Koteles, Senior Frontend Developer, 2015. This plugin was coded by me while worked as senior web developer/web mana

Robert Koteles 2 Oct 13, 2022
ezoom.js is a jQuery plugin for simple Image with zoom effect.

ezoom.js ezoom.js is a jQuery plugin for simple Image with zoom effect. This plugin in under development to support Next/Prev a gallery Images/SVG lat

Nam Le 3 Sep 3, 2022
A command-line tool to convert Project Zomboid map data into Deep Zoom format

pzmap2dzi pzmap2dzi is a command-line tool running on Windows to convert Project Zomboid map data into Deep Zoom format. Features Supports both python

Min Xiang 14 Dec 31, 2022
🔍 A view component for React Native with pinch to zoom and drag to pan functionality.

react-native-pan-pinch-view A view component for React Native with pinch to zoom and drag to pan functionality. ?? Introduction Even though the demo s

Ivanka Todorova 43 Oct 6, 2022
Easy Pan and Zoom JS Library

EasyPZ Use this Javascript library to make your web visualization interactive via pan and zoom, for mobile and desktop! EasyPZ supports many interacti

Micha Schwab 129 Nov 21, 2022
A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.

svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma

31 Dec 10, 2022
a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

JSTable The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive. The plugin is similar to the jQuery data

null 63 Oct 20, 2022
DOM ViewModel - A thin, fast, dependency-free vdom view layer

domvm (DOM ViewModel) A thin, fast, dependency-free vdom view layer (MIT Licensed) Introduction domvm is a flexible, pure-js view layer for building h

null 604 Dec 8, 2022
Small, typed, dependency free tool to round corners of 2d-polygon provided by an array of { x, y } points.

round-polygon Small, typed, dependency-free tool to round corners of 2d-polygon provided by an array of { x, y } points. The algorithm prevents roundi

Sergey Borovikov 10 Nov 26, 2022
A low-feature, dependency-free and performant test runner inspired by Rust and Deno

minitest A low-feature, dependency-free and performant test runner inspired by Rust and Deno Simplicity: Use the mt test runner with the test function

Sondre Aasemoen 4 Nov 12, 2022
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 3, 2023
Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

loading="lazy" attribute polyfill Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements rig

Maximilian Franzke 571 Dec 30, 2022
The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

The JSTable is a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive. The plugin is similar to the jQuery data

null 63 Oct 20, 2022
This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different currencies and formattings.

intl-currency-input This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different

null 6 Jan 4, 2023
A dependency-free JavaScript library for creating discreet pop-up notifications.

Polipop A dependency-free JavaScript library for creating discreet pop-up notifications. Demo See demo at minitek.github.io/polipop/. Documentation Se

Minitek 8 Aug 15, 2022
DateTimePickerComponent is a very lightweight and dependency-free web component written in pure JavaScript

DateTimePickerComponent Description DateTimePickerComponent is a very lightweight (just over 20KB) and dependency-free web component written in pure J

null 14 Dec 24, 2022