• Личный кабинет
    Информация
    • Группа: Гости
    • Баланс: $0.00
    Магазин

    Используйте аккаунты из социальных сетей для быстрого входа на сайт:

  • 0 товаров
    Сумма: 0
    Ваша корзина пуста
Меню
Назад Главная » Модальные окна
Модальные окна
В системе uCoz вам доступен один вид модальных окон uLightbox который вы можете использовать для вывода абсолютно любого материала (фото, видео, текста и т.д.).

Пример вывода видео




Как разместить или редактировать:
Для вызова окна используйте данную ссылку.
<a class="ulightbox" title="" href="#id00"><button>Открыть окно</button></a>
Где красным цветом выделена заменяемая часть (это может быть текст, кнопка или картинка), а зеленым - id вызываемого элемента (id задается вами вручную. Это могут быть цифры или латинские буквы).

Ссылку вы можете вставить в визуальном редакторе нажав на клавишу "Источник".
После вставки ссылки скопируйте код снизу и так же разместите на странице.
<div id="id00" style="display:none;"> Содержимое выводимого блока </div>
Где красным цветом выделено содержимое блока.
В моем случае это HTML-код с видео: <iframe width="560" height="315" src="//www.youtube.com/embed/blO3Yb8nZ18" frameborder="0" allowfullscreen></iframe>



Пример вывода фотографий


Для увеличения фотографий используйте тот же способ вывода материалов при помощи uLightbox.
<a href="Ссылка на полное изображение" data-fancybox-group="group" class="ulightbox" target="_blank" title="Нажмите, для просмотра в полном размере..."><img src="Ссылка на уменьшенное изображение" border="0" alt="" /></a>
В том случае, если у вас более одного изображения и вы хотите соединить несколько изображений в группу, добавьте данный код внутри ссылки: data-fancybox-group="group" (выделен зеленым цветом).



Изменение внешнего вида


Для внесения изменений в работу и внешний вид модальных окон разместите этот скрипт в подвале сайта.

Главная » Управление дизайном » Нижняя часть сайта
<script type="text/javascript">
$(document).ready(function(){
$('.ulightbox').fancybox({padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons : {}}});
});

function _bldCont1(id, indx) {
idarray = 'allEntImgs' + id;
imgar = [];
for (var i=0;i<eval(idarray).length;i++) {
imgar[i] = eval(idarray)[i][0];
}
$.fancybox(imgar,{index: indx, padding: 3, preload: 5, openEffect: openEf, closeEffect: 'elastic', nextEffect: 'fade', prevEffect: 'fade', openEasing: 'linear', nextEasing: 'linear', prevEasing: 'linear', fixed: fixedFlag, helpers: {title: null, overlay : {opacity: 0.1, speedIn: 0, speedOut: 0}, buttons: {}}});
}
</script>
Вы можете изменить следующие стандартные параметры:
padding - ширина белой рамки вокруг картинки;
preload - количество картинок, которые загружаются предварительно;
closeEffect - эффект закрытия (elastic - растягивание, fade - проявление, none - без эффекта);
nextEffect, prevEffect - эффект перехода вперед/назад (elastic - растягивание, fade - проявление, none - без эффекта);
opacity - непрозрачность затемнения (0 - полностью прозрачный, 1 - непрозрачный);
speedIn, speedOut - время проявления/исчезания затемнения в миллисекундах.