zoom.js icon indicating copy to clipboard operation
zoom.js copied to clipboard

Published 20 hours ago • verified publisher icon fat

Image disappears on zoom

Open paulzz3000 opened this issue 9 years ago • 13 comments

Can't work this one out at all! Image starts to zoom then vanishes, leaving only the overlay. Both images on homepage (and elsewhere) exhibit this. https://classictheatrecumbria.co.uk

paulzz3000 avatar Jan 19 '16 13:01 paulzz3000

Only thing I can think of is that I'm having to strip the http: or https: from all links to validate the SSL. Not sure what to do about that.

paulzz3000 avatar Jan 19 '16 13:01 paulzz3000

Ignore me! Sorry, problem with overlay z-index.

paulzz3000 avatar Jan 19 '16 13:01 paulzz3000

This is happening to me as well. What was your solution? I've been messing with the z-index settings to try and get it working but still same issue as you.

jstnbr avatar Feb 29 '16 15:02 jstnbr

I'm having the same issue. Any fix yet?

lowrie avatar Mar 26 '16 23:03 lowrie

Having the same issue here. If the image is placed in a (relative) container with a z-index specified, you're probably screwed. The overlay will cover the container, and since the image has a z-index relative to its container, the image gets covered as well.

oscaralexander avatar May 21 '16 07:05 oscaralexander

same issue.. so how to fix it? @oscaralexander

geekplux avatar May 23 '16 17:05 geekplux

I created a PR to fix it.

the core diff is changing the zoom-overlay position from the <body> child to .zoom-img-wrap bro.

geekplux avatar May 24 '16 04:05 geekplux

@geekplux Thanks for your contribution, however your commit doesn't work for me. I'm trying to zoom images that live within a swiper slide (https://github.com/nolimits4web/Swiper).

Could you please tell me what you meant by changing the .zoom-overlay position? You mean that this element should be a child of .zoom-img-wrap?

NvdB31 avatar Jun 13 '16 12:06 NvdB31

@cloudrocketsoftware Thanks :) No, the .zoom-overlay should be a brother of .zoom-img-wrap, not child. You would understand easily If you checked my code in my PR #78.

-     document.body.appendChild(this._overlay)
+    this._targetImageWrap.parentNode.insertBefore(this._overlay, this._targetImageWrap)

https://github.com/fat/zoom.js/pull/78/files#diff-3480795a24ca13743948f6ea832c7c5dR160

geekplux avatar Jun 13 '16 14:06 geekplux

I have the same problem when I use bxSlider. If I apply this, the image appears but overlay don't.

SandroMiguel avatar Jun 25 '16 12:06 SandroMiguel

Moving onto the fork; https://github.com/spinningarrow/zoom-vanilla.js, solved my issues.

kakoni avatar Aug 22 '16 19:08 kakoni

@geekplux Your change worked for me. Danke!

kirbyyardley avatar Apr 24 '17 20:04 kirbyyardley

@kakoni thanks! zoom-vanilla.js works for me.

huydhoang avatar May 29 '18 01:05 huydhoang