hakimel / zoom.js Goto Github PK

View Code? Open in Web Editor NEW

1.6K 64.0 296.0 65 KB

zoom in on any element in the DOM

Home Page: http://lab.hakim.se/zoom-js

License: MIT License

CSS 5.37% JavaScript 19.35% HTML 75.29%

zoom.js's Introduction

zoom.js

Enables a minimal JS API for zooming in on specific points or DOM elements.

Note that this is only a proof of concept so don't use it for anything important. Does not work in IE, yet.

Try out the demo.

Usage

Zoom in on an element:

  zoom.to({
    element: document.querySelector( 'img' )
  });

Additional options:

  zoom.to({
    element: document.querySelector( 'img' ),

    // Amount of empty space around zoomed element
    padding: 20,

    // Function to call once zooming completes
    callback: function() { /* ... */ }
  });

Zoom in on a point:

  zoom.to({
    x: 100,
    y: 200,
    width: 300,
    height: 300
  });

  zoom.to({
    x: 100,
    y: 200,
    scale: 3
  });

Reset

  zoom.out();

License

MIT licensed

zoom.js's People

Contributors

Stargazers

Watchers

Forkers

jag fabricasapiens srinivasarao549 hecspc joeguja bronfman carmandrew dineshkummarc nvdnkpr konstantinos-tsatsarounos ideasemerge willcode2surf axpart nwest88 bengle jasonbogovich lujaw mnishihan gbysea contextworks hsienyu tribixbite alepharchives myusernamejeep galmwing irony liluxdev settinghead unabridgedxcrpt jkbytes randylien netconstructor leadsplus uxscripts listings-xx openscripts-xx opengui openux jquery-scripts thunderw avukonke cyberwani subxerio pbpraha lidongzhen kublaj mayte1990 hussion gerhobbelt paven willemroman primaapriansyah alsitn chiehwen trindade pinittome djad33 ajunboys khairulanuar raonyguimaraes sdeluce kncapara jbinkleyj codeinpeace tanvip rodrycode asdofindia prodigeni r0mk1n jimtoner web5design davgit baozheliu mgk4000 fhefh2009 nyneye jeremyby halkibsi dodero zenart nicenboim lennardv2 ofxxx yashilanka drickert5 stoyanvi imclab alonsoct00 luis-pinheiro alex-components dhanushanthp tidusxujun colorwalf ganapativs fivegen wntd edwinyzh amitabhaghosh197 paulsmash martinsv

zoom.js's Issues

Zooming Out After Panning Bug

Seems that zooming out doesn't take the panned location into account when zooming back out.

To demonstrate the problem zoom in on the box labelled "Float" then pan down to the unicorn.

Once there, click on the unicorn.

zoom.js on ipad?

Hi,
I am using zoom js to zoom the grid images for website, it's really great on the browsers.
But it's on ipad looks a bit like out of focus, do you have any solutions for that?

Thanks!
Best,
HYC

Is zoom.to supposed to work for element and position at same time?

Both element and x, y coordinates can be set as options in this library.
However, it is not clear what x and y are relative to and whether element and coordinates can be used together. What I mean by used together is that the zoom would focus to a point within the element rather than always the center.

Please could somebody clarify.
Regards.

Can't scroll left after zoom

When I zoom, I can pan right, up, and down as the add-on page suggests, but the horizontal scrollbar position always seems locked at the very left, so I can't scroll left.

Is it possible to fix this please? I see the last commit is years ago, it would be awesome if this can be fixed! I haven't tried yet digging into the source.

Old IE support

You could probably use zoom to make this work (without the transition) in old IEs :)

css transform issue

Hi am trying to use the zoom.js but getting error
Uncaught TypeError: Cannot read property 'style' of null
What to do any suggestion plz

Element undefined

I am trying out zoom.js to zoom in on the div that are inside a container div. The target is not undefined but I keep on getting this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'to'). Does the element needs to have a certain attribute to be able to pass in as element?

Below is the code I'm using:

document.querySelector("#outerContainer").addEventListener('wheel', function(event) {
event.preventDefault();
zoom.to({ element: event.target, padding:20 });
});

I recently wrote a proposal in wigc about web accessibility with the zoom-js tool.
reference here: https://discourse.wicg.io/t/draft-idea-spec-proposal-api-idea-for-better-accessibility-in-reading-the-web/5873