Пример вывода видео
Как разместить или редактировать:
Для вызова окна используйте данную ссылку.
<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>
Пример вывода фотографий
<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>
Вы можете изменить следующие стандартные параметры:$(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 - время проявления/исчезания затемнения в миллисекундах.