Заработок в интернете и раскрутка вашего сайта Четверг, 21.09.2017, 06:24

Меню сайта
Категории раздела
Для Веб мастера [17]
Все для Веб мастера
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Яндекс.Метрика Яндекс цитирования
Главная » Статьи » Для Веб мастера » Для Веб мастера

Контент в uLightbox uCoz + стили CSS для uCoz
Контент в uLightbox uCoz + стили CSS для uCoz

Совершенно случайно пришла в голову идея все-таки научиться правильно пользоваться полезной штукой LightBox от Ucoz. А не только выводить в нем для просмотра картинки или фреймы видео. Многим разработчикам эта программка будет так же полезна, потому что откроет новые горизонты работы и для кого-то может стать откровенным счастьем, как пленочный витраж, недавно поразивший интересующихся лиц.

Так как можно делать очень даже стильные вещи для ваших сайтов. Я вот уже поделился навыками с коллегами, с кем-то посоветовался, кому-то помог. То же самое делайте и вы - в комментариях кладите вопросы и предложения. Используя данный метод, ну не буден называть его инновационным, но все же, вы ссожете открывать в лайтбоксе любой свой собственный контент, управлять анимацией появления - исчезания , а так же полностью взять под свой контроль стили оверлея - т.е затемнения фона. Особенно работать с оверлеем полезно - можно регулировать степень затемнения и цвет.

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

<divid="id1"style="display:none;">Любой ваш контент</div>
<ahref="#id1"class="ulightbox">Открыть лайтбокс с содержимым блока id1</a>

2) Это функция управления анимацией и оверлеем. После /head на нужных страницах вставляйте:

<script>
// ApoTeam (c) 2013
$('.ulightbox').fancybox({
padding:3,// Ширина белой рамки вокруг картинки
preload:3,// Количество картинок, которые загружаются предварительно
openEffect:'fade',// Эффект появления (elastic - растягивание, fade - проявление, none - без эффекта)
closeEffect:'fade',// Эффект исчезания (elastic - растягивание, fade - проявление, none - без эффекта)
nextEffect:'fade',// Эффект перехода вперёд (elastic - растягивание, fade - проявление, none - без эффекта)
prevEffect:'fade',// Эффект перехода назад (elastic - растягивание, fade - проявление, none - без эффекта)
openEasing:'linear',// Тип анимации появления
nextEasing:'linear',// Тип анимации при переходе вперёд
prevEasing:'linear',// Тип анимации при переходе назад
fixed: fixedFlag,
helpers:{
title:null,// Заголовок по умолчанию
overlay:{
opacity:0.7,// Непрозрачность оверлея
speedIn:0,// Скорость появления оверлея
speedOut:0// Скорость угасания оверлея
},
buttons:{}
}
});
// apo-ucoz.com (c) 2013
</script>

3) Немного поработаем со стилем. В самый низ вашего css:

#fancybox-buttons {
display:none;/* Скрываем глупую верхнюю кнопку масштабирования */
}

#fancybox-overlay {
background:#ff0000 !important; /* Цвет оверлея */
}


Нравится
Категория: Для Веб мастера | Добавил: admin (25.12.2013)
Просмотров: 132 | Рейтинг: 0.0/0


Нравится







Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Наш баннер
Мы будем признательны,
если Вы разместите нашу кнопку
у себя на сайте!

Заработок в интернете и раскрутка вашего сайта


Языки
Заработок в интернете и продвижение вашего сайта © 2013-2017
Копирование материалов сайта без согласия запрещено!

Яндекс.Метрика

СЕГОДНЯ НАС ПОСЕТИЛИ:

200