Главная » Шпаргалка » PHP MYSQL javascript » jQuery » fancybox - модальные окна

fancybox - модальные окна pop up окна

инфа из http://fancybox.net

примеры

пример использования в ваншоп

АПИ (перевод от гугла не редактировался , думаю даже кто изучал немецкий разберется :) )

Вы можете передать параметры, как ключ / значение объекта fancybox () или изменить их в нижней части JS файл FancyBox

Key Ключевые Default value По умолчанию значение Description Описание
padding обивка 10 10 Space between FancyBox wrapper and content Пространство между FancyBox обертки и содержание
margin маржа 20 20 Space between viewport and FancyBox wrapper Пространство между просмотра и FancyBox обертки
opacity непрозрачность false ложных When true, transparency of content is changed for elastic transitions Если правда, прозрачность которой изменяется содержание для упругих переходов
modal модальный false ложных When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false' Если правда, "overlayShow 'установлен на' истинный 'и' hideOnOverlayClick ',' hideOnContentClick ',' enableEscapeButton ',' showCloseButton" настроены на "ложные"
cyclic циклический false ложных When true, galleries will be cyclic, allowing you to keep pressing next/back. Если правда, галереи будет циклической, что позволяет продолжать нажимать следующей / назад.
scrolling скроллинг 'auto' "Авто" Set the overflow CSS property to create or hide scrollbars. Установить переполнения CSS свойство для создания или скрыть полосы прокрутки. Can be set to 'auto', 'yes', or 'no' Может быть установлено "Авто", "да", или "нет"
width ширина 560 560 Width for content types 'iframe' and 'swf'. Ширина для типов содержимого "IFRAME" и "SWF. Also set for inline content if 'autoDimensions' is set to 'false' Также установите для встроенного содержания, если "autoDimensions" установлен на "ложные"
height высота 340 340 Height for content types 'iframe' and 'swf'. Высота для типов содержимого "IFRAME" и "SWF. Also set for inline content if 'autoDimensions' is set to 'false' Также установите для встроенного содержания, если "autoDimensions" установлен на "ложные"
autoScale AutoScale true правда If true, FancyBox is scaled to fit in viewport Если это правда, FancyBox масштабируется в окне проекции
autoDimensions autoDimensions true правда For inline and ajax views, resizes the view to the element recieves. Для встроенных и Ajax просмотров, изменяет размеры целью элемент получает. Make sure it has dimensions otherwise this will give unexpected results Убедитесь, что он имеет размеры в противном случае это даст неожиданные результаты
centerOnScroll centerOnScroll false ложных When true, FancyBox is centered while scrolling page Если правда, FancyBox сосредоточена при прокрутке страницы
ajax Ajax { } {} Ajax options Ajax варианты
Note: 'error' and 'success' will be overwritten by FancyBox Примечание: "ошибка" и "успеха" будет заменена FancyBox
swf SWF {wmode: 'transparent'} {Wmode: "прозрачными"} Params to put on the swf object Params поставить на SWF-объекта
hideOnOverlayClick hideOnOverlayClick true правда Toggle if clicking the overlay should close FancyBox Переключить Если при нажатии наложения должен закрыть FancyBox
hideOnContentClick hideOnContentClick false ложных Toggle if clicking the content should close FancyBox Переключить Если при нажатии содержания должны закрыть FancyBox
overlayShow overlayShow true правда Toggle overlay Переключить наложения
overlayOpacity overlayOpacity 0.3 0.3 Opacity of the overlay (from 0 to 1; default - 0.3) Непрозрачность наложения (от 0 до 1, по умолчанию - 0,3)
overlayColor overlayColor '#666' '# 666' Color of the overlay Цвет наложения
titleShow titleShow true правда Toggle title Переключить название
titlePosition titlePosition 'outside' "Снаружи" The position of title. Положение титул. Can be set to 'outside', 'inside' or 'over' Может быть установлен на "вне", "внутри" или "над"
titleFormat titleFormat null нуль Callback to customize title area. Обратный звонок для настройки заголовков. You can set any html - custom image counter or even custom navigation Вы можете задать любой HTML - пользовательское изображение счетчика или даже пользовательские навигации
transitionIn, transitionOut transitionIn, transitionOut 'fade' 'Исчезать' The transition type. Тип перехода. Can be set to 'elastic', 'fade' or 'none' Может быть установлен в 'упругой', 'исчезать' или 'Нет'
speedIn, speedOut Speedin, speedOut 300 300 Speed of the fade and elastic transitions, in milliseconds Скорость увядает и упругих переходов, в миллисекундах
changeSpeed changeSpeed 300 300 Speed of resizing when changing gallery items, in milliseconds Скорость изменения размеров при изменении галерея пунктов, в миллисекундах
changeFade changeFade 'fast' "Быстрым" Speed of the content fading while changing gallery items Скорость содержание выцветанию при изменении галерея пунктов
easingIn, easingOut easingIn, easingOut 'swing' "Качели" Easing used for elastic animations Ослабление использоваться для упругих анимации
showCloseButton showCloseButton true правда Toggle close button Переключить кнопку "Закрыть"
showNavArrows showNavArrows true правда Toggle navigation arrows Переключение стрелки навигации
enableEscapeButton enableEscapeButton true правда Toggle if pressing Esc button closes FancyBox Переключить если нажать кнопку Esc закрывает FancyBox
onStart OnStart null нуль Will be called right before attempting to load the content Будем называть право, прежде чем загружать содержимое
onCancel OnCancel null нуль Will be called after loading is canceled Будем называть после загрузки отменяется
onComplete OnComplete null нуль Will be called once the content is displayed Будем называть раз содержимое отображается
onCleanup onCleanup null нуль Will be called just before closing Будем называть просто перед закрытием
onClosed OnClosed null нуль Will be called once FancyBox is closed Будем называть раз FancyBox закрыт

Advanced options Дополнительные

Key Ключевые Description Описание
type типа Forces content type. Силы типа содержимого. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline' Может быть установлено, "IFRAME", "Аякс" на "изображение", "SWF" или "встроенный"
href HREF Forces content source Силы источник контента
title название Forces title Силы название
content Содержание Forces content (can be any html data) Силы содержания (может быть любой HTML-данных)
orig оригинальные Sets object whos position and dimensions will be used by 'elastic' transition Устанавливает объект чей положения и размеров будут использоваться "упругой" переход
index индекс Custom start index of manually created gallery (since 1.3.1) Пользовательские начать индекс создан вручную галерея (с 1.3.1)

 

Public Methods Открытые

FancyBox provides some function to work with it FancyBox предоставляет некоторые функции для работы с ним

Method Метод Description Описание
$.fancybox.showActivity $. Fancybox.showActivity Shows loading animation Показывает загрузки анимации
$.fancybox.hideActivity $. Fancybox.hideActivity Hides loading animation Скрывает загрузки анимации
$.fancybox.next $. Fancybox.next Displays the next gallery item Отображает следующий пункт галерея
$.fancybox.prev $. Fancybox.prev Displays the previous gallery item Отображает предыдущий пункт галерея
$.fancybox.pos $. Fancybox.pos Displays item by index from gallery Отображает пункта по индексу из галереи
$.fancybox.cancel $. Fancybox.cancel Cancels loading content Отмена загрузки содержимого
$.fancybox.close $. Fancybox.close Hides FancyBox Скрывает FancyBox
Within an iframe use - parent.$.fancybox.close(); В IFRAME использования - родитель). $. Fancybox.close (
$.fancybox.resize $. Fancybox.resize Auto-resizes FancyBox height to match height of content Авто-изменяет FancyBox высоте, чтобы соответствовать высоте содержание
$.fancybox.center $. Fancybox.center Centers FancyBox in viewport Центры FancyBox в окне проекции

примеры функций открытия окон

jQuery(document).ready(function() {

/*
* Examples - images
*/

$("a#example1").fancybox({
'titleShow' : false
});

$("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});

$("a#example3").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("a#example4").fancybox();

$("a#example5").fancybox({
'titlePosition' : 'inside'
});

$("a#example6").fancybox({
'titlePosition' : 'over'
});

$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + ' ' + title + '</span>';
}
});

/*
* Examples - various
*/

$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("#various2").fancybox({
'modal' : true
});

$("#various3").fancybox({
ajax : {
type : "POST",
data : 'mydata=test'
}
});

$("#various4").fancybox({
ajax : {
type : "POST"
}
});

$("#various5").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$("#various6").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("#various7").fancybox({
onStart : function() {
return window.confirm('Continue?');
},
onCancel : function() {
alert('Canceled!');
},
onComplete : function() {
alert('Completed!');
},
onCleanup : function() {
return window.confirm('Close?');
},
onClosed : function() {
alert('Closed!');
}
});

$("#various8, #various9").fancybox();

/*
* Examples - manual call
*/

$("#manual1").click(function() {
$.fancybox({
//'orig' : $(this),
'padding' : 0,
'href' : 'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
'title' : 'Lorem ipsum dolor sit amet',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});

$("#manual2").click(function() {
$.fancybox([
'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
{
'href' : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
}
], {
'padding' : 0,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'image',
'changeFade' : 0
});
});

/*
* Tips & Tricks
*/

$("#tip3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'onComplete' : function() {
$("#fancybox-wrap").hover(function() {
$("#fancybox-title").show();
}, function() {
$("#fancybox-title").hide();
});
}
});

$("#tip4").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});

return false;
});

$("#tip5").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() {
$("#login_error").hide();
}
});

$("#login_form").bind("submit", function() {

if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}

$.fancybox.showActivity();

$.ajax({
type : "POST",
cache : false,
url : "/data/login.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});

return false;
});

$("#tip6").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'autoScale' : false,
'type' : 'iframe',
'width' : 500,
'height' : 500,
'scrolling' : 'no'
});

function formatTitle(title, currentArray, currentIndex, currentOpts) {
return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
}

$(".tip7").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});


// Next JS snippets are only for fancybox.net

/*
* Donate link
*/
$("a#donate").bind("click", function() {
$("#donate_form").submit();
return false;
});

/*
* Zebra-stripping table
*/

$("table.options tr:even").addClass('even');

});