separate css sheet for individual...

User 3134380 Photo


Guest
3 posts

I have a page with multiple images using basiclightbox. (which by the way is awesome).

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)}


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%}


In body:

<button class="image1001">mom</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()
}


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%}


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.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now


It's far better to put a border around your images to make them all the same size and that matches your background color.

If you want to deal with showing a single image for each button click you maybe be able to apply styling within the js.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.