You can clone with
Every so often instead of showing up in the center of the screen the lightbox overlay will be in the lower right hand corner. Are you aware of any factors about the image or the page that might trigger this?
It's not consistent, and if you click different lightboxed images some will show this behavior one click and then be fine on the next.
I've seen that issue before and I am still trying to figure out what is causing it. From my experience that only seems to happen in Google Chrome. What browser are you using?
I've been using chrome. I just checked it out in firefox and safari on a mac and I don't see the bug. Awesome tool in any event :)
I have an insight on this. I started using your lightbox today, and ran into the same issue of image going to lower right corner in Chrome.
I did a local HTML5 validation in Firefox/WebDeveloper, the only issue reported was a missing alt tag on the large (lightbox) image.
I added an alt tag, HTML5 validates, and now the image centers in Chrome. Woo hoo! http://gobryan.com
That said, would be cool if it centered dynamically (it does not respond to window resizing), but thats a nit pick. Works for my purposes.
If the following lines are uncommented, everything works OK in Chrome too.
that.$h = that.$element.find('.lightbox-content').height();
that.$w = that.$element.find('.lightbox-content').width();
Fixing bugs and updating to a new bootstrap version. Version 0.3
* Fixed Bug #5 - Lightbox didn't position correctly in Google Chrome
* Completed Issue #7 - Updating to boostrap v2.1.1
I just got this issue again. It seems there are still problems. It seems to have something to do with window size. When I had the window maximized I didn't have the problem. This is turning out to be very odd.
Same problem here with Safari, but Chrome and Firefox seem OK.
Installed this today and noticed this issue, but only when I committed my files to the server. I could not reproduce this issue locally, so I assumed it was a loading issue.
I added the load event handler to trigger the lightbox only after the image is loaded:
<img src="/images/myimage.jpg" id="jquery_load">
So far I haven't seen the bug return. Once in awhile it'll take a second before the lightbox appears, which I suspect is a slow image load that would normally produce this bug but now it's looking as it should.
I'm starting to think it is caused by how Chrome loads images. Maybe Chrome doesn't load the image from the server if the image is not visible. That could explain why it happens in Chrome, but not Firefox. That could also explain what you saw once you tried if from a server as opposed to the local machine.
Working on Issue #5
* Created function to handle centering the image and window
* Added load event to update the position if the image loads after opening
I've created a dev branch for this issue. I think I might have it fixed. It doesn't seem to occur any more for me. Could someone else try it out and let me know if it is better?
No problem. I'll go ahead and close this. Hopefully this issue won't show up again.
Even with the latest code from here, this behaviour is consistent if I use a bootstrap carousel inside the lightbox. I thought this was supported?
@petzlux If you wish to report an issue please open a new ticket
It seems like this issue is not entirely resolved. I'm getting a non-centered setup when I embed a YouTube iframe instead of an image. It appears that the top-left corner of the frame is getting centered. Shows up that way in both Chrome and Firefox. (http://thisll.nathanritter.com/employerhome.html)