Отступ сверху у Lightbox

[Mac]

Всем привет!

 

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

 

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

 

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

Edited April 5, 2015 by Mac

[Viktar83]

В шаблонах ничего не найдете, надо копаться в / 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, 2015 by Viktar83

[Mac]

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

 

Найти:

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, 2015 by Mac

[Viktar83]

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

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

[Viktar83]

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

 

найти

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

[Mac]

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

[siv1987]

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

[Strategius]

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

[Strategius]

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

[Strategius]

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

 

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

 

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

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

[Trotor]

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

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

[Strategius]

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

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

[Strategius]

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

[Strategius]

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

 

Найти

 

return[pageWidth,pageHeight];}}

Заменить на

 

return[pageWidth,pageHeight-100];}}

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

 

#overlay { 
height: 100% !important; 
}

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

Edited January 30, 2017 by Strategius

[Trotor]

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

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