Comments (6)
Hi, @frederickfogerty
Thank you for fast responsive and your alternatively fix idea.
I will try it and let you know about result.
from luminous.
It worked on Chrome for me @frederickfogerty. Thanks! Depending on how you want it to behave on mobile though, when you click on the image, the image will go to full size. I just removed this from the CSS instead of adding display:block;
.lum-lightbox-inner img{max-width:none;max-height:none}
Not fully sure of the repercussions on other browsers, but it did the job for me
from luminous.
Hi @Haduki029 👋 thank you for the issue.
It's hard to understand this specific problem without a screenshot or a way to reproduce this issue. Do you think you could provide either of these? Thanks!
from luminous.
Hi @Haduki029 👋 thank you for the issue.
It's hard to understand this specific problem without a screenshot or a way to reproduce this issue. Do you think you could provide either of these? Thanks!
https://honeycomb.liftoff.shop/vertical-poster-print
Clicking on the product image on this page reproduces the issue.
This issue is present in the current (as of 13-8-21) versions of Chrome and Edge (appears to be Webkit/Blink related) under both Mac OS and Windows, but not present in Firefox or Safari under Mac OS.
from luminous.
Thanks for the repro, I can see the issue now.
The right solution here is probably to modernise the way the positioning happens in the Lightbox to use Flexbox. Unfortunately I don't think we will have time to prioritise this work internally for a while, but I will add this to the backlog to see what happens.
Alternatively, a quick fix for your situation would be to set display
to block
for .lum-lightbox-image-wrapper
. As code that would look like this:
.lum-lightbox-image-wrapper {
display: block !important;
}
I am hesitant to blindly update this library with this change since a) it will probably break in IE, and b) I would need to do some other cross-browser testing.
Let me know how this goes for you. Also, if you would like to submit a PR reworking this positioning to use Flexbox, or updating this CSS and doing some testing in evergreen browsers, I would gladly accept it. Thanks!
from luminous.
Closing this as there appears to be an adequate answer provided.
from luminous.
Related Issues (20)
- Separate basic theme and "fullscreen"-esque mode HOT 1
- injectBaseStyles not setting HOT 2
- How to inject captions when using LuminousGallery class HOT 1
- Add option to set caption (suggestion) HOT 2
- I want to give a class name to the enlarged image. HOT 2
- Demo url on documentation leads to 404 error
- Action Required: Fix Renovate Configuration
- is it possible to use luminous in vue.js? HOT 1
- Dependency Dashboard
- Include license in distributed JS HOT 3
- closetrigger? HOT 2
- The automated release is failing 🚨
- Keyframe rule ignored due to bad selector. HOT 2
- Small viewport sizes don't scale the image properly HOT 3
- Arrows are not in the vertical center of the image HOT 1
- onChange doesn't work HOT 1
- What is the proper way to import LuminousGallery?
- Direct including a script from CDN (Unpkg, jsDelivr, ...)
- Call for Maintainer(s) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from luminous.