Home / JavaScript / Image Processing

Zoom in on images or content

AnythingZoomer jQuery Plugin Zoom in on images or content. Latest AnythingZoomer demo. Documentation. JSFiddle playground. Original post at CSS-Tricks. Have an issue? Submit it here. Dependencies
Information
Category: JavaScript / Image Processing
Watchers: 16
Star: 208
Fork: 45
Last update: Dec 4, 2023
Resource links
http://css-tricks.github.io/AnythingZoomer/
https://github.com/CSS-Tricks/AnythingZoomer/

AnythingZoomer jQuery Plugin

Zoom in on images or content.

NPM Version devDependency Status MIT

Dependencies

  • jQuery v1.3.2+

Download

  • Get all files: zip or tar.gz.
  • Use npm: npm install anythingzoomer.

Known issues

  • In the text demo, you can resize the large area content dynamically. At 2x, the top left corner of the large content matches the top left corner of the small content. But as the size increases (up to 4x), the spacing of the content from the top left corner increases. This happens with any content. I'm still looking for a fix.

Recent Changes

View the complete change log here

Version 2.2.8 (2018-11-06)

  • Fix JS error when enabled. See issue #41.
  • Fix overlay interference & position. See issue #41.
  • Readme: Remove bower.

Version 2.2.7 (2016-11-05)

  • Fix misspelling. See pull #38; thanks @draber!
  • Bower: Fix bower.json.
  • Readme:
    • Add links to bower & npm.
    • Add download links.

Version 2.2.5 & 2.2.6 (2016-08-26)

  • Add UMD wrapper.
  • Add bower package & fix name.
7 Open More issues
Closed

Adding href / click event to the zoomed image

Hi, I want to add a hyperlink ("<a href..:") to do anything after clicking on the zoomed image. But with this code...

    <div class="large">
        <a href="goto.html"><img src="demo/rushmore.jpg" alt="big rushmore"></a>
    </div>

... the zoomed image does not appear correctly anymore.

As a work around I added a click event to this image via jQuery (... bind("click").function...). But how can I add this behaviour just with a href and without jQuery/Javascript?

Thanks a lot! webaschtl

How to... Demo 
opened Dec 23, 2012 by webaschtl 13
Closed

Zooming over input/radio elements

if you have radio buttons (or i'm assuming other input elements), if the state of them changes, then AnythingZoomer displays the previous state and not the current state when you zoom over again.

you can replicate this in the playground app by adding some radio buttons, zooming over them, double click, change the state of a button, then double click again, then zoom again.

Bug How to... Demo 
opened Nov 5, 2018 by a-espitia 8
Closed

Magnifying svgs

I am experimenting with the anythingzoomer plugin to magnify svgs. I read the post http://stackoverflow.com/questions/38754427/using-jquery-anythingzoomer-plugin-to-magnify-svgs for how to do it but I am still stuck.

The code I am using is below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Time Squared Prototype</title>
        <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script src="js/jquery.anythingzoomer.js"></script>
        <style type="text/css">

            .small svg {
                width: 500px;
                height: 500px;
            }

            .large svg {
                width: 1000px;
                height: 1000px;
            }

            .large { background: #fff; }

            .zoom { display: block; margin: 0 auto; }

            /* AnythingZoomer */
            .az-wrap, .az-small, .az-large {
                position: relative;
            }
            .az-wrap-inner {
                display: block;
                margin: 0 auto; /* center small & large content */
            }
            /* This wraps the large image and hides it */
            .az-zoom {
                background: #fff;
                border: #333 1px solid;
                position: absolute;
                top: 0;
                left: 0;
                width: 110px;
                height: 110px;
                overflow: hidden;
                z-index: 100;
                display: none;
                -moz-box-shadow: inset 0px 0px 4px #000;
                -webkit-box-shadow: inset 0px 0px 4px #000;
                box-shadow: inset 0px 0px 4px #000;
            }
            /* Class applied to az-mover when large image is windowed */
            .az-windowed {
                overflow: hidden;
                position: absolute;
            }
            /* Class applied to az-mover when large image is fully shown */
            .az-expanded {
                height: auto;
                width: auto;
                position: static;
                overflow: visible;
            }

            /* overlay small area */
            .az-overlay {
                background-color: #000;
                opacity: 0.3;
                filter: alpha(opacity=30);
                z-index: 10;
            }

            /* fade out small content when hovering
            .az-hovered > * {
                opacity: 0.5;
                filter: alpha(opacity=50);
            }
            */

            /* edit mode coordinate styling */
            .az-coords {
                display: none; /* hidden when expanded */
            }
            .az-zoom .az-coords {
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                background: #000;
                background: rgba(0,0,0,0.5);
                color: #fff;
            }


        </style>
    </head>
    <body>       

        <script type="text/javascript">

            var zoom_container = d3.select("body")
                                   .append("div")
                                   .attr("id", "zoom")


            var svg = zoom_container.append("div")
                                    .attr("class", "small")
                                    .append("svg")
                                    .attr("viewBox", "0,0,500,500");

            zoom_container.append("div")
                          .attr("class", "large")
                          .style("left", "0px")
                          .style("right", "0px")


             svg.append("rect")
               .attr("x", 0)
               .attr("y", 100)
               .attr("width", 20)
               .attr("height", 20)
               .attr("fill", "red")

            $("#zoom").anythingZoomer({
                edit: true,
                clone: true
            });

        </script>
    </body>
</html>

The good news is that the zoom window does show up when the mouse hovers over the svg. The problem is that nothing on the zoom window shows up. Doing a bit of digging, it turns out if I enlarge the zoom window to, say, 1000px by 1000px, I do see the red rectangle magnified in the zoom window. However, it stays stuck in the zoom window even if I am not directly hovering over the rectangle.

I used the web inspector to compare what's going on in my code to what's going on in working examples of anythingzoomer. I notice that in my code, the div class "large az-large" does not have a style applied when the zoom window appears.

not_working_zoomer

But the working examples of anythingzoomer do have a style applied to the class "large az-large":

working_zoomer

I am completely stumped. Any advice would be appreciated.

Thanks!

How to... Demo 
opened Aug 3, 2016 by auggywonger 8
Closed

Hover doesnot work properly when -transform-rotate is done

When image is loaded for the first time, hover window propersly shows the zoomed part wherever we hover.

But when i dynamically rotate image using -transform-rotate and then hover over any section, it is showing zoom window at other direction

Please help me

How to... Demo 
opened Jan 9, 2015 by omkark 6
Closed

Feature request please....!

Hi,

I'm using anything zoomer on a site I'm creating for a client. Loving it so far, was previously using powerzoomer but was having some problems so switched to anythingzoomer...much better.

Any thoughts on having a slight delay on the zoomer, so that if you just move the mouse 'though' the zoomable element, it doesnt pop up immediatley?

Just a thought, would love to see this feature :D

Thanks in advance,

Steve

Enhancement 
opened Sep 25, 2012 by hedlikeahole 6
Closed

Odd display failure when only one dimension is set in CSS

I noticed that half of the time when I load the page, the contents within the #zoom div do not correctly load onto the screen. The issue appears to be that the javascript is loading before the height of the image is known. Whenever the display fails, I notice that az-wrap-inner and az-overly has been given a height of 0.

While I do not know what would cause this to happen, I found that it only happens if you set one dimension of the img tag in CSS and not the other dimension. For instance, I was setting the width but not the height in my CSS document. Once I added height to the CSS, the problem stopped occurring.

How to... Demo 
opened Jul 3, 2012 by ckxcore 6
Open

Canvas compatibility ?

Is this library compatible with canvas ? Tried but failed... It would be a great feature !!

opened Aug 18, 2020 by Speuta 0
Open

How to use dynamic id based this plugin ?

This Plugin is working static data $('#zoom1').anyThingZoomer({}); but when dynamic id based how i will use i tried getting id and puting that id $('#'+id+' ').anyThingZoomer({}); not working perfectely please help me anything i did wrong correct me.

<div class="row">
  <div class="col-sm-4 cart" id="zoom1">
      <div class="small img-div">
            <img src="demo/fbofw.jpg" > 
      </div>
  </div>
  <div class="col-sm-4 cart" id="zoom2">
        <div class="small img-div">
                <img src="demo/fbofw2.gif" > 
          </div>
  </div>
  <div class="col-sm-4 cart" id="zoom3">
        <div class="small img-div">
                <img src="demo/fbofw3.gif" > 
        </div> 
  </div>
</div>

$(".cart").mouseover(function(){
    // alert("id"+$(this).attr('id'));
    id = $(this).attr('id');
    console.log("id"+id);
    hitMouseOver(id)

});
function hitMouseOver(id){
    // alert($('#'+id+''));
    $('#'+id+'').anythingZoomer({})
});
opened Nov 26, 2019 by ravindrababuvidya 1
Open

Make zoomDim configurable in options

I would like the size of the zoom window to be configurable in the options. If there is already a way to accomplish this, please, just let me know; I just couldn't find it.

Right now, I can only get this seemingly undocumented signature to do it (and this only works after it's already initialized)

var xoffset = 0, 
yoffset= 0,
zoomDimension = [200,200];
$('#container').anythingZoomer(xoffset, yoffset, zoomDimension)

The other hackish way to do it is this: (seems to work the best)

$('#container').anythingZoomer({
  initialized: function(){
     $('#container').data('zoomer').last = [200,200];
  }
})

What I would like to do:

$('#container').anythingZoomer({
  zoomDim: [200,200]
});
opened Jul 5, 2017 by ambischof 1
Open

Show coordinates of large image

Hi Mottie,

Thanks for the great plug-in.

I was just wondering if it would be possible to show the coordinates of the mouse within the LARGE image rather than the small.

I'm trying to allow the user to select an exact coordinate (pixel) from the large image, without displaying the image to the user at it's full resolution.

Thanks in advance for your help!

How to... Demo 
opened Mar 23, 2017 by grubbychicken 6
Open

Issue while rotating image.

Hi,

I have a problem statement where user can rotate image using css. The zoom window should work for rotated image as well.

What is happening now, after I rotate the image, zoom is working on specified portion only. Its not working for top and bottom corners.

I have created a plunker for you to understand

http://plnkr.co/edit/QYRYITvIZlObrYflp9Ct?p=preview

As we can see, zoom is not working for edge portion.

Please help me with this as this is very important feature for me.

Regards, Omkar

Enhancement 
opened May 5, 2015 by omkark 4
Open

Using zoom in multiple stacked images for Chrome / Safari

Hi all,

I have added this great plugin in one of my projects. But It slows down when trying to zoom in multiple images that is stacked with one another using z-index in chrome and safari ( My project does have about 20 images stacked on the top of one another ). I already tried this on Firefox and even IE and it's working properly. I also tried to compress all the images but it still slows down.

Any Ideas? Thanks.

How to... 
opened Jan 29, 2015 by colknives 5

Contents

    fat Medium's Image Zoom for jQuery
    chrvadala :eyes: A React component that adds pan and zoom features to SVG
    fahidattique55 Image Cropper like Instagram
    chris124567 Chat bots (& more) for Zoom by figuring out their websocket protocol
    AndersDJohnson :mag: Zoom responsively, images & more, w/ jQuery.
    s-yadav A zooming and panning plugin inspired by google photos for your web images.
    nishanths CONTRIBUTIONS ONLY: No jQuery dependency port of fat/zoom.js
    ascoders 🚀 tiny & fast lib for react native image viewer pan and zoom
    LcTwisk A snappy image viewer with zoom and interactive dismissal transition.
    PoissonBallon GoogleStaticMapsKit provides a full swift API for dealing with Google Static Maps API.
    hsmnzaydn Imageview zoom library for android
    Spikeysanju Zoom Recycler Layout Manager For Android Kotlin
    arkadiyt Zoom Redirector is a browser extension that transparently redirects any meeting links to use Zoom's browser based web client.
    Intera vue-zoom-on-hover - Image zoom on mouse hover
    NicolasPereira This bot is intended to automate the process for joining meetings in Zoom Meeting
    AzharRivaldi Tutorial Double Tap Pinch to Zoom
    V9vek [DEMO] Pinch to zoom used within list like Instagram
    angebagui Medium android application displays content with text, image, video etc in post detail. It can be a pain to do it with content came from CMS. So i decided to design that View to display the content quickly
    imgix Easily add "zoom on hover" functionality to your site's images. Lightweight, no-dependency JavaScript.
    mayuce This library provides an activity to show list of images in full screen with pinch to zoom support.
    FriendsOfREDAXO YCOM Impersonate. Login as selected YCOM user 🧙‍♂️in frontend.
    Share this repo

    Related Repos


    Image Processing
    4
    Generate hexagonal profile pictures client-side using HTML5 canvas.
    nathanhleung Hexooor Generate hexagonal profile pictures client-side using HTML5 canvas. This is a Next.js project bootstrapped with create-next-app. Getting Start
     
    Image Processing
    450
    Lightweight, interactive planning tool that visualizes a series of tasks using an HTML can...
    bvaughn Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created
     
    Image Processing
    1
    Clone of the Fallout hacking mini-game, rendered into a browser canvas.
    goobemaster kodenkel-fo-hacking Clone of the Fallout hacking mini-game, rendered into a browser canvas. You can try it out at: https://www.kodenkel.com/games/fo-h
     
    Image Processing
    18
    Zoom-in Like a Boss, How? Layout-Preserving Zoomer weighing in 🪶
    nyngwang NeoZoom.lua DEMO like_a_boss_demo.mov Intro. Are you still using <C-W>o to maximize a window split and DESTROY THE OTHER ONES under the same tab 😵 ?
     
    Image Processing
    179
    A WebGPU engine.
    dmnsgn A WebGPU engine.
     
    Image Processing
    3
    A minimalistic lightweight semi-automatic PDF gallery with lightbox
    eyaler projector A minimalistic lightweight semi-automatic PDF gallery with lightbox By Eyal Gruss Demo: https://ml4des.com Instructions: Add PDFs to the por
     
    Image Processing
    3.4k
    Graph drawing library for JavaScript
    anvaka VivaGraph VivaGraphJS is designed to be extensible and to support different rendering engines and layout algorithms. Underlying algorithms have been b
     
    Image Processing
    2.8k
    An image effects library for JavaScript using WebGL
    evanw glfx.js Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effect
     
    Image Processing
    2.6k
    bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos a...
    dinbror #hey, be lazy bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped)
     
    Image Processing
    2.6k
    Pure React Carousel Component
    FormidableLabs nuka-carousel A Pure ReactJS Carousel Component Install To add nuka-carousel to your project run the following command in your project folder. $ yarn
     
    Image Processing
    2.2k
    Replicating and improving the lightbox module seen on Medium with fluid transitions.
    terrymun Fluidbox If you're using Fluidbox for production, use the latest stable release and not the edge release (latest commit). Replicating and improving th
     
    Image Processing
    5
    Display an image and update it when the file changes
    gelisam image-watcher Display an image and update it when the file changes. $ image-watcher --help Usage: image-watcher FILE Display an image and update it
     
    Image Processing
    4.9k
    [Unmaintained] Minify images seamlessly
    imagemin imagemin Minify images seamlessly Sindre Sorhus' open source work is supported by the community Special thanks to: All your environment variables, in
     
    Image Processing
    14
    Dither pattern sandbox with canvas
    simulacroix dithering makes a cool pixel grid using dithering! it's a browser page: https://simulacroix.github.io/dithering/ why i found a cool dither algorithm s
     
    Image Processing
    7
    A simple module to add effects to your pictures
    hadiazt effects-image.js 🎨 A nice and easy to use module to add effects to your images ⚡️ Available filters blur brightness circle fhisheye flip greyscale in