Обзор плагина easy fancybox для wordpress

Возможности Easy Fancybox в WordPress

• кроме базовой графики доступны форматы Webp и SVG;
• во всплывающем окне разрешается отображать видео с Vimeo, Youtube, Dailmotion;
• поддерживает PDF и Flash файлы;
• может работать с обычным HTML кодом и содержимым внешних страниц;
• совместим с базовой галереей Вордпресс, а также NextGEN;
• у вас не возникнет проблем с Imagemap’ами, бесконечным скроллом Jetpack и при задании лайтбокса пунктам меню;
• про автоматическую обработку картинок уже упоминалось выше;
• из доп.фишек есть автосрабатывание попапа при загрузке страниц веб-ресурса;
• допускается использование как модальное окно для Contact Form 7 — альтернативу Easy Modal (инструкция в описании в репозитории);
• в настройках можно выбрать эффекты открытия, цвет и прозрачной оверлея и некоторые другие визуальные параметры.

Для плагина Fancybox имеется премиальная версия за 12 баксов + последующей подпиской по 4 бакса в год. Из про фишек выделяются: дополнительные опции оформления и автосрабатывания попапа, эффекты слайдшоу, показ заголовка при наведении и т.п. Если вам хочется расширить базовые функции, почитайте об этом детальнее. Мне лично бесплатной версии хватает с головой.

Также на официальной странице модуля есть парочка вариантов почему не работает Fancybox в WordPress, это могут быть:

• конфликты с аналогичными похожими решениями;
• отсутствие wp_footer() в футере;
• некоторые проблемы с плагинами: All in One SEO Pack, jQuery Updater, а также Google Analytics на WordPress и парочка других;
• конфликты с шаблонами — часто в премиальных есть свой скрипт для подобного эффекта (ниже рассмотрю эту ситуацию);

Кроме того, в репозитории на wordpress.org есть чеклист как проверить потенциальные ошибки и какие шаги нужно совершить дабы их исправить. Это одно из немногих расширений, где так много времени уделено возможным проблемам и причинам некорректного функционирования. Если у вас что-то подобное случилось, советую ознакомиться.

How to use

To get started, download the plugin, unzip it and copy files to your website/application directory.
Load files in the section of your HTML document. Make sure you also add the jQuery library.

Create your links with a if you want a title to be shown, and add a class:

If you have a set of related items that you would like to group,
additionally include a group name in the (or ) attribute:

Initialise the script like this:

May also be passed an optional options object which will extend the default values. Example:

Tip: Automatically group and apply fancyBox to all images:

Script uses the attribute of the matched elements to obtain the location of the content and to figure out content type you want to display.
You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or attribute:

Note, ajax requests are subject to the same origin policy.
If fancyBox will not be able to get content type, it will try to guess based on ‘href’ and will quit silently if would not succeed.
(this is different from previsous versions where ‘ajax’ was used as default type or an error message was displayed).

Подключение Fancybox к странице сайта

Скачайте архив с плагином, распакуйте его, скопируйте все файлы, включая сценарии js и файлы стилей css в папку на вашем сервер.

 Можете сразу же для порядка разместить файлы в зависимости от типа по соответствующим папкам (файлы css в папку styles, файлы js в папку javascripts), но помните что если вы это сделаете, то вам нужно будет убедиться, что пути в CSS файлах к скриптам и пути в файлах JS к фалам стилей соответствуют новому их расположению на вашем сервере. Так же не забудьте подключить к странице последнюю версию библиотеки JQuery (на момент написания поста это версия 2.1.1)

Пример:

<!— Подключаем jQuery библиотеку —>
<script type=»text/javascript» src=»http://code.jquery.com/jquery-latest.min.js»></script>

<!— Подключаем mousewheel плагин (по необходимости, в основном нужен для мобильных устройств) —>
<script type=»text/javascript» src=»/fancybox/lib/jquery.mousewheel-3.0.6.pack.js»></script>

<!— Подключаем непосредственно FancyBox —>
<link rel=»stylesheet» href=»/fancybox/source/jquery.fancybox.css?v=2.1.5″ type=»text/css» media=»screen» />
<script type=»text/javascript» src=»/fancybox/source/jquery.fancybox.pack.js?v=2.1.5″></script>

<!— По необходимости подключаем вспомогательные элементы — стили кнопок, оформление эскизов и/или медиа файлов —>
<link rel=»stylesheet» href=»/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5″ type=»text/css» media=»screen» />
<script type=»text/javascript» src=»/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5″></script>
<script type=»text/javascript» src=»/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6″></script>

<link rel=»stylesheet» href=»/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7″ type=»text/css» media=»screen» />
<script type=»text/javascript» src=»/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7″></script>

далее создаем ссылки, которые будут вести на элементы, которые мы собираемся открыть с помощью Fancybox (за каламбур прошу простить  )

<a class=»fancybox» rel=»group» href=»big_image_1.jpg»><img src=»small_image_1.jpg» alt=»» /></a>
<a class=»fancybox» rel=»group» href=»big_image_2.jpg»><img src=»small_image_2.jpg» alt=»» /></a>

Вызывать Fancybox следует только после загрузки страницы как показано ниже. Если вы не знакомы с JQuery, то вам нужно получить хотя бы минимальные знания. Соответствующие курсы можно спокойно найти в интернете.

<script type=»text/javascript»>
$(document).ready(function() {
$(«.fancybox»).fancybox();
});
</script>

В следующих постах мы на примерах рассмотрим различные варианты использования Fancybox на страницах вашего сайта.

Друзья,
напишите в комментариях стоит ли мне
записать и выложить видео по подключению
данного скрипта как я это сделал тут:

Advanced

Helpers provide a simple mechanism to extend the capabilities of fancyBox. There are two built-in helpers — ‘overlay’ and ‘title’.
You can disable them, set custom options or enable other helpers. Examples:

Also available are event driven callback methods. The keyword refers to the current or upcoming object (depends on callback method). Here is how you can change title:

It`s possible to open fancyBox programmatically in various ways:

There are several methods that allow you to interact with and manipulate fancyBox, example:

There is a simply way to access wrapping elements using JS:

You can override CSS to customize the look. For example, make navigation arrows always visible,
change width and move them outside of area (use this snippet after including fancybox.css):

In that case, you might want to increase space around box:

Разные варианты работы плагина

Кроме простого увеличения картинки, плагин пожно использовать для мультимедиа:

<a id="inline" href="#data">Это покажет содержание элемента, который имеет id="data"</a>

Для iframe:

<a href="http://www.mpbox.ru?iframe">Это iframe</a>

или

<a class="iframe" href="http://www.mpbox.ru/">Это iframe</a>

ajax:

<a href="http://www.mpbox.ru/data.php">Это контент, который будет подгружаться с помощью ajax</a>

Если нужно сгруппировать несколько элементов в галерею, нужно добавить им одинаковый rel:

<a id="single_image" rel="group" href="image1.jpg"><img src="image1small.jpg" alt=""/></a>
<a id="single_image" rel="group" href="image2.jpg"><img src="image2small.jpg" alt=""/></a>
<a id="single_image" rel="group" href="image3.jpg"><img src="image3small.jpg" alt=""/></a>
<a id="single_image" rel="group" href="image4.jpg"><img src="image4small.jpg" alt=""/></a>

Пример инициализации скрипта для галереи (атрибут title станет подписью картинки):

jQuery("a").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.length ? '   ' + title : '') + '</span>';
				}
});

Показ/скрытие title под наведению мыши

jQuery("a").fancybox({
	'titlePosition'	:	'over',
	'onComplete'	:	function() {
		jQuery("#fancybox-wrap").hover(function() {
			jQuery("#fancybox-title").show();
		}, function() {
			jQuery("#fancybox-title").hide();
		});
	}
});

Кастомизация title

function formatTitle(title, currentArray, currentIndex, currentOpts) {
     return '<div id="tip-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Картинка ' + (currentIndex + 1) + ' из ' + currentArray.length + '</div>';
}

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

#tip-title { 
	text-align: left; 
}
#tip-title b {
	display: block;
	margin-right: 80px;
}
#tip-title span { 
	float: right; 
}

Выборочная инициализация

Применяем скрипт только к тем ссылкам, внутри которых есть рисунок:

jQuery("a:has(img)").fancybox();
jQuery("a,a,a").fancybox();

Другой вариант — применяем к тем ссылкам href которых оканчивается на нужные расширения (jpg, png, gif):

jQuery("a,a,a").fancybox();

Пишем в ворде вертикально в столбик

P.S.

В прошлом моём опыте я в первый раз так плотно столкнуля с библиотекой fancybox 3. До этого я пользовался другими библиотеками. Почему я не писал о них?! Мне всегда казалось, что они не завершённые и с ними приходилось идти на компромисы в случаех с JS или их UI. В fancy же, как мне кажется, есть всё, что нужно и его элементы отлично выглядят, он отлично работает на мобильных. Думаю, что я воспользуюсь им еще не раз и поделюсь своим опытом с вами. Думаю я расскажу про его API и о случаех в которых можно его использовать, а главное как. Всего хорошего

Поддержи Xakplant

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

API и опции к FancyBox 1.3.4

Доступные опции

Влиять на работу плагина fancyBox можно при помощи пользовательских настроек, для этого передайте функции fancybox пользовательскую константу , в которой должны содержаться пользовательские настройки вида .

Публичные функции

5. Тема оформления

Вместо родного стиля fancybox подключаем стиль jquery.fancybox.atuin.css и инициализирум:

$(»).fancybox({
/* Стрелки влево и вправо */
btnTpl: {
arrowLeft:
‘<button data-fancybox-prev class=»fancybox-button fancybox-button—arrow_left» title=»`PREV`»>’ +
‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’ +
«</button>»,
arrowRight:
‘<button data-fancybox-next class=»fancybox-button fancybox-button—arrow_right» title=»`NEXT`»>’ +
‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’ +
«</button>»
},
/* Руссификация */
lang: «ru»,
i18n: {
ru: {
CLOSE: «Закрыть»,
NEXT: «Следующий»,
PREV: «Предыдущий»,
ERROR: «Контент не может быть загружен. <br/> Попробуйте позже.»,
PLAY_START: «Начать слайдшоу»,
PLAY_STOP: «Остановить слайдшоу»,
FULL_SCREEN: «Полный экран»,
THUMBS: «Эскизы»,
DOWNLOAD: «Скачать»,
SHARE: «Поделиться»,
ZOOM: «Увеличить»
}
}
});

Интересные дополнительные хаки

Много интересно найдете в официальном описании плагина Easy Fancybox — прокрутите контент до раздела FAQ. Там есть про вызов PDF, открытие контактной формы, обычного модального окна, Youtube видео и т.п.

Отключаем скрипт на странице

В одном из премиум шаблонов с которым работал, был предусмотрен внутренний механизм лайтбокс, поэтому во избежание конфликтов нужно было чтобы Fancybox грузился только в определенной месте сайта.

Это реализуется через следующий код в файле функций темы (functions.php):

add_action( 'wp_enqueue_scripts', 'my_conditional_fancybox',  );
function my_conditional_fancybox() {
    if ( !is_page_template('page-menu.php') ) {
        if ( class_exists('easyFancyBox') )
            easyFancyBox::$add_scripts = false;
    }
}

Здесь выполняется проверка !is_page_template(‘page-menu.php’) с отдельным шаблоном страниц, но вы можете использовать любые другие условные операторы — is_single, is_home, is_category и т.п. Установка переменной в значение False отключает модуль.

Итого. Плагин Fancybox в Вордпресс я ставлю практически всегда, когда нужно добавить простой лайтбокс на картинки и галерею. Он работает сходу после установки, как правило, не конфликтует с другими скриптами, имеет пару-тройку настроек и регулярно обновляется. Больше, в принципе, от него ничего и не нужно.

Кстати, если юзаете другие решения по данной задаче — напишите, интересно попробовать еще что-то.

Npm specific

** NOTE: I didn’t realize npm’s limitations on versioning. They only allow three numbers. At first I was aiming to keep the versioning equal to fancybox’s, but this is no longer possible without deleting the repo and starting over. You can find the fancybox version this repo uses in either package.json’s «original-version» property, or in a browser console by running: $.fancybox.version.

Install

Example usage

(1) Make sure your html file is referencing the browserified version of your javascript.
(2) This is where fancybox attaches itself to the jquery object.

Please visit the official site for more info. Their official github repository can also be found here.

New structure of asset files (css/img/scss)

When turning this into an npm module I decided to standardize the structure a bit. Before fancybox relied on all asset files residing in the same directory. Now if you were to reference the css directly, it expects the images to be relatively located at the ‘../img’ directory. For those unfamiliar, this structure makes more sense because css files should be all concatenated and minified while images won’t be. This means typically you’ll want your css in a separate folder. However, if this doesn’t work with your existing structure then you’ll have to change the paths manually. If you opt to reference the scss instead of the css file, then you have the option of modifying the sass variable ‘$fancybox-image-url’ to match your image folder path. By default this path will be set to ‘../img’. (Note the lack of a trailing slash)

Npm specific

** NOTE: I didn’t realize npm’s limitations on versioning. They only allow three numbers. At first I was aiming to keep the versioning equal to fancybox’s, but this is no longer possible without deleting the repo and starting over. You can find the fancybox version this repo uses in either package.json’s «original-version» property, or in a browser console by running: $.fancybox.version.

Install

Example usage

(1) Make sure your html file is referencing the browserified version of your javascript.
(2) This is where fancybox attaches itself to the jquery object.

When turning this into an npm module I decided to standardize the structure a bit. Before fancybox relied on all asset files residing in the same directory. Now if you were to reference the css directly, it expects the images to be relatively located at the ‘../img’ directory. For those unfamiliar, this structure makes more sense because css files should be all concatenated and minified while images won’t be. This means typically you’ll want your css in a separate folder. However, if this doesn’t work with your existing structure then you’ll have to change the paths manually. If you opt to reference the scss instead of the css file, then you have the option of modifying the sass variable ‘$fancybox-image-url’ to match your image folder path. By default this path will be set to ‘../img’. (Note the lack of a trailing slash)

3. Основные настройки

Тут описаны лишь основные настройки. Шаблоны, мобильные и редко используемые конфигурации можно посмотреть в

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

$(»).fancybox({
loop: true,
autoFocus: false
});

По умолчанию они имеют следующие значения:

Включает бесконечную навигацию по галерее.

Горизонтальное расстояние между слайдами.

Включает навигацию с помощью клавиатуры.

Запрещает подписи модального окна перекрывать его содержимое. Значение — разрешает.

Показывает навигационные стрелки по краям экрана (для галереи)

Показывает счетчик изображений в верхнем левом углу (для галереи)

Маленькая кнопка закрытия модального окна

— автоматически включена для «html», «inline» или «ajax» окон

— включена для всех окон

— выключена для всех

Показывает тулбар (справа вверху)

— автоматически выключится, если активен

— включен для всех окон

— выключен для всех

Устанавливает, какие кнопки будут показаны в тулбаре

Отключает правую кнопку мыши и использует простую защиту изображений

Делает контент «модальным» — отключает навигацию по клавиатуре, кнопки закрытия и т. д

Анимационный эффект открытия и закрытия окон

— выключен

— увеличение изображения из эскиза и уменьшение в него при закрытии

Продолжительность эффекта анимации

Прозрачность при открытии и закрытии

Эффект перехода между слайдами

Может быть: , , , , , или (без эффекта)

Продолжительность эффекта перехода между слайдами

Скрывает вертикальную полосу прокрутки браузера

Устанавливает фокус на первом фокусируемом элементе после открытия

Ставит фокус обратно на активный элемент после закрытия

Не позволяет пользователю сфокусироваться на элементе вне модального контента

Открывает окна в полный экран

— разрешает перетаскивание содержимого по вертикали

— продолжайте движение после освобождения мыши / касания

Автоматически включает слайдшоу с заданной скоростью.

— отображение миниатюр при открытии

— скрывает сетку миниатюр, когда начинается анимация закрытия

— родительский элемент

— вертикальная (y) или горизонтальная (x) прокрутка

Прокрутка изображений колесом мышки

Закрытие окна по клику вне его. — отключает

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

Fancybox 3 позволяет вам его очень гибко использовать, есть несколько ключевых возможностей:

• Создать галлерею картинок
• Создать всплывающие окно с видео
• Создать модальное окно с разным поведением
• Загружать данные для галлереии по ajax (например загрузить форму)

И так, начнём смотреть всё по порядку.

Галерея

Галерей пользоваться просто. Оборачиваете вашу каркинку ссылкой с атрибутами и все ваши картинки будут листаться. Пример

<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
    <img src="thumbnail_1.jpg" alt="" />
</a>

Данный пример вы так же можете посмотреть на codepen fancybox’а. Смотреть демо. Далее я тоже буду давать ссылки на примеры.

Несколько галерей

Во второй версии fancybox, чтобы создать несколько галерей нужно было дописать атрибут rel или data-group. В третьей версии это изменилось и разработчики ушли от этого. Теперь разные галереи нужно инициализировать JS-сом. Вот так:

$().fancybox({
    selector : '.galeryOne'
});
$().fancybox({
    selector : '.galeryTwo'
});

Хоть удобный (как я считаю) способ инициализации через html-атрибуты разработчики убрали, они в данном функционале сделали так, что в этом случае в галереии появятся и те картинки, которые создадутся динамически.

Видео

Наверное это очень просто. Вы можете просто указать в ссылке атрибут data-fancybox иhref c адресом видео на youtube или vimeo, а также на файл mp4 и он сам его будет «правильно» загружать. Так же у окна вы можете задавать ширину или высоту с помощью атрибутов data-width и data-height или соотношение сторон видео атрибутом data-ratio.

Модальные окна

Чтобы создать модальное окно вам нужно следующие:

• Создать html c содержанием, и дать ему id
• Скрыть его с помощью style=»display:none;»
• У ссылки открывающей окно прописать атрибуты data-fancybox, data-src=»id блока« иhref=»javascript:;»

Вуаля! В итоге у вас получиться что-то типа этого

<a data-fancybox data-src="#modal" href="javascript:;">Open demo</a>
 <div style="display: none;" id="modal">
  <h2>Hello!</h2>
  <p>You are awesome!</p>
</div>

Если вам нужно в модальное окно вставить кнопку закрыть то создайте button с атрибутом data-fancybox-close.

В демо, кстати, есть несколько примеров анимации окон.

Установка и настройка Easy Fancybox

Процесс установки стандартный — скачиваете вручную отсюда или активируете через админку. Лайтбокс сразу подключится в имеющиеся на сайте картинки и галереи (открытие ссылок изображений должно быть установлено как медиафайлы).

Все доступные для правки параметры находятся в разделе «Настройки» — «Медиафайлы» под основным контентом.

Здесь есть несколько подпунктов:

• Media — выбор типов файлов, с которыми модуль будет срабатывать.
• Наложение — цвет/прозрачность и вывод оверлея (затемнения фона).
• Окно — рамка, заголовок, кнопка закрытия и параметры поведения окна.
• Miscellaneous (разное) — автоматический попал и опции совместимости с темами/плагинами.
• Images — задается расширения изображений для срабатывания, некоторые фишки оформления и галереи.

В общем, советую мельком просмотреть все опции дабы знать, что там есть. Если честно, в большинстве случае я ничего здесь не меняю — по умолчанию все отлично работает. Возле некоторых пунктов есть ссылки по типу «More options», свидетельствующие о существующих доп.возможностях в премиальной версии.

2. Использование

Fancybox может отображать в модальных окнах изображения, видео, iframes и любой HTML-контент. Для этого плагин имеет много дополнительных атрибутов и JS вариантов, но в этой теме описаны только основные. Более подробную информацию можно посмотреть в первоисточнике.

2.1 Изображения

Для показа галереи фотографии все ее элементы должны содержать одинаковое значение атрибута . Для одиночного фото этот атрибут может быть пустым . Атрибут используется для описания изображения и является не обязательным.

<a href=»image.jpg» data-fancybox=»gallery» data-caption=»Описание фотографии»>
<img src=»thumbnail.jpg» alt=»» />
</a>

2.2 Видео

<a data-fancybox=»» href=»https://www.youtube.com/watch?v=30BQjlXXamY»>
YouTube
</a>

<a data-fancybox=»» href=»https://vimeo.com/151297208″>
Vimeo
</a>

<a data-fancybox=»» href=»video.mp4″>
Ссылка на файл MP4
</a>

<a data-fancybox=»» href=»#myVideo»>
HTML5 элемент
</a>
<video controls id=»myVideo» style=»display:none;»>
<source src=»video.mp4″ type=»video/mp4″>
<source src=»video.webm» type=»video/webm»>
<source src=»video.ogv» type=»video/ogg»>
</video>

Для видео можно добавить значение атрибута для создания галереи/плейлиста и описание

2.3 Фрейм <iframe>

<a data-fancybox=»» data-type=»iframe» data-src=»https://fancyapps.com/fancybox/3/docs/#iframe» href=»javascript:;»>
Ссылка на страницу
</a>

Обязательный атрибут и , который указывает ссылку на страницу или PDF документ.

Также можно добавить значение для и атрибут

2.4 Встроенный HTML-элемент

<a data-fancybox=»» data-src=»#hidden-content» href=»javascript:;»>
Открыть окно
</a>
<div style=»display: none;» id=»hidden-content»>
Встроенный HTML-элемент
</div>

Атрибут указывает на ID элемента, который будет показан в модальном окне

Можно добавить атрибут и значение

2.5 Ajax

<a data-fancybox=»» data-type=»ajax» data-src=»/demo/somefile.html» href=»javascript:;»>
Открыть
</a>

Обязательный атрибут и , который указывает ссылку на подгружаемый контент.

Как и во всех предыдущих случаях, можно добавить и значение

Support

• Help
• FAQ

You can ask a questions using the StackOverflow site where you are most likely to get answer quickly as many Javascript experts spend time on the site. Make sure you add the tags «jquery» and «fancybox» when posting.

If you run into an issue and need to report a bug, please create an issue on GitHub issues and I will investigate. But do not forget to check FAQ, first!

Follow @thefancyapps for the latest updates.

1. It doesn’t work at all. The image opens up in a new page. What’s wrong?

Check if you have included all files and set up FancyBox correctly.

Look for JavaScript error messages, they might help you to locate the problem.

If you see something like Uncaught TypeError: undefined is not a function:
1) Check if fancybox.js file is indeed loaded
2) Check if you have not included jQuery library more than once

2. Can a FancyBox appear over the top of my Flash content?

Yes, read this explanation

3. Can the script be called from an iframe?

If all necessary files are included in the parent window, then you can, like:<a href=»javascript:parent.$.fancybox.open({href : ‘myurl’});»>Open something</a>

4. How can I close FancyBox from other element? ?

Just call $.fancybox.close() on your onClick event

5. I`m using custom urls for images (for example, PHP created images — index.php?action=image&id=123) and FancyBox shows source of image. Why?

FancyBox gueses content type from url but sometimes it can be wrong. The solution is to force your type, like so — $(«.selector»).fancybox({‘type’ : ‘image’});

6. FancyBox is not working on all images, only first one opens. What’s wrong?

If you are using ID as selector $(«#selector»).fancybox(); then switch to classes — $(«.selector»).fancybox();