Skip to content
Branch: master
Clone or download
Latest commit abaa43e Apr 2, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore 0.1.6 - fix percentage sizes + wrapper blocking clicks Jan 14, 2014
.jshintrc jshint Dec 5, 2013
.npmignore 0.1.2 Dec 10, 2013 Documentation supplemented Jun 17, 2014
bower.json bump Jun 19, 2015
index.html indentation fix Jun 19, 2014
package.json 0.1.10 Apr 2, 2016
zoomerang.js fix it Apr 2, 2016


Zoom in, zoom out on (almost) anything in your page.


Basic Usage

Include with a script tag, or install with your package manager of choice (Bower/Component/npm).


Now when you click on #my-image, it will... of course, zoom in. When you click again, it will zoom back out to its original place. (get it?)

This is largely inspired by Medium's avatar zoom in effect, with improvements (you can resize / scroll the page when it's zoomed in and it still works). Please note it depends on the way browsers handle CSS transforms and has limited compatibility.

Caveats / Known Issues

  • CSS Transform required. (basically, IE10+)
  • Works best on fixed size elements such as display: block, display: inline-block and img elements.
  • Avoid using it on long inline text that has natural line wraps.
  • When used on mobile, it's best to avoid auto font size adjustments (e.g. set scale fixed to 1).
  • Elements with non-rectangular shape will have pixelated edge in Firefox.
  • Doesn't work on stock Android 2.x browser.

API Reference

  • Zoomerang.listen(selector | element)

    Attach click listeners to all matched elements. You can also directly pass in a single node to this method.

  • | element, [callback])

    Zoom in on the matched element. Fires optional callback when the transition is done.

  • Zoomerang.close([callback])

    Zoom out if currently zoomed-in. Fires optional callback when the transition is done.

  • Zoomerang.config(options)

    Takes an options object. Available options (all options take valid CSS values):

    • transitionDuration - default: '.4s'
    • transitionTimingFunction - default: 'cubic-bezier(.4,0,0,1)'
    • bgColor - default: '#fff'
    • bgOpacity - default: 1
    • maxWidth - max element width when zoomed-in. default: 300
    • maxHeight - max element height when zoomed-in. default: 300
    • deepCopy - whether to copy innerHTML. If target element has complicated inner structure you might need this to make it work. default: false
    • onOpen - a callback function that will be called when a target is zoomed in and transition has ended. It will get the target element as the argument.
    • onClose - same as onOpen, except fired when zoomed out.
    • onBeforeOpen - a callback function, that will be called before zoom-in.
    • onBeforeClose - a callback function, that will be called before zoom-out.



Brought to you by @youyuxi.

You can’t perform that action at this time.