Create a separate css rule or sheet for an individual embedded image then revert back to the original css file

HTML & CSS
1

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: ..... ...... 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> ....... ....... 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 the 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.

2

Css always trumps html attribute values except for the style attribute. You would need to use css not html.

e.g.
<img style="width:75%; height:75%;" src="images/dad.jpg">

Whether or not that will lose the aspect ratio of the image depends on what other things are going on as I couldn’t see a working demo.

3

…

basicLightbox.create(`

<img src="images/dad.jpg" class="taller">

`).show()

.taller {
max-height: 75%;
}

(Paul: The demo is click on the word “look” under dad in the test page.)

1 Like
4

Yes I have tried doing this, but the inline method will only fill the space defined in the basiclightbox.min.css file.

Were you able to view the demo at:

https://foreverhosting.net/test.html

If you look at the second image, dad.jpg, you can see the the image is stretched to fill the size defined in basiclightbox.min.css. There I used

<img style=height:100%" width="100%"src="images/dad.jpg">

In line style will not change the size defined by basiclightbox.min.css. That’s why I was thinking to create a second css file that would make the change, then revert back to the original css after.

This in the css file determines the size:

{display:block;position:absolute;top:0;right:0;bottom:0;left:0;
margin:auto;
max-width:75%;
max-height:50%}

Inline style does not over ride the css file.

Thanks for the reply.

5

m_hutley

Tried that in the new uploaded test.html on the first image using:

<img src="images/dad.jpg" class="taller">

and in css:

.taller {
max-height: 100%;
}

at:

https://foreverhosting.net/test.html

As you can see the image is still restrained by the original container size of 50%.

The basiclightbox.min.css defines the container size and I can’t get anything to change it except by changing the original css file. But then it applies to all images.

6

Where in your CSS are you defining the class? I cant find it, and neither can the browser.

7

m_hutley

It is in test.css, I use two css files. first basiclightbox.min.css, formats the basiclightbox stuff, and two test.css formats the page itself.

Haven’t had a problem with them working, but the blb.min.css defines the size of the lightbox image container before test.css applies.

8

So i went to https://foreverhosting.net/test.css. I hard-refreshed. The word “taller” is not in that document.

Are you sure you uploaded it after you made the change?

9

m_hutley

Yes, just checked again by looking at the contents of the file on the server.

.taller {
max-height: 75%;
}

is the first item in test.css.

Can’t get anything to over ride the basiclightbox.min.css, inline or in test.css.

That’s why I was thinking to create a second basiclightbox02.min.css and switch between them.

10

It seems like you’ve got a cache server somewhere between the webserver and me. Weird.

changes the HTML to avoid caching

Ah, right. Cascading Specificity Stupidity. I always hate this. A specific class should override a wide parent.

.basicLightbox__placeholder>img.taller:first-child:last-child {
  //whatever CSS styles you need.
}
11

m_hutley

tried locally:

.basicLightbox__placeholder>img.taller:first-child:last-child {
  style="height:100%;"}

Throws an error.

Think the < in the line is wrong.

12

You’re in a CSS file.

should just be
height: 100%;

13

m_hutley

So I put:

.basicLightbox__placeholder>img.taller:first-child:last-child {height:100%;}

in the test.css, no errors. but still no go.

and in body:

document.querySelector('button.image1001').onclick = () => {

		basicLightbox.create(`

			<img src="images/dad.jpg" class="taller">

		`).show()
}

I uploaded test.css.

it shows up when I look at the test.css file on the server directly, but doesn’t show if I go to:

https://foreverhosting.net/test.css

Sigh, slow server?

But locally it still doesn’t change the size of the image where it all shows.

14

Yeah thats what i thought… the server’s caching something, which is a bit of a pain, as it means your test page isnt seeing the CSS. You can temporarily force it to work by changing the HTML’s load from

<link rel="stylesheet" href="test.css">
to
<link rel="stylesheet" href="test.css?anythinghere">

(tho you’ll have to change the “anythinghere” every time… yes, its annoying.)

the height is being set (if I force-load the correct CSS), but setting a height to 100% while the max-height is still 50% wont change anything - if you change both the height and max height, you’ll see the image get bigger.

15

m_hutley

I’ll clear my cache

16

So here’s what I mean. I can see right now what you’ve done is dump the CSS into the HTML to try and force your server to play nice. Works in the short term.

If I inspect your image, you can see that the CSS is applying to it:

image
image1140×968 100 KB

Notes:
your new CSS class is the top one. You can see it’s “img.taller” instead of just “img”.
the height from the basicLightbox is being overridden (the second set down, where height: auto is stricken out)
the max-height is still being dictated by the basicLightbox css (the third set down)

If I add a max-height override to your class…

image
image1216×1045 111 KB

suddenly the image gets bigger, as it can fill up to 75% now.

1 Like
17

That did it max-height changed the size of the image.

Can’t thank you enough.

Anything I can do to reward you.

1 Like
18

m_hutley

And the images after stayed the original sizes.

The slight headache I had just went away.

Wish you grand success and much laughter.

:- )

1 Like
19

Happy holidays :slight_smile:

1 Like
20

m_hutley

Same to you.

And have a great new year.

Heck, have a great fifty years.