Главная » 2013 » Февраль » 23 » Свой котент в uLightbox (Скрипты для ucoz)
23.02.2013, 00:35

Свой котент в uLightbox





Благодаря данной статье вы научитесь открывать лайтбокс с любым своим контентом + управлять анимацией появления и исчезания + манипулировать стилем оверлея (Затемнением фона)

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

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


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

Код
<script>  
$('.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: {}
  }
});
</script>


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

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

#fancybox-overlay {
background: #ff0000 !important; /* Цвет оверлея */
}
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://manual.ucoz.net/
Категория: Скрипты uCoz | Просмотров: 1208 | Добавил: sold93 | Рейтинг: 3.0/1 |
Теги: свой, котент, uLightbox
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]