Галерея лайтбоксов портит навигацию и нижний колонтитул - PullRequest
Новая
       33

Галерея лайтбоксов портит навигацию и нижний колонтитул

0 голосов
/ 15 мая 2019

Я добавил галерею лайтбоксов на свой сайт, и если я хочу, чтобы галерея лайтбоксов работала, я добавляю 

* {
  box-sizing: border-box;
}

на мой css. Однако, когда он добавлен, он разрушает формат моего нижнего колонтитула и панели навигации. Если я уберу это, то световой короб перестанет работать, так как между изображениями нет промежутков. Есть ли способ просто применить это там, где изображения, чтобы это не конфликтовало со всем остальным на моем сайте.

Я попытался добавить размеры окна только к определенным классам, где изображение, однако оно не работает, поскольку оно все еще не добавляет границу. Я также попытался добавить размер границы, но я не смог заставить это работать. 

<div class="row">
  <div class="column">
    <img src="img1.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img2.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img3.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="img4.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="img1_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="img2_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="img3_wide.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="img4_wide.jpg" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>


    <div class="column">
      <img class="demo cursor" src="img1_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="img2_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
    </div>
    <div class="column">
      <img class="demo cursor" src="img3_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="img4_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
  </div>
</div>

Я готов отправить весь свой код, если это необходимо. Если вы можете мне помочь, у меня должен быть промежуток внизу изображений, чтобы в нем могло быть несколько строк, не портя навигационную панель и нижний колонтитул.

...