Всем привет!

 

Окно лайтбокса открывается с отступом от верхнего края экрана (примерно 70 px). В итоге, картинки на небольших экранах сверху с отступом, а снизу немного уходят за край. Из-за этого постоянно приходится работать колесиком мыши :)

 

Есть ли возможность уменьшить это значение? Перекопал все шаблоны - так и не нашел.

 

В идеале вообще хотелось бы выравнивать картинку по центру экрана, а размер max-height: 100%, чтобы если картинка маленькая, была по высоте посередине, а не липла к верху.

Edited April 5, 201511 yr by Mac

В шаблонах ничего не найдете, надо копаться в / public / js / 3rd_party / lightbox.js

 

Смотрим на

<div id="lightbox" style="top: 394.1px; left: 0px;">

значение top рассчитывается в скрипте, вот и надо там править.

 

Т.е. тут нужен спец в JS, который сможет исправить скрипт.

 

Например, в этой же версии Lightbox есть проблема: картинки открываются в оригинальном размере и не масштабируются, если их размер превышает размеры окна.

Решение нашел здесь у пользователя Arhar: http://forums.ibresource.ru/topic/56358-vopros-po-povodu-zagruzki-izobrazhenij/?p=374935

 

----

В общем, находите в этом файле строку:

var lightboxTop=arrayPageScroll[1]+(document.viewport.getHeight()/10);

и меняете на:

var lightboxTop=arrayPageScroll[1];

Отступ исчезнет. Но маленькие картинки будут смотреться некрасиво - в самом вверху.

 

Правильнее было бы написать функцию, чтобы окно Лайтбокса центрировалась по высоте.

Edited April 5, 201511 yr by Viktar83

Спасибо за наводку! Вроде удалось соорудить условие, чтобы картинка всегда центрировалась по высоте.

 

Найти:

var lightboxTop=arrayPageScroll[1]+(document.viewport.getHeight()/10);

 

Заменить на:

var testimage=new Image();
testimage.src=this.imageArray[imageNum][0];
if(testimage.height>document.viewport.getHeight()) {
var lightboxTop=arrayPageScroll[1];
} else {
var lightboxTop=arrayPageScroll[1]+((document.viewport.getHeight() - testimage.height - 70)/2);	
}

 

70 - это высота рамки с подписью.

 

Вроде работает, но иногда почему-то testimage.height равно 0, и картинка открывается примерно с середины экрана. Встречается это у картинок в спойлере и только при первом открытии. В Javascript не силен. Может кто подскажет, почему высота картинки не определяется.

Edited April 6, 201511 yr by Mac

Тоже была подобная идея, но я определял высоту всего div'а сразу.

А не работает, потому что это надо вычислять для каждой картинки в отдельности (особенно если картинок несколько - обратите внимание на этот момент), т.е. надо писать не в переменную, а в какую-то функцию.

Похоже, у меня получилось:

 

найти

this.lightboxImage.setStyle({height:imgPreloader.height+'px'});

и сразу после точки с запятой вставить:

this.outerImageContainer.setStyle({marginTop:document.viewport.getHeight()/2-imgPreloader.height/2-35+'px'});

 

перед этим также необходимо выставить топ лайтбокса в ноль (см. сообщение 2):

var lightboxTop=arrayPageScroll[1]+(document.viewport.getHeight()/10);

заменить на

var lightboxTop=arrayPageScroll[1];

 

---

Вот готовый js файл, в него дополнительно включены правки по масштабированию ширины изображений от Arhar (см. сообщение 2)

Смотрите, проверяйте. Я пока тестирую - все как надо.

lightbox.zip

Спасибо, очень полезная штука, но я решил все-таки впилить любимый FancyBox - и выглядит симпатичнее, и прелоад умеет. Хотя в Галерее, конечно, остался лайтбокс (там он какой-то совсем другой).

Для FancyBox нужно еще дополнительно подключить jquery.

А как подключить FancyBox к IPB?

Не подскажете, где его найти для IPB?

Использую модификацию Лайтбокса для масштабирования картинок под высоту экрана, инструкция с ИБР - http://ipbskins.ru/forum/topic13788.html/page__view__findpost__p__91926

 

За это отвечает строка:

 

if(yScroll<windowHeight){pageHeight=yScroll;}else{pageHeight=windowHeight;}

Не подскажете, как изменить ее, чтобы картинка занимала 80% высоты экрана, а не всю?

Не подскажете, как изменить ее, чтобы картинка занимала 80% высоты экрана, а не всю?

Тоже интересует этот вопрос. В стилях такое невозможно корректно изменить.

Тоже интересует этот вопрос

По идее нужно задать свойство max-height для этой строки, только вот как это сделать... pageHeight=windowHeight; задает просто полную высоту экрана, без процентов...

Не подскажете, как это сделать, пожалуйста? Тут видимо через css никак не сделаешь...

Решил вопрос так: public\js\3rd_party\lightbox.js

 

Найти

 

return[pageWidth,pageHeight];}}

Заменить на

 

return[pageWidth,pageHeight-100];}}

В ipb_styles.css добавить:

 

#overlay { 
height: 100% !important; 
}

Все, большие картинки будут отображаться с небольшим отступом от краев экрана.

Edited January 30, 20179 yr by Strategius

Все, большие картинки будут отображаться с небольшим отступом от краев экрана.

Круть, работает.