Главная » Файлы » Статьи для вебмастера » Статьи для вебмастера
Свой контент в uLightbox uCoz + стилизация by Apocalypse для uCoz
24.06.14, 16:24:10



Буквально сегодня решил всё-таки научиться использовать лайтбокс uCoz по полной, а не только выводить в нём картинки да фреймы с видео. Данное решение будет полезно многим разработчикам

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

1) Для того, чтобы открыть лайтбокс со своим контентом, достаточно просто создать блок с нужным вам id и ниже поместить специальную ссылку с указателем на id блока:
Код
<div id="id1" style="display:none;">Любой ваш контент</div>  
  <a href="#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; /* Цвет оверлея */  
  }


Источник: Мануалы uCoz

Материал подготовлен Apocalypse
Категория: Статьи для вебмастера | Добавил: Apocalypse | Теги: Apocalypse, Стилизация, ucoz, by, uLightbox, свой, контент, для
Просмотров: 984 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: