jQuery. Fancybox

Tuesday, 15 June 2010 | Автор: programmer

Как уже говорил в предыдущей статье буду потихоньку выкладывать jQuery-скрипты.

Сегодня расскажу о скрипте Fancybox, который я использовал для создания фотогалереи (описание создания фотолагереи). В саму реализацию данного скрипта сейчас не будем лезть, позже я подговлю статью про основы jQuery.

Итак, для данной статьи я подготовил примеры использования Fancybox в своих скриптах.

Для использования 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)

Скачать скрипт: http://phpprogs.ru/uploads/fancybox20100615.zip

Есть вопросы? Задавай!


 
Tweet


Категория(и): Скрипты, jQuery

Комментарии


Sunday, 01 May 2011 | 11:24:50 | Автор: niko

Как мне позиционировать это онко? Оно всегда в центре экрана.

Добавить комментарий
Чтобы оставить комментарий, Вам необходимо зарегистрироваться или авторизироваться