Medium's Image Zoom for jQuery

Related tags

Maps zoom.js
Overview

ZOOM.JS

A simple jQuery plugin for image zooming; as seen on Medium.

Demo

https://fat.github.io/zoom.js

How

  1. Link the zoom.js and zoom.css files to your site or application.
<link href="css/zoom.css" rel="stylesheet">
<script src="js/zoom.js"></script>
  1. zoom.js is dependent on transition.js file from Bootstrap, so make sure to include that as well.
<script src="js/transition.js"></script>
  1. Add a data-action="zoom" attribute to the images you want to make zoomable. For example:
<img src="img/blog_post_featured.png" data-action="zoom">

Why

It's the best way to zoom an image. It transitions/zooms in really smoothly, and then when you're done, scrolls away, [esc] keys away, clicks away… clean af.

If you hold your meta key ( on mac) or (ctrl on windows), it will open in a new tab. wow.

ps. use a data-original attr to link to a separate image. Just for meta-clicking tho.

Where

zoom.js should (in theory) work in all relevant browsers (ie9+). If not, create an issue! Thanks!

Who

Written by @fat, made better by you.

Comments
  • Thumbnails instead of full size images

    Thumbnails instead of full size images

    I would want to show this to the frontend guys at work but I already know that there's going to be complaints about having full resolution images on the page, which adds to the page size.

    If you use this on mobile sites, the site wil be loading very slow depending on how large your images are.

    Maybe you could have it behave more like this:

    <img src="img/thumbnail-image.jpg" data-zoom="img/full-image.jpg" .. />
    

    If you can pull that off, you could reduce the page load time (and bandwidth) a lot on sites making heavy use of images and this plugin.

    Just a suggestion!

    opened by veloxy 12
  • Append element to document body instead of wrapping the photo

    Append element to document body instead of wrapping the photo

    There should be an easy and performant way to append the wrapper with the image to the document body, with the exact positioning of the previous photo (positioned absolute to body, top and left values).

    This would solve the overflow: hidden a lot of users are currently having because the wrapper would be positioned relative to the body element.

    opened by ElegantSudo 7
  • No transition when zooming out

    No transition when zooming out

    When i zoom in the image i've got the smooth transition that's supposed to happen, but when i zoom out there's no transition, which is kinda lame :-/

    Someone's got an idea why and how to fix this ?

    Thanks a lot, great plugin

    opened by sexsugar 7
  • Add Bower support.

    Add Bower support.

    I created a barebones bower.json file. Additionally, I added a .gitignore for Bower. Confirm that the details in bower.json are correct.

    (I have not registered the package.)

    opened by qw3rtman 7
  • Support anchor to image link

    Support anchor to image link

    Is it possible to support load small image normally and have an anchor to large image? <a href="large.jpg"> <img src="small.jpg"></img> </a>

    opened by klihelp 4
  • The cursor bug

    The cursor bug

    If I don't move cursor and just click twice on the image the cursor would be with wrong state. Like '+' would be '+' always whatever I do - zoom in or out. The cursor is not changing the state until you do not change the position of it/

    opened by nroman 4
  • zoom on mobile

    zoom on mobile

    Since generally on mobile devices images are already full-width you will not see the image larger when zooming.

    A nice solution to this behavior would be to zoom the image to fill the device viewport (without upscaling the image) and having the possibility to pan it.

    If you have interest to add this feature we can discuss about it more specifically.

    opened by fabiocaccamo 3
  • Link to zoom.js must be at end of doc not in head

    Link to zoom.js must be at end of doc not in head

    I was having a bit of trouble getting zoom.js to work, and it seemed like the final reason was I was placing my link to zoom.js in not at the end of the body -- after the img's with the data-action="zoom". My understanding (could be wrong) is that when the script is loaded it immediately adds a on click listener to each of those elements. So you can't place it in the head. This makes sense, but if correct, I think adding a but of clarification to docs would be helpful. I'll add those clarifications to the docs, but wanted to check that this was correct before sending a PR with the changes. Thanks!

    opened by carmi 3
  • Zoomed image location impacted by page flow

    Zoomed image location impacted by page flow

    The placement of the zoomed-in version of the image is being impacted by other elements in the page flow. If parent elements have transforms (e.g. transform: translate3d(0, 0, 0) ) applied to them, the z-index and location of the zoomed image can be thrown off completely. This can result in the zoomed image being off-center, off-screen, clipped, or under other elements (such as the zoom overlay).

    I came across this issue while attempting to integrate Zoom with the Slick Carousel , however this issue could occur in many different scenarios.

    Any thoughts on solutions? A few initial ideas:

    1. Don't do that!
    2. Make use of the .zoom-overlay-open selector to temporarily subdue any offending parent elements by removing breaking css (e.g. transform: none, overflow: visible, etc.). Although, I've been playing with this for a little bit, and have yet to achieve a successful result. The z-indexing issues are fixable, but the image is still off-center/off-screen. Perhaps the damage is already done by offset calculations being performed before the offending selectors have been removed.
    3. Add a new element next to the zoom-overlay to contain the zoomed-in image... but what about the zoom-out effect that starts at the location of the image?
    4. ???
    opened by davidklebanoff 3
  • [RFR] Be a little less agressive with vendor prefixes

    [RFR] Be a little less agressive with vendor prefixes

    I am not quite sure which browsers you intend to support but I believe it's safe to get rid of -khtml- prefixes as well as -ms- and -moz- prefixes for transitions (especially since the -ms- one has never been used). We could even ditch -o- I believe, but I left it just in case.

    Feel free to decline if that does not suit your browser needs.

    opened by KittyGiraudel 3
  • Compatibility with images lazy loading

    Compatibility with images lazy loading

    Would love to get this working with some sort of image lazy loading solution. Unfortunately, it's not working for me (currently using lazysizes).

    To give a little bit more context:

    • Page loads with the placeholders in place (base64 encoded 1x1 pixel image).
    • Lazy load happens on images that come into view.
    • When lazy loaded images clicked, there's a jump in the page, zoom occurs instantly (no transition), and the image then slides into place vertically. Seems like the DOM container where the image was is collapsed for half a second.

    Here's a gif that illustrates the issue: first the lazy loaded image, then one fetched on page load.

    lazy-load-zoom-js

    This is what the image tag looks like:

    <img class="lazyload size-full" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=" data-src="http://assets.mutelife.com/wp-content/uploads/2016/01/[email protected]" alt="Berlin" width="2280" height="1521" data-action="zoom" />

    When loaded, the markup looks like this:

    <img class="size-full lazyloaded" src="http://assets.mutelife.com/wp-content/uploads/2016/01/[email protected]" data-src="http://assets.mutelife.com/wp-content/uploads/2016/01/[email protected]" alt="Berlin" width="2280" height="1521" data-action="zoom">

    This is what an imaged loaded on page init image looks like:

    <img class="size-full" src="http://assets.mutelife.com/wp-content/uploads/2016/01/[email protected]" alt="Berlin" width="2280" height="1521" data-action="zoom">

    In the DOM they all have width/height attributes — what could be at fault here, any suggestions?

    Thanks in advance!

    opened by keoshi 2
  •  let it not be reduced again

    let it not be reduced again

    If the magnification of the image is less than 1 after calculation, or the image in the web page is larger than its own size, let it not be reduced again, so as to prevent the strange effect that the image is not "zoom" but reduced after clicking as this:this._imgScaleFactor = (this._imgScaleFactor<1) ? 1 : this._imgScaleFactor

    opened by kohunglee 0
  • Transition not happening when close

    Transition not happening when close

    When I click on the image the zoom transition works great and smooth, but when I close it or scroll the image just go back to normal without any transition.

    You know what could it be causing this? the console does not show errors at all.

    opened by vdiaza 1
  • Outer transition doesn't work

    Outer transition doesn't work

    I've just added a zoom.js to my project, and it seems that outer transition when closing does not work.

    That's how I've implemented it.

    import 'zoom.js'
    import 'zoom.js/css/zoom.css'
    

    No errors, zoom transition works fine, but zoom-out won't.

    See the gif kapture 2017-09-22 at 23 42 43

    opened by ghost 1
Releases(v0.0.1)
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
🏸 A simple plugin for image zooming without dependencies ~1.65KB gzip

ZOOOM.JS A simple plugin for image zoooming without dependencies. Only pure javascipt. Installation CDN JavaScript <script src="https://cdn.jsdelivr.n

Grzegorz Tomicki 13 Aug 30, 2022
jQuery Vector Map Library

This project is a heavily modified version of jVectorMap as it was in April of 2012. I chose to start fresh rather than fork their project as my inten

10 Best Design 1.8k Dec 28, 2022
jQuery Vector Map Library

This project is a heavily modified version of jVectorMap as it was in April of 2012. I chose to start fresh rather than fork their project as my inten

10 Best Design 1.8k Dec 28, 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
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
ezoom.js is a jQuery plugin for simple Image with zoom effect.

ezoom.js ezoom.js is a jQuery plugin for simple Image with zoom effect. This plugin in under development to support Next/Prev a gallery Images/SVG lat

Nam Le 3 Sep 3, 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
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Mario Duarte 8 Aug 3, 2022
My very own fantastic jQuery ZOOM plugin.

jQuery ZOOM plugin Coded by Robert Koteles, Senior Frontend Developer, 2015. This plugin was coded by me while worked as senior web developer/web mana

Robert Koteles 2 Oct 13, 2022
Dependency-free implementation of zoom.js (no jQuery or Bootstrap)

ZOOM.JS Repo status Nov 2020: Maintained, but bug fixes only. No new features currently, please. There may eventually be a new major version with new

Nishanth Shanmugham 1.3k Jan 3, 2023
optimize image & upload file to cloud as image bed with tiny image automic.

Rush! 图片压缩 & 直传图床工具 这是一个兴趣使然的项目, 希望 Rush! 能让这个世界的网络资源浪费减少一点点 下载 Downloads 获取最新发行版 功能 Features 拖拽批量压缩图片, 支持格式 jpg/png/gif Drop to optimize, jpg/png/gif

{ Chao } 3 Nov 12, 2022
null 3.9k Dec 30, 2022
Zoom and pan plugin for Chart.js

chartjs-plugin-zoom A zoom and pan plugin for Chart.js >= 3.0.0 For Chart.js 2.6.0 to 2.9.x support, use version 0.7.7 of this plugin. Panning can be

Chart.js 510 Jan 2, 2023
A command-line tool to convert Project Zomboid map data into Deep Zoom format

pzmap2dzi pzmap2dzi is a command-line tool running on Windows to convert Project Zomboid map data into Deep Zoom format. Features Supports both python

Min Xiang 14 Dec 31, 2022
🔍 A view component for React Native with pinch to zoom and drag to pan functionality.

react-native-pan-pinch-view A view component for React Native with pinch to zoom and drag to pan functionality. ?? Introduction Even though the demo s

Ivanka Todorova 43 Oct 6, 2022
zoom in on any element in the DOM

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 anyt

Hakim El Hattab 1.5k Dec 30, 2022