Needlessly Provoking Marsupials

    omnizoom

    1.1.5 • Public • Published

    Omnizoom

    With some dumb js, you can pan or scroll into anything! Demo: http://jackterwilliger.com/tools-omnizoom/

    Pan/Zoom into a video!

    Zoom into a video

    Pan/Zoom into an image!

    Zoom into an image

    Pan/Zoom into a container!

    Zoom into a video

    I'm using this to build annotation tools for computer vision datasets and to study the roll spatial context plays in perception. Use it for anything.

    Installation

    git clone https://github.com/jackft/omnizoom
    

    or:

    npm install --save omnizoom
    

    then include some files in your HTML Put these two lines in your header

    <link rel="stylesheet" href="omnizoom.css">
    <script type="text/javascript" src="omnizoom.min.js"></script>  

    If you used git, they'll be in omnizoom/dist If you used npm, they'll be in node_modules/omnizoom/dist

    Directions

    1. make sure you've included the code (above)
    2. add the css class zoom to any zoomable elements
    3. add the css class zoom-container to any container around a zoomable object (this prevents the zoom from overflowing its container.
    4. include this somewhere (new omnizoom.Zoomer()).addElem(<your-element>).addZoom()

    Usage

    Possible HTML elements:

    <div class="zoom-container container" width="50%">
      <video id="zoomable-video" class="zoom" preload="auto" controls src="your-video.mp4"></video>
    </div>
    <div class="zoom-container container" width="50%">
      <img id="zoomable-img" class="zoom" src="your-img.JPG">
    </div>
    <div class="zoom-container">
      <div id="zoomable-div" class="zoom">
        ...
      </div>
    </div>

    How to make each element zoomable with the scroll wheel:

    // add zoom functionality to the video
    const zoomy1 = new omnizoom.Zoomer()
                               .addElem(document.getElementById("zoomable-video"))
                               .addZoom();
    // add pan functionality to the img
    const zoomy2 = new omnizoom.Zoomer()
                               .addElem(document.getElementById("zoomable-img"))
                               .addPan();
    // add zoom and pan functionality to the div
    const zoomy3 = new omnizoom.Zoomer()
                               .addElem(document.getElementById("zoomable-div"))
                               .addZoom()
                               .addPan();

    Install

    npm i omnizoom

    DownloadsWeekly Downloads

    1

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    20.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • jterwill