Отступ сверху у Lightbox - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Правила раздела

Здесь обсуждаются вопросы по настройке и администрированию форумов IPB 3.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Установка, настройка и обслуживание форумов IPB 2.x.
Оформление форумов, включая верстку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

Теги не найдены

Страница 1 из 1

Отступ сверху у Lightbox Как убрать?

#1 Пользователь не на сайте   Mac ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 43
  • Регистрация: 15-Июнь 14
  • Репутация: 1
  • IPB version:3.4.x
 

Отправлено 05 Апрель 2015 - 19:13

Всем привет!

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

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

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

Сообщение изменено: Mac (05 Апрель 2015 - 19:38)

0

#2 Пользователь не на сайте   Viktar83 ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 120
  • Регистрация: 10-Декабрь 14
  • Репутация: 71
  • Откуда:РБ
  • IPB version:3.4.x
 

Отправлено 05 Апрель 2015 - 20:07

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

Смотрим на
<div id="lightbox" style="top: 394.1px; left: 0px;">

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

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

Например, в этой же версии Lightbox есть проблема: картинки открываются в оригинальном размере и не масштабируются, если их размер превышает размеры окна.
Решение нашел здесь у пользователя Arhar: http://forums.ibreso...henij/?p=374935

----
В общем, находите в этом файле строку:
var lightboxTop=arrayPageScroll[1]+(document.viewport.getHeight()/10);

и меняете на:
var lightboxTop=arrayPageScroll[1];

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

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

Сообщение изменено: Viktar83 (05 Апрель 2015 - 20:15)

1

#3 Пользователь не на сайте   Mac ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 43
  • Регистрация: 15-Июнь 14
  • Репутация: 1
  • IPB version:3.4.x
 

Отправлено 06 Апрель 2015 - 08:51

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

Найти:
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 (06 Апрель 2015 - 08:58)

0

#4 Пользователь не на сайте   Viktar83 ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 120
  • Регистрация: 10-Декабрь 14
  • Репутация: 71
  • Откуда:РБ
  • IPB version:3.4.x
 

Отправлено 06 Апрель 2015 - 10:56

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

#5 Пользователь не на сайте   Viktar83 ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 120
  • Регистрация: 10-Декабрь 14
  • Репутация: 71
  • Откуда:РБ
  • IPB version:3.4.x
 

Отправлено 16 Апрель 2015 - 21:52

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

найти
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 (3,07К)
    Количество загрузок: 8

3

#6 Пользователь не на сайте   Mac ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 43
  • Регистрация: 15-Июнь 14
  • Репутация: 1
  • IPB version:3.4.x
 

Отправлено 19 Апрель 2015 - 09:57

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

#7 Пользователь не на сайте   siv1987 ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins Team
  • Сообщений: 8 720
  • Регистрация: 20-Март 09
  • Репутация: 2 269
  • IPB version:3.1.x
 

Отправлено 19 Апрель 2015 - 13:01

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

#8 Пользователь не на сайте   Strategius ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 399
  • Регистрация: 27-Март 16
  • Репутация: 29
  • IPB version:3.4.x
 

Отправлено 11 Июль 2016 - 16:23

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

#9 Пользователь не на сайте   Strategius ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 399
  • Регистрация: 27-Март 16
  • Репутация: 29
  • IPB version:3.4.x
 

Отправлено 16 Октябрь 2016 - 15:55

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

Сообщить об этой теме:


Страница 1 из 1


Быстрый ответ

  

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2016 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна