Галлерея Fancybox v1.3.4

Fancybox это плагин к jQuery с возможностью отображения любого html содержимого, как графики и фотографий, так и непосредственно html разметки с флеш объектами и видео роликами. Отображать можно и целые сайты в Iframes а так же аякс запросы.

Галлерея Fancybox v1.3.4

В демо показаны 12-ть примеров отображения изображений. Первые четыре демонстрируют возможную анимацию. Второй ряд показывает варианты подписей к картинкам и последние четыре примера это галерея из 4-х фотографий и подписей к ним. Для навигации по галереи можно использовать не только стрелочки слева и справа, но и колесико мышки, что очень удобно.

Структура html кода для картинок примерно одинаковая

<p>
Анимация<br>
<a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>
<a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>
<a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>
<a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
</p>

<p>
Примеры подписей к картинкам<br>
<a id="example5" href="./example/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img alt="example4" src="./example/5_s.jpg" /></a>
<a id="example6" href="./example/6_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="example5" src="./example/6_s.jpg" /></a>
<a id="example7" href="./example/7_b.jpg" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis."><img alt="example6" src="./example/7_s.jpg" /></a>
<a id="example8" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur."><img class="last" alt="example7" src="./example/8_s.jpg" /></a>
</p>

<p>
Галерея фотографий (попробуйте использовать мышку)<br>
<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
<a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
<a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
<a rel="example_group" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
</p>

Вся разница между применением эффектов это в передаче разного id или rel для контента.

id и rel ссылки это как класс в html со своими параметрами только в данном случае настраиваются они в javascript, какие эффекты и какие параметры будут у той или иной картинки или объекта.

Пишутся они в таком формате

$(document).ready(function() {	
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});

Параметров много, что конечно хорошо

Параметр Значение по умолчанию Описание
padding 10 Отступ между содержимым и Fancybox
margin 20 Отступ между Fancybox и другим контентом
opacity false Включение и отключение прозрачности при переходах
modal false When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false'
cyclic false Когда выбрано значение true, галерея станет циклической, переходы "вперед назад" будут бесконечными
scrolling 'auto' Возможность скрытия или отображения полосы прокрутки, CSS свойство overflow
width 560 Ширина для типа контента "IFRAME" или "SWF" так же применяется для параметра 'autoDimensions' если у последнего стоит значение 'false'
height 340 Высота для типа контента "IFRAME" или "SWF" так же применяется для параметра 'autoDimensions' если у последнего стоит значение 'false'
autoScale true Если значение true, то FancyBox масштабируется в окне
autoDimensions true For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results
centerOnScroll false Если значение true, FancyBox будет по середине при прокрутке страницы
ajax { } Ajax опции
Сообщения 'error' and 'success' будут заменены FancyBox
swf {wmode: 'transparent'} Параметр для SWF-объекта
hideOnOverlayClick true Выделите, чтобы при клике по слою «Overlay» закрывался FancyBox
hideOnContentClick false Выделите, если хотите, чтобы при клике по контенту закрывался FancyBox
overlayShow true Включить/выключить слой «Overlay»
overlayOpacity 0.3 Прозрачность слоя (от 0 до 1; по умолчанию - 0.3)
overlayColor '#555' Цвет слоя «Overlay»
titleShow true Показывать ли «title»
titlePosition 'outside' Позиция title «За» «внутри» или «над» ('outside' 'inside' 'over')
titleFormat null Можно использовать html для темизации
transitionIn, transitionOut 'fade' Можно задать эффект между переходами или отключить 'elastic', 'fade' или 'none'
speedIn, speedOut 300 Скорость эффектов перехода в миллисекундах
changeSpeed 300 Скорость эффекта
changeFade 'fast' Скорость исчезновения содержания при изменении пунктов галереи
easingIn, easingOut 'swing' Использование для 'elastic' анимации
showCloseButton true Показывать кнопку закрытия
showNavArrows true Показывать стрелочки для навигации
enableEscapeButton true Используйте, чтобы по кнопке «ESC» закрывался FancyBox
onStart null Будет вызван первым до загрузки содержимого
onCancel null Будет вызван после отмены загрузки
onComplete null Будет вызван после показа контента
onCleanup null Будет вызван перед закрытием
onClosed null Будет вызван после закрытия FancyBox


Другие возможности
Открытие области контента при клике по ссылке (смотрите в демо)

<ul>
<li><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></li>
</ul>
<div style="display: none;">
<div id="inline1" style="width:400px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...
</div>
</div>

Использование аякса

<ul>
<li><a id="various2" href="ajax.txt">Ajax</a></li>
</ul>

Использование фреймов

<ul>
<li><a id="various3" href="http://google.ru">Iframe</a></li>
</ul>

Открытие флеш объектов и видео роликов

<ul>
<li><a id="various4" href="perform.swf">Swf</a></li>
</ul>