Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Mac

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

Рекомендованные сообщения

04/05/15 16:14 (изменено)

Всем привет!

 

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

 

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

 

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

Изменено пользователем Mac

Поделиться сообщением


Ссылка на сообщение
04/05/15 17:08 (изменено)

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

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

 

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

Изменено пользователем Viktar83
  • Upvote 2

Поделиться сообщением


Ссылка на сообщение
04/06/15 05:52 (изменено)

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

 

Найти:

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 не силен. Может кто подскажет, почему высота картинки не определяется.

Изменено пользователем 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

  • Upvote 3

Поделиться сообщением


Ссылка на сообщение

Спасибо, очень полезная штука, но я решил все-таки впилить любимый 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 никак не сделаешь...

Поделиться сообщением


Ссылка на сообщение
01/30/17 08:49 (изменено)

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

 

Найти

 

return[pageWidth,pageHeight];}}

Заменить на

 

return[pageWidth,pageHeight-100];}}

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

 

#overlay { 
height: 100% !important; 
}

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

Изменено пользователем Strategius
  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

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

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...