The image sizes are determined in the "basiclightbox.min.css" file.
Here's the contents of the file with the relevant line isolated:
.basicLightbox{position:fixed;display:flex;justify-content:left;align-items:center;top:0;left:0;width:100%;height:100vh;background:#999999;opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}.basicLightbox--visible{opacity:1}.basicLightbox__placeholder{max-width:100%;transform:scale(.9);transition:transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child
{display:block;position:absolute;top:0;right:0;bottom:0;left:0;
margin:auto;
max-width:75%;
max-height:50%}
.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}
{display:block;position:absolute;top:0;right:0;bottom:0;left:0;
margin:auto;
max-width:75%;
max-height:50%}
.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{transform:scale(1)}
Increasing the "max-height:50%" increases the size of the image until it hits the "max-width:75%". I want to change the 50% to 75% for some specific images. Some of the images are very narrow so I need to make them taller.
I created a second css file "basiclightbox02.min.css"
In it is only the relevant line:
{display:block;position:absolute;top:0;right:0;bottom:0;left:0;
margin:auto;
max-width:75%;
max-height:75%}
margin:auto;
max-width:75%;
max-height:75%}
In body:
<button class="image1001">mom</button>
<button class="image1002">dad</button>
<button class="image1002">dad</button>
In script:
document.querySelector('button.image1001').onclick = () => {
basicLightbox.create(`
<img src="images/mom.jpg">
`).show()
}
document.querySelector('button.image1002').onclick = () => {
basicLightbox.create(`
<img src="images/dad.jpg">
`).show()
}
basicLightbox.create(`
<img src="images/mom.jpg">
`).show()
}
document.querySelector('button.image1002').onclick = () => {
basicLightbox.create(`
<img src="images/dad.jpg">
`).show()
}
Plus basicLightbox.min.js.
Here's the basiclightbox setup and demo on my test server:
https://foreverhosting.net/test.html
Everyone always says don't put style inline, but I couldn't even get close to getting that to work. Though if workable, it might be the simplest.
I tried putting height and width values in but they don't work to override the css from the original.
<img width="75%" height="75%"src="images/dad.jpg">
and
<img width="1400" height="900" src="images/dad.jpg">
No luck. Some how it doesn't work in the lightbox.
I looked around for how to apply a different style sheet to a specific html line but couldn't find anything I could get to work.
So I'm now at the point where I need to change the size of of "dad.jpg" and a few others using a second css file that will only apply when needed.
The original css file would apply to "mom.jpg", then the second css file would apply to "dad.jpg", then the second css would stop applying and the original would return for images after "dad.jpg".
I think that the best way would be create a third css file with the original line so precedence would revert it.
{display:block;position:absolute;top:0;right:0;bottom:0;left:0;
margin:auto;
max-width:75%;
max-height:50%}
margin:auto;
max-width:75%;
max-height:50%}
This is all well and good, but I haven't a clue on how to write original code that changes the line back and forth. I'm pretty good with cut and paste, but writing original code for a situation like this is still a bit away.
Anyways, thanks in advance and I hope you all have a great year.
