- This topic has 7 replies, 2 voices, and was last updated 7 years, 11 months ago by
.
Is it possible insert custom css to make the images larger when view in Lightbox? Currently an image will only take up about 80% of the screen height when in lightbox, can this be changed so that the image is bigger/taller to take up 95% of the window height? Thanks!
Hi there,
Thank you for question.
It isn’t possible with CSS as JS calculates lightbox element sizes.
However it could be possible to edit JS file by changing maxWidth and maxHeight variables in js/scripts.js:633 file.
Best regards,
Shufflehound team
Thank you for the specific answer.
I’ve tried modifying those variables but it produced no changes. Also purged cache/cookies to confirm that wasn’t the issue. I also tested modifying a couple variables in lightcase.js to no effect.
Any other ideas?
We just tested it and looks like it is now much larger, maybe even too large.
It is possible that browser cache wasn’t fully cleared.
In chrome, it still hasn’t changed for me. I’ve attached a screenshot to make sure we are talking about the same thing. It is the middle box that shows the media that I would like to be larger.
I did modify the arrows to be very large and would like them that way.
Please see our attached screenshot bellow.
That’s how we see it now, but we are not sure how can this image be so large.
Solution for this topic
Very bizarre.
You were originally correct. Modifying those lines to maxWidth: 1750, produced the current full-page image look visible on the site. My browser/server cache must have been messing up which is why I didn’t see the changes earlier. One might say, there was not enough change in the cache.
Thanks for all your help!
If someone else finds this thread helpful feel free to use the custom css below to get the same icon look on my website.
a[class*=’lightcase-icon-‘] {
position: fixed;
z-index: 9999;
width: 1.123em;
height: auto;
font-size: 78px;
line-height: 1;
text-align: center;
text-shadow: none;
outline: none;
cursor: pointer;
}Thank you for posting it here.
We will put your answer as solution for this topic. 🙂
