francoischalifour / medium-zoom Goto Github PK

Hi is there a simple way to destroy the click events and remove the class?

I use it in Combination with Vue and yea when i leave a component i should destroy the event which are no longer used

thx for the nice lib 💃

It would be great to have some feedback when clicking/tapping the image.
Essentially what the CSS :active pseudo class does, but unfortunately it is not available on img tags.
Usually images are passive elements, so that's okay, but with this great script they become active.

My idea was adding a class like medium-zoom-image--active with js mousedown and removing it on mouseup - essentially imitating :active. Don't know if that's the best solution though.

What do you think?

I've seen examples in both Vue and React, but Angular is missing. Is it possible to use Medium-zoom in Angular? Would be great!

Bug description

👋🏽Hello! I've included this library as part of a Gatsby & React project, however my build fails when I import this package.

Step 1 of the Usage section is a simple import mediumZoom from 'medium-zoom'. When I add this import to the top of my JS file my build fails with the following response:

4:36:32 PM:   WebpackError: ReferenceError: window is not defined
4:36:32 PM:   
4:36:32 PM:   - medium-zoom.esm.js:1 Module../node_modules/medium-zoom/dist/medium-zoom.esm.    js
4:36:32 PM:     [lib]/[medium-zoom]/dist/medium-zoom.esm.js:1:1800

It looks like this is a common error where there's no window server-side but this package's code is being run & flagged by Webpack. Is there any way around this?

Gatsby has the following page with some possible leads to a solution— Debugging HTML Builds

I've tried the part about Fixing Third-party Modules, but to no avail. After editing the Webpack-Config the build completes, however, when calling the function the console says mediumZoom is not a function as if the import is ignored altogether.

How to reproduce

A list of the steps to reproduce the bug.

1. Import medium-zoom per the docs
2. Add mediumZoom(selector, options) call to ComponentDidMount (after the image elements are rendered)
3. Works beautifully in Dev
4. Run gatsby build to generate a production build
5. See error

Expected behavior

The build should complete to deploy!

Environment

• Browser: All
• medium-zoom version: Latest

Hey there, thanks for the library !

Unfortunately I wanted to use the new template function but it seems that the dist folder and npm registry are not up to date with the latest functionalities.

Should I use the source file for now or is an update planned ?
Thanks !

Bug description

The zoom effect doesn't work with background images.

How to reproduce

Try using a background image and initializing it in the JS

1. Run mediumZoom(selector, options)
2. Click on the image
3. See error

Expected behavior

Zoom will work with background images

Environment

• Browser: Firefox 63
• medium-zoom version: 1.0.2

我的配置如下：

plugins: {
'@vuepress/medium-zoom': true
},

Would be nice to have a CSS like margin option:
Single value integer: set equal pixel margins (24) => margin: 24px;
Single value string: directly set margin ("3rem auto") => margin: 3rem auto;

This would give the option to leverage other CSS units and define different margins on each side.

using browserify + browserify-hmr:

get

Error: Cannot find module '!!../node_modules/css-loader/index.js!../node_modules/postcss-loader/index.js
!./medium-zoom.css' from 'node_modules/medium-zoom/dist'

First of all thank you for the script. It is by far the best medium like zoom that I've seen, UX wise.

But the way it's structured with just one huge scaled image makes it bad for mobile and Google Page Speed does not like it at all.

How about changing the html structure so that a smaller image is displayed first and then load the high resolution image on click in the overlay? The thumb could be displayed big in the overlay until the high-res has loaded.

Something along the lines of

<a class="medium-zoom-image" href="images/1-jumbo.jpg">
<img src="images/1.jpg" alt="Medium Zoom illustration" class="medium-zoom-thumb">
</a>

EDIT
Or using an attribute for the high res like so:

<img src="images/1.jpg" data-hd="images/1-jumbo.jpg" alt="Medium Zoom illustration" class="medium-zoom-thumb">

Great script!

But it doesn't seem to be working on IE11; also displaying this message in the console log: Exception thrown and not caught

Do you plan to support it?

Bug description

Images in a row do not look correctly when zoomed, they look croped and with wrong proportions.

How to reproduce

html markup
img src="/uploads/2019/11/25/img_01.jpg" class="lightbox"
img src="/uploads/2019/11/25/img_02.jpg" class="lightbox"
img src="/uploads/2019/11/25/img_03.jpg" class="lightbox"

img css
img
object-fit: cover;
height: 300px; <--- this seems to be causing the issue
width: 100%;
margin-left: auto;
margin-right: auto;
border: 0px solid transparent;
border-radius: 0px;

Expected behavior

Image real size is respected and image is viewed correctly.

Reproducible example

https://codesandbox.io/s/medium-zoomvanilla-example-pz2ys

Reason

it seems that sole reason is because I override img height in example with hardcoded height for images in a row, and this throws off this plugin and when zooming images look bad and not correct. If I comment out height: 300px from my example above then the plugin works, but images in a row all lined up are not possible anymore which is requirement for a gallery of images. I hope this can be fixed?

Environment

Chrome, Edge

My Results

If I remove height for images in gallery then the gallerylooks like this

Below is result with medium-zoom now with correct image ratio. However I can't allow galleries to look like above, I need to control the heigth of images, which in turn throws off your really wonderful plugin that I hoped to use.

Can you fix this? I need to know if issue will be taken care. I need to make a decision in next couple of days I am going use this package in my CMS or not. I hope the author takes some time to answer. I'm prepared to compensate him with $ for a quick fix.

Found a bug when having doctype declared.

I was losing my mind to find why it wasn't working!

When the doctype is set, document.body.clientHeight returns a bigger value than expected, the same height as the body instead of the height of the actual viewport.

Maybe the solution here is to replace document.body.clientHeightwith document.documentElement.clientHeight ?

Since images open in a fullscreen view, users'd expect the browsers back button to bring them back to non-zoomed state.
I found this is especially true on Android, intuitively using the back button all the time.

Browser history API on MDN
Listening to back event

Bug description

If the image used for the zoom has a transition applied in its style attribute, the zoom will happen (but without animating the transform of the zoom image) but will be uncloseable since medium-zoom never sets isAnimating = false.

This is because medium-zoom listens for the transitionend event, with no fallback. Since the target element is copied to create the zoom image, the style attribute is copied too - and this is never overwritten (the transition defined by medium-zoom is done so in a stylesheet, and is therefore overwritten by the style). Since this means that there's no transition: transform, the transition never starts or ends, and no transitionend event is emitted.

How to reproduce

1. Create an image with style="transition: opacity 0.5s" or similar
2. Run medium-zoom(...) on your image
3. Click the image - the zoom will open instantly and become uncloseable

Expected behavior

It works even if image has a transition set in its style.

Reproducible example

Link to the bug reproduction

Hi,

I found a issue on FF 58 (not sure if it applies for later versions too). When I use a data-zoom-target for my image and click it – on the first click medium zoom does not scale the image up to the size of the dynamic loaded image instead it uses the smaller dimensions of the src image.

On the second click it uses the proper dimensions.

Reproduction:
Code: Codesandbox.io
Example page to test: page

Setting different margins on mobile devices vs larger screens

It would be great to be able to set the mobile zoom to be full width, while retaining a larger margin on larger screens.

Implementation

Maybe have the ability to set 3 width values to a margin map? Not sure if that would be possible, or if there is a way to do this now.

I tried use it by npm

const mediumZoom = require('medium-zoom')
or
import mediumZoom from 'medium-zoom'

But no one of them is working. When I log the mediumZoom, I can see just a empty object.

Bug description

In v0.4.0, we only try to access window / document in the function scope, i.e. all related code is wraped in the mediumZoom function:

In v1.x, we access window / document outside the mediumZoom function:

I'm using medium-zoom in a server-rendered project, but window / document can only be accessed in client. The differences cause errors when I try to migrate to v1.x from v0.4.0.

If it won't be fixed, I think it is one of the breaking changes that should be listed.

The problem

When using different images (default and HD via srcset or data-zoom-src), after the user clicks the image in order to zoom, the screen pretty much freezes and he has to wait until the HD image was downloaded for the scaling animation to begin.

Solution

Use the regular flow when the user clicks on image in order to zoom and switch between the default and HD images only after the animation ended and the default image in its scaled position.
This way the user won't feel the freezing effect + it will give the HD image enough time to download while the animation is active (300ms).

Implementation

When the user clicks on the image, the regular animation begins + start downloading the HD image. Then, replace the default image with the HD image once the scaling animation ended or the HD image has been downloaded (the latter between those 2 events).

Even if there will be situations where the HD image will take more than 300ms to download and the user will see "blurry" image (the scaled default image) meanwhile, It seems to me better than the current flow where everything just freezes while the HD image is being downloaded :)

Thanks for a great package :)

so this is weird—

      mediumZoom('[data-action="zoom"]', {
        container: ('#zoom-container'),
        background: bgColor,
        margin: 40
      })

when i click on an image, my specified container is completely ignored and the overlay and image are inserted before the closing body tag. the image is also repeated twice.

Bug description

If you zoom an image with 0 margin and scrollbars enabled, the resulting image is too wide by the width of a scrollbar and causes a horizontal scrollbar to appear.

This causes two issues:

• Unnecessary scrollbar
• Part of the image isn't shown

Here's a gif from the demo site:

How to reproduce

Visit demo site and zoom first image with scroll bars (vertical) already visible. When zoomed, a horizontal scrollbar will appear.

Expected behavior

The image should fill the visible area.

Environment

Observed in Chrome and Safari on Osx 10.13.4.

Other.

Possibly related, when a margin is set the position of the image doesn't take account of the scrollbar (if it's visible). For small margins, this causes the image to appear off-centre.

Example:

This image has a 20px margin. Because of the scrollbar, it appears off-centre.

Let's say you have an image that's 3200x2600 (very large). If you use the current plugin with a screen that's smaller than this, the picture will show as a thumbnail (expected and good).

However, once zoomed, it'll only fill the current viewport and does not allow zooming further to the native size. If the initial viewport was close to the window size, the zooming effect does not enlarge anything and it's very frustrating.

In addition, it's not possible to scroll/swipe the picture to reveal the missing part (linked with #93?)

Please notice that it's not like #75, since we actually want to have overflow here.

Hi,

I like the simplicity of this lib. I recognized, that the lib doesn't handle <picture> elements properly in the sense, when I use the <picture> element for art directed images – this means, I have different resolutions and crop sizes of the image based on the device size – it could lead to distorted image (dimensions).

For example: My mobile image is a crop of the desktop image showing only a detail of it with the dimension 10:8 and the desktop image is 16:9.

When I use the 10:8 as my default <img /> within the <picture /> element, but I am on the desktop view and click on the image, then medium-zoom uses the default image from <img />. But as they have different dimensions (10:8 vs 16:9) the image is distorted (it has mapped the 10:8 to the 16:9 dimension as the default image is 10:8 but the dimensions medium-zoom is using are based on the responsive image on desktop with the dimensions of 16:9).

So it even doesn't work when I use the data-zoom-target attribute. If the data-zoom-target image has a different dimension to the current visible one, it is distorted too.

Example of a picture element:

<picture >
    <source
        media="(min-width: 880px)"
        srcset="./../assets/img/home/example-guy_d.jpg"> <!-- may has a dimension of 16:9 -->
    <img
        class="o-section-stock__photo-img"
        src="./../assets/img/home/example-guy_m.jpg" <!-- may has a dimension of 10:8 -->
        alt="…"
        data-zoom="medium-zoom"
    >
</picture>

I know, it is complicated. I'm not sure if there is a simple solution for that. My first idea was that medium-zoom could read the srcset and decide which image it should use/is the current visible one on the screen and use it. But I think it will be a longer project with all the browser polyfills needed etc.

So maybe the easiest would be that medium-zoom takes the dimensions of the data-zoom-target into account when it uses this as the image source. So it would be a simple workaround for picture elements to use the data-zoom-target. But of course, it still needs a way to scale from dimension A to B ... but maybe easier than hacking around with srcset and all it's -maybe- possibilities ...

I'm using medium-zoom on some responsive images (with srcset), and I'm running into some weird behaviour. I'm using a script to calculate the most appropriate image size for the clients viewport, and I set that as the data-zoom-target attribute.

But when zooming it seems to be zooming to the wrong size (as instead of enlarging to fill the viewport, the image shrinks). I'm not sure what exactly's going wrong. Is this a bug, or am I doing something wrong here?

PR implementing the above: https://github.com/ismay/ismaywolff.nl/pull/718
Live url demonstrating the above: https://deploy-preview-718--ismaywolff.netlify.com/work/mould

Unzoomed:

Zoomed:

Hi

When images are placed side by side, or floating them and a margin is placed on the zoomed image, the margin is not present on the left hand side of the zoomed image and is doubled on the right hand side.

This doesn't happen when it's just a single image that it isn't floated.

Currently, medium-zoom has examples for React. I think an example with Vue would be nice as well, cheers!

Its cool plugin. Thanks mate

Bug description

But when i tried i got issue like this.

There is media-zoom class initialized but with hidden . Please can you tell me where did i wrong?

Here is my code
` renderQuestionElement() {
//store a this ref, and
var _this = this;
//wait for a paint to do scrolly stuff

window.requestAnimationFrame(function() {
  var titles = [];
  var count = 0;
  var IsRendered = 0;
  mediumZoom('img');
  ..............................

The problem

Trying the example at https://medium-zoom.francoischalifour.com on iOS Safari and trying to zoom further on "zoomed images" (images you clicked on) with the commonly used pinch gesture triggers the scroll event and "unzooms" the image. The browser zoom still works, allowing the user to zoom on "unzoomed images" but those images are usually lower resolution, so it defeats the purpose.

Solution

Detect the pinch gesture somehow and don't zoom out if that's the reason why the scroll event is triggered.

Thank you! :D

If i fast double click on image, throw this exception.

browser = Chrome 60.0.3112

I'd like to suggest adding a max-width option to limit the size of the images - particularly on wide screens.

The problem

I prefer a margin on my images. The current margin option works on medium screens, but not on large ones. I can set a 200px margin that looks good up to ~1500px or so, but when screens are larger, I don't want the image to continue to expand - I'd prefer it have a maximum size. I don't think it's possible to achieve this with margins.

At least some of medium's images appear to have some form of max width - though perhaps this is due to the native image's dimensions.

Solution

Let users specify a max-width in their options.

I suspect this is possible with a custom template - but wonder if this is general purpose enough a need that it might be provided by default.

Hello,
nice work on this library! I am looking for a way to stop the plugin from firing more events right after opening the zoom window — I'll fade it out and destroy manually after a new page is loaded in the background.

Something like:

zoom.on('open', function() {
  zoom.off('open');
  }, {
  once: true
});

I tried detaching, but that "too cleverly" closes the modal before that, I really just want it to stop listening to any events (and stay opened).

Thanks.

Bug description

.medium-zoom-overlay is being added at the same moment as .medium-zoom-image, and therefore the image is being placed outside of the container.

How to reproduce

A list of the steps to reproduce the bug.

1. Run mediumZoom(document.querySelectorAll('.user-photo'))
2. Click on the image
3. See error

Expected behavior

A clear and concise description of what you expected to happen.

The image should be placed within the overlay div.

Reproducible example

Live example

Environment

• Browser: Chromium Mac and Safari iOS
• medium-zoom version: 1.0.4

Hi, great work and loved it 👍

would you consider add lazy-load support?

e.g. provide an option to bind the event listener on the selector instead of the itself, so it works for lazy-loaded images?

Thanks.

Hey there!

I feel like the React example does not feel "React-ish" enough as it is querying the DOM.

Here is how I would use it with React: https://codepen.io/antoinechalifour/pen/rGLRom

Great job!

Hexo theme NexT provide medium zoom support.
After enable medium zoom in my hexo site, I encounter a problem for image with link.
Normally, for small images or icons with link, user will be redirected to the linked webpage when clicked, and popup of the image is not expected.
Before tryout medium zoom, I use fancybox. Everything work as expected and image with link wouldn't popup when clicked.

So, is it possible disable popup/zoom for image with links with medium zoom?

Love the plugin, thanks for all of your work.

I have a mix of SVGs and PNGs on my site, and the PNGs are expanding beautifully, but when the SVG images are clicked they actually get smaller.

Let me know if you have run into this before.

On upgrading to the recently released 1.0 version, regular links have stopped working.

How to reproduce

1. Add a link to a URL somewhere in your HTML
2. Run mediumZoom('img')
3. Click on the link
4. Page does not navigate to the URL

Reproducible example

https://codesandbox.io/s/r7rw0qr6l4

Environment

• Browser: Chrome
• medium-zoom version: 1.0.0

I generate images dynamically because I am doing a SPA but the zoom does not work.

Bug description

On a retina display, with both srcset and data-zoom-src on the image, the dimensions are wrong on the zoomed image (the image is the same size the unzoomed image). I expected that the zoomed image would be the one in data-zoom-src.

      <img
        src="<%= item.gallery_image[orientation].url %>"
        srcset="<%= item.gallery_image[orientation].url %> 1x, <%= item.gallery_image[`${orientation}_2x`].url %> 2x"
        data-zoom-src="<%= item.gallery_image.url %>"
        alt="<%= item.gallery_image.alt %>"
      >

If I remove the srcset attribute, the image is correctly sized. This only happen on a retina display,

I saw #27 was similar to my issue, but looks like it should be fixed?

I created a sandbox here with the same setup as I have, you can see how weird the zoomed image is sized: https://codesandbox.io/s/6vlwkp24yk

I gave a try using the Zooming library, and it has the behaviour I want, if it helps to understand: https://codesandbox.io/s/n5yypw66wp

Environment

• Browser: name / version: Chrome Mac latest
• medium-zoom version: 1.0.3

Let me know if I need to provide more information to pin point the issue!

Bug description

I was working on a gallery that has images in the same row that occupy the 100% of the screen. These images are inside a flex container, and had a data-zoom-src with the full size picture, but when it's zoomed in, the pictures are shown with weird proportions.

Expected behavior

Images should be zoomed in with the proportions of the data-zoom-src image provided.

Reproducible example

Link to the bug reproduction

The problem

mediumZoom('#svg-element') does not work

A concise description of why you want a new feature.
we are using mermaid in our docute, we would love to have this working

Solution

Add inline SVG support

I noticed that the library is not working in IE. I tracked down the cause and was briefly working on a solution but I'm a little bit stuck.

There seems to be a babel transpilation issue which makes use of the _toConsumableArray which in turn uses Array.from and that is not supported in IE. All this causes the image selection process to go into the catch routine.

After some googling, I tried to apply the fix with the transpile-runtime babel plugin as described here babel/babel#934. This did not quite work out for me, but maybe I configured it wrong, I'm not familiar with rollup. I installed the babel-plugin-transform-runtime and added it as 'transform-runtime' to the .babelrc.

Another approach woud be to polyfill Array.from with this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill but it is a lot of additional code just for that tiny bit of functionality.

Additionaly, there are some issues with the demo page at https://medium-zoom.francoischalifour.com/ which can be fixed by introducing the Array.from polyfill into the demo.js and getting rid of the template string rendering the span element.

What do you think about IE11 support?

I saw the example for vue, but was unable to get this working for Nuxt 🤔

Is anybody willing to help with this? If so I think this would make a welcome addition to the examples page 😉

The closest I got was with a bit of code taken from https://github.com/simonhermann/mi-museum/blob/master/plugins/global.js

import Vue from 'vue'
import mediumZoom from 'medium-zoom'

const initAfterMount = () => {
  mediumZoom('#app img')
}

Vue.mixin({
  mounted: function() {
    // this will be called when any component is mounted!
    initAfterMount()
  },
})

However this isn't functioning correctly ...

Hi again!

I am building an app in with images in cards, these cards have an "overflow: hidden" property and MZ doesn't work that well in this case.

Here is a simplified example to reproduce this bug: https://codepen.io/antoinechalifour/pen/yzVpMa

My 2 cents: MZ should clone the image element, append it to the end of the body and manipulate that element instead of the original one.

Also, this example breaks the scroll feature: https://codepen.io/antoinechalifour/pen/EwNoXb

There are mainly 2 ways of setting images for different dpi: one is CSS background with media query, the other is srcset attribute with <img>.

Is it possible to show alternative image that are set in srcset when zooming?

Hi there,

am using your plugin on a site of mine and everything works fine so far (great suite!) but there is one issue / quetsion I am facing:

How can I (globally) set the plugin's setting to not select any images by default and only work with what I am providing?

By default, the zoom is applied to all scaled images (with HTML or CSS properties). You can specify the zoomable images with a CSS selector and add options.

Specyfing zoomable images only adds to the default selection, at least when I tried...

mediumZoom(document.querySelectorAll('[data-action="zoom"]'));

Thanks for any input on how to achieve this!

EDIT: Might be connected to #7 since it is triggering on my SVG? No tag as parent or anywhere near that SVG though...

<svg id="open-slash" data-name="open-slash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.08 13.28" class="medium-zoom-image"><path class="slash" d="M148.58,282.81h-1.16l7.91-13.28h1.16Z" transform="translate(-147.41 -269.53)"></path></svg>

It would be awesome if we could set SUPPORTED_FORMATS as we need.

Right now medium-zoom is enable on some SVG icons I have even if I target img tag:
mediumZoom(document.querySelectorAll('.content img'))

Let me know what you think?

Cheers!