Область заголовка лайтбокса слишком узкая - PullRequest
Новая
       9

Область заголовка лайтбокса слишком узкая

0 голосов
/ 09 октября 2018

Я следовал некоторым советам других, чтобы изменить порядок кода JS, чтобы заголовок и lb-close плавали наверх.

Я также добавил точку останова для более отзывчивого потока изображения (особенно когда мои изображения заполняют страницу при открытии)

К сожалению для меня, как только я добавил точку останова, он нарушил весь код.Когда я проверяю элемент, кажется, что область div.lb-details теперь имеет размер 0x51.

Изображение здесь для справки: Заголовок имеет ширину 0 Ниже приведен код, который я создал, чтобы сделать всплывающее окно отзывчивым с помощью точек останова: 

@media only screen and (min-width: 1024px) and (max-width: 1600px)
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

Вот.lb-details и .lb-caption, чтобы вы могли видеть, что это не было изменено. 

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;

В файле JS я изменил только строку функции прототипа:

Гдеоригинал был: 

var self = this;
    $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));

Изменено на: 

var self = this;
    $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div></div>').appendTo($('body'));

Что может быть причиной этой проблемы?

...