Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

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

Опубликовано:

Всем привет!

 

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

 

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

 

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

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

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

 

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

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

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

Опубликовано:

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

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

  • 2 недели спустя...
Опубликовано:

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

 

найти

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.

  • 1 год спустя...
Опубликовано:

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

  • 3 месяца спустя...
Опубликовано:

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

  • 1 месяц спустя...
Опубликовано:

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

 

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

 

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

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

Опубликовано:

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

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

  • 1 месяц спустя...
Опубликовано:
Тоже интересует этот вопрос

По идее нужно задать свойство 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; 
}

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

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

Опубликовано:

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

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

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

Сейчас на странице 0

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

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.