-
Posts
-
is there any way to adjust the lighbox image size for mobile devices
we have about 20.000 images in our galleries on dumaguete.com . most have 1024 px width.
While all works nice with lightbox on PC, and are full width when the mobile is held normal, the pictures appear very small on a cellphone with a big black frame around it, when rotated in horizontal position, or for that case also is the website is opened holding the cell horizontal.
please advice.
thanks RhoodyHey Rhoody,
I have checked one of your gallery pages and it looks good on my end, and the image stretch in full width and the height adjusts to the the width of the image. Can you post a screenshot on how it looks on your end? so we can check.
Best regards,
Nikkoon pc or tablet it is all fine
I talk about lightbox on cellphones.
having the phone horizontal the images are small and don’t adjust with the big gray lightbox frame around.
on a 5 inch display, the picture width is less than 3 inch.below a screenshot
https://dumaguete.com/wp-content/uploads/2017/09/cell-horizontal-ss.jpgHi,
Thank you for the update.
You can use the following css code to increase the image container a bit.
.mfp-img { padding: 5px 0 5px; }Best regards,
Ismaelthanks for your reply.
look at the screenshot
https://dumaguete.com/wp-content/uploads/2017/09/Screenshot-Sep-13-2017-11_31_38-AM.jpg
still 3/4 of the phone-display is grey frame and only 1/4 the image
cheersHi,
Did you remove the browser cache after adding the code? What is the actual model of your device?
Screenshot from iPhone 6 plus emulation: https://imgur.com/a/CJ7XH
Best regards,
IsmaelHi thanks for your answer.
I have a Samsung J5 here.
your screenshot is how it looks when I hold the phone in normal (vertical) position. if I rotate it to horizontal, the image remains the same size )does not adjust to the wide screensize, leaving the big frame around like in my previous screenshot.
so I guess there is not much to do aboutWe have the same problem on our page. Even when you start the gallery lightbox in horizontal mode the image remains small. Tested it on iPhone 4, 5 and 7 as well as on Samsung and Huawei devices.
Any solutions so far?
Example galleries:
Hi DJarr,
As far as I could see on your site, the images occupy 100% of the screen width and it would not be possible to show them larger without users having to scroll to be able to view the entire image. If I have misunderstood you then please post a screenshot of the problem and try to explain a bit further.
Best regards,
RikardWe used to have a similar problem before on every other screen than mobile phones. Using this code we scaled it to 110% and the issue was solved:
img.mfp-img {
max-width: 110% !important;
width: 110%;
}
Unfortunately this never worked for mobile screens. The images are very small, making the lightbox feature on mobile device almost useless (they are not larger than the images already displayed).How can I provide a screenshot in this Forum?
Hi,
Thanks for the update. What is the actual model of the device? I can’t seem to find the images described in the screenshot. Please note the lightbox script relies on the height of the image because the whole image has to be visible inside the view port container. If you want to test it, just add this css code.
img.mfp-img { max-height: 200vh !important; }The height of the image is going to be twice the height of the viewport. The width is already set to “auto” so it’s going to adjust accordingly.
Best regards,
Ismael
- You must be logged in to reply to this topic.