Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Mac

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

Recommended Posts

Всем привет!

 

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

 

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

 

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

Edited by Mac

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Найти:

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

найти

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
Тоже интересует этот вопрос

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Найти

 

return[pageWidth,pageHeight];}}

Заменить на

 

return[pageWidth,pageHeight-100];}}

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

 

#overlay { 
height: 100% !important; 
}

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

Edited by Strategius
  • Upvote 1

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...