19:06 Свой котент в uLightbox | |||
Свой котент в 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; /* Цвет оверлея */ }
| |||
|
| |||
| Всего комментариев: 0 | |