Лайтбокс (Lightbox) с надписью для uCoz
Тут описано создание красивого окошка Лайтбокс (Lightbox) с нужной Вам надписью для сайтов с бесплатным хостингом uCoz. Для создания такого окна у Вас должны быть хотя бы минимальные знания системы uCoz и кода написания сайтов HTML!
Итак про установку читайте чуть ниже!
HTML код блока!
Код
<div id="id1" style="display:none;">Любой ваш контент</div>
<a href="#id1" class="ulightbox">Открыть лайтбокс с содержимым блока id1</a>
Это идёт в
Код
<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>
CSS стили
Код
#fancybox-buttons {
display:none; /* Скрываем глупую верхнюю кнопку масштабирования */
}
#fancybox-overlay {
background: #ff0000 !important; /* Цвет оверлея */
}
charset="utf-8">
data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">
Нравится
