Продвижение

Продающий сайт

партнерские программы

Страницы, содержащие Fancybox

FancyBox - это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируйете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.
Для использования Fancybox Вам необходимо в своих скриптах подключить 2 JS-файла: сам фреймворк jQuery и скрипт Fancybox. Для этого между тегами и добавьте 2 строчки:
    <script type="text/javascript" src="data/jquery.js"></script>
    <script type="text/javascript" src="data/jquery.fancybox.pack.js"></script>
также необходимо добавить файл со стилями Fancybox:
<link rel="stylesheet" type="text/css" href="data/style.css" media="screen" />
Дальше добавляем HTML-код галереи, а может быть что-то и другое, например, какие-то подсказки. Fancybox предлагает 3 варианта вывода: полученного через Ajax.
1. вывод изображения (тут будет пул из 3-х изображений)
    <div class="pic"><a href="/test/jquery/fancybox/images/1b.jpg" rel="gallery"><img src="/test/jquery/fancybox/images/1.jpg"></a></div>
    <div class="pic"><a href="/test/jquery/fancybox/images/2b.jpg" rel="gallery"><img src="/test/jquery/fancybox/images/2.jpg"></a></div>
    <div class="pic"><a href="/test/jquery/fancybox/images/3b.jpg" rel="gallery"><img src="/test/jquery/fancybox/images/3.jpg"></a></div>
2. вывод текста
<a id="inline" href="#data">Вывод контекта из элемента с ID="data"</a>
<div style="display:none"><div id="data">Скрытый текст</div></div>
3. вывод содержимого файла (URLa)
<a href="http://phpprogs.ru/test/jquery/fancybox/frame.html" id="frame">Выводит сожержимого URLa</a>
Вот таким образом делается тот или иной вывод контента. Но это не все, теперь переходим к самому главному, а именно "скармливанию" скрипту Fancybox данных о элементах страницы, к которым будет применим Fancybox. Для этого необходимо добавить на страницу JS-код:
    <script type="text/javascript">
        $(document).ready(function() {
            $("a[rel=gallery]").fancybox();
            $("#inline").fancybox();
            $("#frame").fancybox();
        });
    </script>
Синтаксис достаточно простой:
$("элемент").fancybox(параметры);
Хочу заострить внимание на параметрах, передающихся Fancybox:
padding - отступ между контетом и краем окна Fancybox (по умолчанию 10)
margin - отступ между краем окна Fancybox и краем окна браузера (по умолчанию 20)
opacity - прозрачность фона (по умолчанию false). Не понятный параметр, не получилось его применить :(
modal - вывод как модальное окно (по умолчанию false). 
cyclic - циклирование галереи (по умолчанию false). Т.е. если дошло до последнего, то переходит на первый элемент
scrolling - отвечает за показ полосы прокрутки (по умолчанию 'auto'). Может принимать значение 'auto', 'yes', 'no'
width - ширина окна для вывода во фрейме (по умолчанию 560)
height - высота окна для вывода во фрейме (по умолчанию 340)
autoScale - вывод пропорционально уменьшенной копии фотографии (по умолчанию true), подогнанной под размер окна браузера
centerOnScroll - центрирование окна вывода независимо от положения скролла (по умолчанию false)
swf - Flashvars для FLASH-роликов (по умолчанию {wmode: 'transparent'})
hideOnOverlayClick - закрытие окна, если был клик вне окна (по умолчанию true)
hideOnContentClick - закрытие окна, если был клик по окну (по умолчанию false)
overlayShow - затемнение общего фона страницы (по умолчанию true)
overlayOpacity - степень прозрачности затемненного общего фона страницы (по умолчанию 0.3). Значение от 0 (прозрачен) до 1 (не прозрачен)
overlayColor - цвет затемненного общего фона страницы (по умолчанию '#666')
titleShow - вывод описания, если оно задано (по умолчанию true)
titlePosition - позиция вывода описания (по умолчанию 'outside'). Может принимать значения 'outside' (под окном вывода), 'inside' (снизу в окне под фотографией) или 'over' (снизу в окне на фотографии)
transitionIn, transitionOut - анимация перехода состояния (по умолчанию 'fade'). Может принимать значения 'elastic' (окно появляется из точки), 'fade' (через прозрачность) или 'none' (нет).
speedIn, speedOut - скорость открытия/закрытия окна в милиисекундах (по умолчанию 300)
changeSpeed - скорость перехода от одного элемента галереи к другому в милиисекундах (по умолчанию 300)
changeFade - скорость изменения прозрачности при переходе от одного элемента галереи к другому (по умолчанию 'fast'). Может принимать значения 'fast' и 'slow'
showCloseButton - флаг показа кнопки закрытия окна (по умолчанию true)
showNavArrows - флаг показа кнопок навигации (по умолчанию true)
enableEscapeButton - флаг нажатия Escape для закрытия окна (по умолчанию true)

Подписка

RSS-материал


Яндекс.Метрика