Контент в 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; /* Цвет оверлея */
}
|
Нравится
|
