Главная » Настройка дизайна в системе uCoz » Изменение дизайна через шаблоны » Изменение внешнего вида вывода фотографий (лайтбокс)

Изменение внешнего вида вывода фотографий (лайтбокс)

14.06.2012 в 16:31
Автор: hell

Лайтбокс (LightBox) — это скрипт наложения изображений на текущую страницу в оформленном Ajax окне без перезагрузки страницы. Стандартный LightBox в системе uCoz выглядит так:



Вы можете изменить стандартный вид лайтбокса uCoz, следуя инструкции ниже, если вы обладаете достаточными знаниями в JavaScript и CSS. Если же вы не уверены в своих силах, то мы настоятельно не рекомендуем этого делать и советуем использовать стандартные настройки системы как самые оптимальные.

Для того, чтобы изменить стандартные параметры лайтбокса uCoz, необходимо добавить в конец всех страниц сайта следующий код:

Панели управления → Управление дизайном → Глобальные блоки → Нижняя часть сайта


<script type="text/javascript">
$(document).ready(function(){
$('.ulightbox').fancybox({padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons : {}}});
});

function _bldCont1(id, indx) {
idarray = 'allEntImgs' + id;
imgar = [];
for (var i=0;i<eval(idarray).length;i++) {
imgar[i] = eval(idarray)[i][0];
}
$.fancybox(imgar,{index: indx, padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons: {}}});
}
</script>



Вы можете изменить следующие стандартные параметры:

padding - ширина белой рамки вокруг картинки;
preload - количество картинок, которые загружаются предварительно;
closeEffect - эффект закрытия (elastic - растягивание, fade - проявление, none - без эффекта);
nextEffect, prevEffect - эффект перехода вперед/назад (elastic - растягивание, fade - проявление, none - без эффекта);
opacity - непрозрачность затемнения (0 - полностью прозрачный, 1 - непрозрачный);
speedIn, speedOut - время проявления/исчезания затемнения в миллисекундах.

Чтобы изменить фон затемнения, необходимо добавить в файл стилей CSS следующую строку:

Панели управления → Управление дизайном → Таблица стилей CSS


#fancybox-overlay {background: #ff0000 !important;}

#ff0000 - цвет фона. Можно заменить на изображение параметром url(/fon.jpg).

Более подробную информацию по настройки лайтбокса можно получить по этой ссылке.

Рейтинг: 20  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 11684          Комментариев: 24
07.12.2015 в 09:53      0  

Как сделать, чтобы в окне fancybox js скрипт загружался?
сделал 

onComplete: function(){
скрипт
}

но не работает.
09.06.2015 в 11:11      0  

Как изменить цвет фона изображения? Если это возможно.
09.06.2015 в 11:23      0  

О каком фоне идёт речь? Который за фото? Белый?
09.06.2015 в 21:23      0  

Да. Тот что за фото.
10.06.2015 в 09:51      +1  

Панель управления - Дизайн - Управление дизайном (CSS): добавить код

.fancybox-outer {
background: red !important;
}
10.06.2015 в 22:20      0  

Спасибо. Все получилось. Вместо цвета добавил картинку старой бумаги. Выглядит неплохо.
13.01.2015 в 10:09      0  

Добрый день! У меня не получилось (((( может инструкция не полная.... дополнительных манипуляций не надо??? только это - "Для того, чтобы изменить стандартные параметры лайтбокса uCoz, необходимо добавить в конец всех страниц сайта следующий код: ....Панели управления → Управление дизайном → Глобальные блоки → Нижняя часть сайта"
Помогите пожалуйста, может не в ту строчку вставляю код скрипта.... Я в шаблоне низа в самый низ код вставлял.... Куда именно нужно??????
23.11.2014 в 11:16      0  

Здравствуйте! На сайте poedempogliadim.ucoz.ru я изменил стандартные ucoz-овские настройки лайтбокса в фотоальбомах в соответствии с Вашими рекомендациями с цельювывода под фотографией ее описания. По этой причине у меня пропала возможность
перехода из лайтбокса на страницу фотографии с комментариями. Подскажите, как
мне добавить в лайтбокс кнопку для такого перехода, сохранив при этом вывод в
лайтбоксе описание фотографий.
28.07.2014 в 10:46      0  

Здравствуйте. Подскажите padding - (ширина белой рамки вокруг картинки) как сделать эту белую рамку скажем черного цвета. и если возможно добавить прозрачность.
27.06.2013 в 11:16      0  

Господа, помогите. Это код упорно не хочет работать. По крайней мере не появляются кнопки перехода - вперед/назад. Собственно говоря как я заметил их нет и в стандартном LightBox на ucoz. Поэтому и решил воспользоваться этим кодом.
28.06.2013 в 12:50      0  

Здравствуйте, рекомендуется рассмотреть варианты кода непосредственно на официальном сайте: http://fancyapps.com/fancybox/#examples
Также представлен вариант с переключателями между изображениями.
16.12.2012 в 23:27      0  

А можно как ни то без использования скрипта

1. Убрать обводку
2. Затемнить фон темнее
3. Убрать кнопку закрыть
30.11.2012 в 00:45      0  

Как придать закругленность краям fancybox без изменения стандартный настроек и без использования указанного скрипта. Фон можно поменять с помощью сss как вы написали: #fancybox-overlay {background: #ff0000 !important;} , а как придать закругленность и border в том же css? Спасибо)
15.11.2012 в 23:54      0  

не подскажите как сделать так чтобы наведя курсором мышки н аватар выводилось информация и так далее? например логин и ссылка на отправку сообщения, и отправлять сообщение в лайтбоксе
29.07.2012 в 16:59      0  

Хочу вставить стандартную форму обратной связи в стандартный Лайтбокс (LightBox)Ucoz как это сделать? Спасибо!
29.07.2012 в 17:41      +2  

Пример:
Code
<a class="ulightbox" href="#addvideo">Как добавить видео</a>
<div style="display:none" id="addvideo">
<!-- HTML - код -->
Сюда свою форму
<!-- конец HTML - кода -->
</div>

стилевой идентификатор id="имя" - задаешь сам
29.07.2012 в 17:49      0  

Спасибо большое! А как ширину именно этого окна задать не подскажешь? smile
29.07.2012 в 20:15      +1  

Оберни DIVом
Code
<div style="width: 450px">Здесь форма</div>

Понимаешь между <!-- HTML - код --><!-- конец HTML - кода -->
Можно целую станицу сверстать biggrin
29.07.2012 в 20:52      0  

Спасибо, помогло, а то уже 2-ю неделю никак не получалось! biggrin
06.08.2012 в 18:12      0  

в лайт бокс не следует такое вставлять ))) вставьте на крайний случай в аякс окно
1 2 »