Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image disappears on zoom #70

Open
paulzz3000 opened this issue Jan 19, 2016 · 13 comments · May be fixed by #78
Open

Image disappears on zoom #70

paulzz3000 opened this issue Jan 19, 2016 · 13 comments · May be fixed by #78

Comments

@paulzz3000
Copy link

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
Copy link
Author

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
Copy link
Author

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

@jstnbr
Copy link

jstnbr commented Feb 29, 2016

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.

@lowrie
Copy link

lowrie commented Mar 26, 2016

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

@oscaralexander
Copy link

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.

@geekplux
Copy link

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

geekplux pushed a commit to geekplux/zoom.js that referenced this issue May 24, 2016
change the zoom-overlay position to fix fat#70
dcc5da5
@geekplux geekplux linked a pull request May 24, 2016 that will close this issue
Open
@geekplux
Copy link

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.

@NvdB31
Copy link

NvdB31 commented Jun 13, 2016

@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?

@geekplux
Copy link

@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

@SandroMiguel
Copy link

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

@kakoni
Copy link

kakoni commented Aug 22, 2016

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

@kirbyyardley
Copy link

@geekplux
Your change worked for me. Danke!

@huydhoang
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

change the zoom-overlay position to fix #70 geekplux/zoom.js
10 participants
@kakoni @oscaralexander @paulzz3000 @geekplux @lowrie @kirbyyardley @SandroMiguel @huydhoang @NvdB31 @jstnbr