Добавьте прокрутку в Lightbox2

Вот изображение проблемы, которую я пытаюсь решить.Я работаю над своим сайтом-портфолио; и у меня есть изображения некоторых моих личных проектов, все они одинаковой ширины, но некоторые имеют разную высоту. Из-за того, что я получаю полностраничные скриншоты моей работы, некоторые изображения имеют гораздо большую высоту, чем другие. Вместо того, чтобы отображать все изображения одинакового размера и разрешать прокрутку в модальном окне, он уменьшает изображения, чтобы они соответствовали той же высоте, что и все остальные. Это придает ему странный вид, потому что некоторые изображения сильно уменьшаются. Я хотел бы, чтобы все изображения отображались с одинаковой шириной, а те, которые в ней нуждаются, позволяют прокручивать остальную часть изображения. Я пытался использовать overflow: scroll; на .lightbox, но это не помогло. Я также пробовал overflow-y. Я также хотел бы отключить возможность прокрутки страницы в фоновом режиме, чтобы прокрутка была сосредоточена на изображениях, на которых это необходимо.

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
    
}

.lightbox .lb-image {
  display: block;
  min-width: 100%;
  height: auto;
  border-radius: 3px;  
  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  min-height: 250px;
  margin: 0 auto;
  border-radius: 4px;
  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}


javascript jquery css lightbox2
person Aaron Kell    schedule 22.03.2018    source источник
comment
Все мои изображения имеют ширину 2880 пикселей, но они варьируются от 1562 до 11014 пикселей. Изображение с очень большой высотой сильно уменьшается.   -  person Aaron Kell    schedule 23.03.2018
comment
рабочий пример значительно облегчил бы нам задачу дать вам правильный ответ. попробуйте добавить фрагмент кода к вашему вопросу.   -  person DriftingSteps    schedule 23.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

Lightbox2 по умолчанию добавляет рассчитанную ширину и высоту к изображению и .lb-outerContainer. Но вы можете переопределить это, выполнив следующие действия:

.lb-outerContainer {
  width: 100% !important;
  height: auto !important;
}
.lightbox .lb-image {
  width: 100% !important;
  height: auto !important;
}

Я не рекомендую это, потому что это нарушает предполагаемое использование этого плагина. Я уверен, что вы найдете альтернативу lightbox2, которая достигает того, что вы ищете. Так что можете считать это временным решением.

EDIT: Вот jsfiddle, чтобы увидеть, как это работает. https://jsfiddle.net/hsugx6wm/43/

person DriftingSteps    schedule 23.03.2018
comment
Я хочу сохранить окно лайтбокса того же размера, просто чтобы изображения с переполнением могли прокручиваться вниз в этом окне. - person Aaron Kell; 11.04.2018
comment
@AaronKell Я добавил jsfiddle с дополнительным переопределением CSS, чтобы сделать его близким к тому, что вы описываете. - person DriftingSteps; 11.04.2018