🏸 A simple plugin for image zooming without dependencies ~1.65KB gzip

Overview

ZOOOM.JS

A simple plugin for image zoooming without dependencies. Only pure javascipt.

Installation

CDN

JavaScript

<script src="https://cdn.jsdelivr.net/gh/tomik23/[email protected]/dist/zooom.min.js"></script>

Note: In the dist folder we have available iffe, umd and es versions as well as minified *.min.js versions

-- OR --

Download from dist folder and insert to html:

  • zooom.min.js

Demo

See the demo - example

How to add basic version to page

  1. Just download the library from the dist/zoom.min.js and add it to head. Libraries in iffe, umd, esm and IE compatible library are available.
<script src="path/to/zooom.min.js"></script>
  1. For each photo you want to grow, add a class in our example it's img-zoom
<img class="img-zoom" src="./images/image.jpg" />
  1. Now all you have to do is call our library, this is the simplest example. Below you will find a description of how to configure the library more.
<script>
  window.addEventListener("DOMContentLoaded", function () {
    new Zooom("img-zoom");
  });
</script>

Clone the repo and install dependencies

git clone https://github.com/tomik23/zooom.js.git
cd zooom
yarn
# or
npm i

Watch/Build the app

Watch the app, just call:

yarn dev
# or
npm run dev

Build app:

yarn prod
# or
npm run prod

Configuration of the plugin

props type default require description
zIndex Number 1 Option to control layer positions
animationTime Number 300 Animation speed in milliseconds
in / out String zoom-in / zoom-out The cursor property specifies the mouse cursor to be displayed when pointing over an element
overlay String Overlay layer color and opacity rgba(255,255,255,0.9); or hsla(0, 0%, 100%, 0.9);
data-zooom-big string The large version of the photo is the views instead of the thumbnail
onResize Function A function that can be used to block clicking on an image. See example below - How to prevent zoom-in/out images
onOpen Function A helper function with which we can, for example, add text from the caption to the photo to show when zooming in on the photo. In the function we have access to the image element
onClose Function A function that runs when the photo is closed. It can be combined with the function onOpen see example. As in the previous onOpen function, here we have access to the image element

Minimal configuration

new Zooom("img-zoom");

Sample configuration

new Zooom("img-zoom", {
  // control layer positions
  zIndex: 9,

  // animation time in number
  animationTime: 300,

  // cursor type
  cursor: {
    in: "zoom-in",
    out: "zoom-out",
  },

  // overlay layer color and opacity, rgba, hsla, ...
  overlay: "rgba(255,255,255,0.9)",

  // callback function
  // see usage example docs/index.html
  onResize: function () {},
  onOpen: function (element) {},
  onClose: function (element) {},
});

How to use Zooom with Bootstrap Carousel

See an example

new Zooom("img-zoom", {
  zIndex: 9,

  // animation time in number
  animationTime: 300,

  // cursor type
  cursor: {
    in: "zoom-in",
    out: "zoom-out",
  },

  // overlay layer color and opacity, rgba, hsla, ...
  overlay: "rgba(255,255,255,0.9)",

  // callback function
  // see usage example docs/index.html
  onOpen: function (element) {
    // we stop automatic scrolling when we do zoom images
    $(".carousel").carousel("pause");
  },

  onClose: function (element) {
    // we restart the carousels after closing the photo
    $(".carousel").carousel("cycle");
  },
});

How to prevent zoom-in/out images

Below is an example showing how to block a click when the browser width is less than 600px Of course, here is an example with the width of the window, but nothing prevents you from using it in a different way. The most important thing is to return the logical value - true/false. Each reduction/reduction of the window reads this variable and blocks the click.

new Zooom("img-zoom", {
  // we set different types of cursor depending on
  // the width of the window below we pass
  // the variables for the cursor styles set
  // dynamically in the calback onResize function
  cursor: {
    in: "var(--zoom-in)",
    out: "var(--zoom-out)",
  },
  onResize: function () {
    // we set the page width from which it will
    // be possible to click on the image
    let responsiveMin = 600;

    // we check the width of the browser window
    const windowWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;

    // we return the boolean value 'true/false'
    // the value 'true' blocks clicking the image
    const widthWindow = windowWidth < responsiveMin ? true : false;

    // I set different cursors depending on the width of the window
    const root = document.documentElement;
    root.style.setProperty("--zoom-in", widthWindow ? "default" : "zoom-in");
    root.style.setProperty("--zoom-out", widthWindow ? "default" : "zoom-out");

    return widthWindow;
  },
});

Browser support

Zooom supports all major browsers including IE 11 and above. It also works in the overflow element.

If you want to use data-zooom-big on IE browser you have to use polyfill for promise https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js

local files

  • dist/zooom.ie.min.js

cdn

License

This project is available under the MIT license.

Comments
  • Images zoom to bottom cente

    Images zoom to bottom cente

    Hey, all my images are zooming to the bottom middle if the page has enough content to make it scrollable, are you aware of a calculation that can be overwritten to fix this?

    Thanks

    image

    opened by Soitora 6
  • chore(deps): bump minimist from 1.2.5 to 1.2.6

    chore(deps): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump terser from 5.3.0 to 5.14.2

    chore(deps): bump terser from 5.3.0 to 5.14.2

    Bumps terser from 5.3.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency

    v5.10.0

    • Massive optimization to max_line_len (#1109)
    • Basic support for import assertions
    • Marked ES2022 Object.hasOwn as a pure function
    • Fix delete optional?.property
    • New CI/CD pipeline with github actions (#1057)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump ajv from 6.12.2 to 6.12.6

    chore(deps): bump ajv from 6.12.2 to 6.12.6

    Bumps ajv from 6.12.2 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build: IE-version

    build: IE-version

    Added

    • generating a separate file for IE browser, rollup.config - typescript target [es6, es5]

    Changed

    • simplification of the 'overlay' styling
    overlay: {
      color: '#fff',
      opacity: 80,
    },
    

    on

    // overlay layer color and opacity, rgba, hsla, ...
    overlay: "rgba(255, 255, 255, 0.9)",
    

    Build

    • adding method and props in 'terser' mangle, adding an undeline _zooomInit = () => {...}
    terserOptions: {
      mangle: {
        properties: {
          regex: /^_/,
        },
      },
    },
    

    This solution allowed to reduce the library by as much as 23%

    opened by tomik23 0
  • chore(deps): bump ansi-regex from 5.0.0 to 5.0.1

    chore(deps): bump ansi-regex from 5.0.0 to 5.0.1

    Bumps ansi-regex from 5.0.0 to 5.0.1.

    Release notes

    Sourced from ansi-regex's releases.

    v5.0.1

    Fixes (backport of 6.0.1 to v5)

    This is a backport of the minor ReDos vulnerability in ansi-regex@<6.0.1, as requested in #38.

    • Fix ReDoS in certain cases (#37) You are only really affected if you run the regex on untrusted user input in a server context, which it's very unlikely anyone is doing, since this regex is mainly used in command-line tools.

    CVE-2021-3807

    https://github.com/chalk/ansi-regex/compare/v5.0.0..v5.0.1

    Thank you @​yetingli for the patch and reproduction case!

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump path-parse from 1.0.6 to 1.0.7

    chore(deps): bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.20 to 4.17.21

    Bump lodash from 4.17.20 to 4.17.21

    Bumps lodash from 4.17.20 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • scrollTop not always work

    scrollTop not always work

    This line of code is wrong scrollTop

    Solution: const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    bug 
    opened by tomik23 0
  • Bump glob-parent from 5.1.1 to 5.1.2

    Bump glob-parent from 5.1.1 to 5.1.2

    Bumps glob-parent from 5.1.1 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.0 (2021-05-03)

    âš  BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ws from 6.2.1 to 6.2.2

    Bump ws from 6.2.1 to 6.2.2

    Bumps ws from 6.2.1 to 6.2.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v1.1.2)
  • v1.1.2(Mar 28, 2022)

  • v1.1.1(Feb 2, 2022)

    Added

    • generating a separate file for IE browser, rollup.config - typescript target [es6, es5]

    Changed

    • simplification of the 'overlay' styling
    overlay: {
      color: '#fff',
      opacity: 80,
    },
    

    on

    // overlay layer color and opacity, rgba, hsla, ...
    overlay: "rgba(255, 255, 255, 0.9)",
    

    Build

    • adding method and props in 'terser' mangle, adding an undeline _zooomInit = () => {...}
    terserOptions: {
      mangle: {
        properties: {
          regex: /^_/,
        },
      },
    },
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Jan 4, 2022)

    Added

    • a new parameter data-zooom-big. With its help, we can open a larger version of the photo - example-large-photo
      This solution is needed to optimize the website. We only display a thumbnail, only by clicking it downloads the photo from the data-zooom-big parameter and zooms in.
    <img class="img-zoom" loading="lazy" width="576" height="384" data-zooom-big="large-image.jpg" src="image-thumbnail.jpg" />
    
    Source code(tar.gz)
    Source code(zip)
  • v1.0.15(Oct 13, 2021)

  • v1.0.14(Oct 9, 2021)

  • v1.0.13(Sep 17, 2021)

  • v1.0.12(Jun 13, 2021)

  • v1.0.11(Apr 16, 2021)

  • v1.0.10(Mar 30, 2021)

    • Create a separate photo with styles for each click,
    • Fixed problem when photo is in overflow element
    • Replaced node-sass to sass
    • Change of additional styles
    • Remove interface ImageParameters
    Source code(tar.gz)
    Source code(zip)
  • v1.0.9(Nov 20, 2020)

  • v1.0.8(Sep 8, 2020)

  • v1.0.7(Sep 6, 2020)

  • v1.0.6(Sep 5, 2020)

    Added

    • debounce to resize window
    • two helpers functions onLoaded, onCleared
    • changelog.md

    Changed

    • change fade(in/out) from js to css
    • refactoring rollup.config.js
    • update package.json
    • update readme.md
    • separate style
    Source code(tar.gz)
    Source code(zip)
Owner
Grzegorz Tomicki
Front-end developer
Grzegorz Tomicki
The smallest, simplest and fastest JavaScript pixel-level image comparison library

pixelmatch The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests. Fea

Mapbox 5.1k Jan 8, 2023
A library that makes Image Map Area responsive

A library that makes Image Map Area responsive

elenh 1 Jan 21, 2022
Medium's Image Zoom for jQuery

ZOOM.JS A simple jQuery plugin for image zooming; as seen on Medium. Demo https://fat.github.io/zoom.js How Link the zoom.js and zoom.css files to you

fat 4.1k Jan 2, 2023
This is the leaflet plugin for GeoServer. Using this plugin user can have access to wms and wfs request easily.

Documentation leaflet-geoserver-request This is the plugin for Geoserver various kind of requests. Using this plugin, we can make WMS, WFS, getLegendG

Tek Kshetri 127 Dec 15, 2022
Dashboards-maps is a frontend plugin that helps you in uploading custom GeoJSON to OpenSearch and communicates with the geospatial backend plugin for the same.

Welcome! Project Resources Code of Conduct License Copyright Dashboards-Maps Dashboards-maps is a frontend plugin that helps you in uploading custom G

null 9 Dec 28, 2022
Mapbox JavaScript API, a Leaflet Plugin

mapbox.js A Mapbox plugin for Leaflet, a lightweight JavaScript library for traditional raster maps. For the state-of-the-art Mapbox vector maps libra

Mapbox 1.9k Dec 23, 2022
A simple web extension that redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.

Get Donate FIRO aEyKPU7mwWBYRFGoLiUGeQQybyzD8jzsS8 BTC: 3JZWooswwmmqQKw5iW6AYFfK5gcWTrvueE ETH: 0x90049dc59365dF683451319Aa4632aC61193dFA7 About A web

Simon Brazell 1.6k Dec 29, 2022
A simple JSONP implementation

jsonp A simple JSONP implementation. Installation Install for node.js or browserify using npm: $ npm install jsonp Install for component(1) using comp

webmodules 1.9k Dec 28, 2022
Leon is a simple WhatsApp Bot.

Leon is a simple WhatsApp Bot.

TOXIC DEVIL 26 Dec 21, 2022
Simple location picker on Leaflet map

Leaflet Location Picker Simple location picker with Leaflet map Usage: <label>Insert a Geo Location <input id="geoloc" type="text" value="" /> </lab

Stefano Cudini 37 Nov 17, 2022
jQuery plugin for zooming images on mouseover.

About Zoom A small jQuery plugin for zooming images on mouseover or mousedown. See the project page for documentation and a demonstration. Released un

Jack Moore 1.5k Dec 6, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A library for panning and zooming elements using CSS transforms :mag:

Panzoom Examples Panzoom is a small library (~3.7kb gzipped) to add panning and zooming functionality to an element. Rather than using absolute positi

Timmy Willison 1.8k Dec 26, 2022
đź–Ľ Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.

file-upload-with-preview ?? Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well

John Datserakis 427 Dec 26, 2022
Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Grzegorz Tomicki 58 Dec 24, 2022
A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)

Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and

Alexandre Demode 3.8k Jan 7, 2023
This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundle code

React-compress This compress library was made with Brotli and Gzip help, for React users who want to make website more performance and reduce JS bundl

Koma Human 30 Jan 6, 2023
A small (~600B gzip), useful set of methods for lazy iteration of iterables.

@ricokahler/lazy · A small (~600B gzip*), useful set of methods for lazy iteration of iterables. Why this lazy lib? Do I even need a lazy lib? Install

Rico Kahler 11 Sep 10, 2022