Create a separate css rule or sheet for an individual embedded image then revert back to the origina-CodePudding

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 the body is:

<button >mom</button>      
<button >dad</button>

In script is:

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 codepen:

https://codepen.io/electerious/pen/rLBvGz

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.

Here's a pin that shows that shows the layout:

https://codepen.io/koretech/pen/jOpPVmg

Anyways, thanks in advance and I hope you all have a great year.

CodePudding user response：

if I understand well:

you know which image needs to be 75% max- height, and image 50%
you already are selecting the image and opening the lightbox with it

So if dad is image for 75%, when you write:

document.querySelector('button.image1002').onclick = () => {
    basicLightbox.create(`

        <img src="images/dad.jpg">
    
`).show()
}

You have callbakcs in basiclightbox, look at onshow in the documentation (https://github.com/electerious/basicLightbox)

so when "show", you select your basiclightbox and changed the max-height when you have to:

  document.querySelector('basicLightbox').style.maxHeight = '75%';

CodePudding user response：

pier farrugia

I tried

document.querySelector('button.image1001').style.maxHeight = '75%';.onclick = () => {

    basicLightbox.create(`
        <img src="images/dad.jpg">
    `).show()
}

document.querySelector('button.image1001').style.maxHeight = '50%';.onclick = () => {

    basicLightbox.create(`
        <img src="images/son.jpg">
    `).show()
}

Sigh.

Also tried:

document.querySelector('basicLightbox').style.maxHeight = '75%';

document.querySelector('button.image1001').style.maxHeight = '75%';.onclick = () => {

    basicLightbox.create(`
        <img src="images/dad">
    `).show()
}

document.querySelector('basicLightbox').style.maxHeight = '50%';

What am I missing?

CodePudding user response：

How about something like this. (Made use of https://conraddreyer.com/blog/how-to-add-a-gallery-to-basiclightbox)

let images = [{
    src: "https://s-i.huffpost.com/gen/1503368/images/o-SNOWFALL-facebook.jpg",
    caption: "winter",
    class: "narrow"
  },
  {
    src: "https://getwallpapers.com/wallpaper/full/4/c/3/911916-cool-beautiful-summer-backgrounds-1920x1080-notebook.jpg",
    caption: "summer",
    class: "wide"
  },
];

const instance = basicLightbox.create('', {
  className: 'lightbox',
});

const elem = instance.element();

document.getElementById('showGallery').addEventListener('click', (event) => {
  instance.show();
  showImage(0);
});

function showImage(index) {
  index = (index   images.length) % images.length; // circle images
  let htmlValue = '';
  let image = images[index];
  htmlValue  = `
    <button data-next="${index-1}"  onclick="showImage(${index-1})">«</button>
    <figure id="lightboxContent" >
      <img  src="${image.src}">
      <figcaption>${image.caption}</figcaption>
    </figure>
    <button data-next="${index 1}"  onclick="showImage(${index 1})">»</button>
  `;
  elem.innerHTML = htmlValue;
  instance.show();
}

.narrow {
  max-width: 50%;
  max-height: 50%;
}
.wide {
  max-width: 80%;
  max-height: 80%;
}
figure {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/basicLightbox/5.0.0/basicLightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/basicLightbox/5.0.0/basicLightbox.min.js"></script>

<button type="button" id="showGallery">Show Gallery</button>

Update per OP's comment

const instance = basicLightbox.create('', {
  className: 'lightbox',
});

const elem = instance.element();

elem.addEventListener("click", (event) => {
  instance.close();
});

Array.from(document.getElementsByClassName('image-btn')).forEach(imageBtn => imageBtn.addEventListener('click', (event) => {
  instance.show();
  showImage(imageBtn.dataset);
}));

Array.from(document.getElementsByClassName('words-btn')).forEach(imageBtn => imageBtn.addEventListener('click', (event) => {
  instance.show();
  showWords(imageBtn.dataset);
}));

function showImage(data) {
  elem.innerHTML = `
    <figure id="lightboxContent" >
      <img  src="${data.src}">
      <figcaption>${data.caption}</figcaption>
    </figure>
  `;
  instance.show();
}

function showWords(data) {
  let liHtml = "";
  let words = JSON.parse(data.words);
  for (let i = 0; i < words.length; i  ) {
    liHtml  = `<li>${words[i]}</li>`;
  }
  elem.innerHTML = `
    <figure id="lightboxContent" >
      <ul >${liHtml}</ul>
      <figcaption>${data.caption}</figcaption>
    </figure>
  `;
  instance.show();
}

.section {
  margin-bottom: 4rem;
}

a.image-btn {
  text-decoration: none;
}

a.words-btn {
  display: inline-block;
  appearance: none;
  background: #2875ed;
  margin-left: .5em;
  padding: .5em 1em;
  border: none;
  color: white;
  font: inherit;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}

a.btn img {
  max-width: 10rem;
  cursor: hand;
}

.narrow {
  max-width: 50%;
  max-height: 50%;
}

.wide {
  max-width: 80%;
  max-height: 80%;
}

figure {
  text-align: center;
  color: white;
}

figcaption {
  font-weight: bold;
}
figure ul {
  text-align: left;
  border: 1px solid #eeeeee;
  padding: 2rem 3rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/basicLightbox/5.0.0/basicLightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/basicLightbox/5.0.0/basicLightbox.min.js"></script>

<div >
  <a href="#"  data-caption="Winter" data-src="https://s-i.huffpost.com/gen/1503368/images/o-SNOWFALL-facebook.jpg" data->
    <img src="https://s-i.huffpost.com/gen/1503368/images/o-SNOWFALL-facebook.jpg" />
  </a>
  <a href="#"  data-caption="Winter Words" data-words='["Something about winter", "Another thing about winter", "Another thing about how beautiful winter is", "etc."]' data->    Words
  </a>
</div>

<div >
  <a href="#"  data-caption="Summer" data-src="https://getwallpapers.com/wallpaper/full/4/c/3/911916-cool-beautiful-summer-backgrounds-1920x1080-notebook.jpg" data->
    <img src="https://getwallpapers.com/wallpaper/full/4/c/3/911916-cool-beautiful-summer-backgrounds-1920x1080-notebook.jpg" />
  </a>
  <a href="#"  data-caption="Summer Words" data-words='["Something about summer", "Another thing about summer", "Another thing about how beautiful summer is", "etc."]' data->    Words
  </a>
</div>