Главная » Настройка дизайна в системе 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  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 16055          Комментариев: