Fancybox установка. Веб-дизайн и поисковая оптимизация

Приветствую друзья. На каждом сайте есть медиафайлы для лучшей подачи информации посетителям. уже рассматривали на страницах блога. При помощи плагинов вордпресс можно увеличить картинку не совершая переход на отдельную страницу. Есть возможность связать изображения в единую галерею или выводить по одной. Познакомимся с одним из таких плагинов, одним из лучших в своём роде. занимает немного времени, стоит потратить его для реализации поставленной задачи.

Fancybox for wordpress плагин увеличения картинок и управление галереей

Размещая изображения на веб-сайте скорее обращали внимание, что «габаритные» картинки установленный шаблон сжимает, что влечёт за собой потерю качества. Мелкие шрифт и детали не всегда можно разобрать. В настройках отображения можно указать вывод картинки в отдельной вкладке, или на этой же странице сайта. Это может привести к появлению дублей, да и пользователю не совсем удобно. Fancybox for wordpress открывает изображение на этой странице поверх остального контента.

Установить и активировать Fancybox for wordpress надо стандартным способом. Если забыли как, прочитайте статью . Чтобы работа Fancybox применялась к картинке надо во время загрузки или к уже загруженному файлу в Настройках отображения файла в пункте Ссылка указать ⇒ Медиафайл .

После активации появится раздел — Fancybox for wordpress.

После перехода в раздел откроется окно с вкладками для редактирования различных параметров.

Плагин не русифицирован, на английском языке, но практически всё понятно и так. Сейчас предоставлю перевод всех настроек.

Info . Вкладка информации о разработчиках. Авторы уточняют, что установленная базовая настройка плагина достаточно привлекательна. В примечаниях обращают внимание, что для вступления изменений в силу надо очистить кэш.
Appearance . Настраивание внешнего вида всплывающих окон.
- Border — отображение рамки вокруг всплывающего окна, да/нет. Если Да — указываете цвет в формате HTML.
- Close button — кнопка закрытия. Подбираете положение крестика.
- Padding — настраивается толщина отступа и цвет от модального окна до иллюстрации.
- Overlay Options — прозрачность заднего фона. Коэффициент от 0 до 1. При отметке 1 контент на заднем фоне отображаться не будет совсем.
- Title — название медиафайла. При включенном чек-боксе название будет показываться в выбранном положении. Inside ⇒ внутри, Outside ⇒ снаружи, Over ⇒ поверх.
- Navigation Arrows — стрелки навигации. Выводить либо нет.

Обязательно сохраняйте выбранные изменения.

Следующие два раздела для продвинутых пользователей.

Miscellaneous — другие настройки. Автоматическое определение размеров, работает только с Ajax.
Extra Calls — дополнительные вызовы FancyBox. Здесь можно добавить множество дополнительных вызовов FancyBox с различными настройками. Например, если хотите использовать FancyBox с фреймами или AJAX на какой-либо конкретной ссылке, можете настроить эти вызовы здесь, не влияя на параметры изображений.
Troubleshooting — устранение неисправностей. Разработчики обращают внимание, что изменения в этом разделе стоит делать, только если возникли проблемы с работой Fancybox for wordpress.
Авторы рекомендуют проверить совместимость с другими расширениями как Lightbox, Slimbox и подобными поочерёдно деактивируя по одному и проверяя. Также надо очистить кэш для проверки изменения параметров.
Support — служба поддержки. Даны ссылки на страницы вопросы, группу Fancybox в Google, форум поддержки и ответы на задаваемые вопросы другими пользователями.
Uninstall — удаление. Как и другие расширения, Fancybox for wordpress хранит свои настройки в таблице базы данных WordPress. Чтобы полностью удалить плагин, установите флажок, затем сохраните изменения, и после деактивации, все его настройки будут удалены из базы данных.

Надеюсь, после подробного разбора Fancybox for wordpress настройка плагина не вызовет затруднений. Желающие успешно внедрят его и сделают вывод изображений во всплывающем окне эффектным, и сайт будет радовать глаз автору и посетителям.

FancyBox - это jQuery плагин, который служит для создания фотогалерей и вывода другого контента в красивых модальных окнах. Если вы планируете на сайте и фотогалерею и размещение некоторого контента в модальных окнах, обратите внимание на этот скрипт.

Подключаем jquery, плагины jquery.easing и jquery.fancybox, таблицу стилей jquery.fancybox.css

Создаем фотогалерею.
Для начала нам необходимо вызвать fancybox и указать объекты, на которые мы его повесим. Между тегами head дописываем:

$(document).ready(function() {
$("a.gallery").fancybox();
});

FancyBox - Фотогалерея
Одиночная картинка

Группа картинок (галерея изображений)

Стоит только обратить внимание на то, чтобы фотографии принадлежали одной галерее у них у всех должен быть одинаковыми класс (в примере class="gallery") и атрибут rel (в примере rel="group"). В примере первая фотография не имеет атрибута rel. Атрибут title необязательный, но если он присутствует, он будет служить подписью к фотографии.

Теперь давайте рассмотрим параметры, которые мы можем задать при вызове fancybox, которые влияют на внешний вид и поведение фотогалереи. Для нашего эксперимента создадим аналогичный HTML- код (пример приводить не буду, он абсолютно идентичен приведенному выше) с той лишь разницей, что всем тегам присвоим класс gallery2 , и напишем для него следующую функцию (которую также поместим м/у тегами head):

$("a.gallery2").fancybox(
{
"padding" : 20,
"imageScale" : false,
"zoomOpacity" : false,
"zoomSpeedIn" : 1000,
"zoomSpeedOut" : 1000,
"zoomSpeedChange" : 1000,
"frameWidth" : 700,
"frameHeight" : 600,
"overlayShow" : true,
"overlayOpacity" : 0.8,
"hideOnContentClick" :false,
"centerOnScroll" : false

Что все это значит:
padding - отступ контента (фотографий) от краев окна. В демке я поставил 20px, это, конечно, многовато, но зато наглядно;
imageScale - принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - true;
zoomOpacity - изменение прозрачности контента во время анимации (по умолчанию false). Помним, что прозрачность задается от 0 до 1;
zoomSpeedIn - скорость анимации в мс при увеличении фото (по умолчанию 0);
zoomSpeedOut - скорость анимации в мс при уменьшении фото (по умолчанию 0) ;
zoomSpeedChange - скорость анимации в мс при смене фото (по умолчанию 0);
frameWidth - ширина окна, px (425px - по умолчанию);
frameHeight - высота окна, px(355px - по умолчанию);
overlayShow - (по умолчанию true) если true, то затенят страницу под всплывающим окном. Цвет задается в jquery.fancybox.css - div#fancy_overlay
overlayOpacity - Прозрачность затемнения (0.3 по умолчанию);
hideOnContentClick - Если true закрывает окно по клику по любой его точке (кроме элементов навигации). По умолчанию true;
centerOnScroll - Если true, то окно центрируется на экране, когда пользователь прокручивает страницу.
Как мы видим в наших руках весьма гибкий инструмент для создания фотогалерей и не только...

Но не галереями един этот замечательный плагин. С помощью fancybox мы легко можем выводить не только фотографии в красивых окошках, но и другой контент.
Видео с Youtube (rutube, video.mail и т.д.)

Видео с youtube.com в модальном окне

Все очень просто. Мы в теге указали класс gallery, в атрибуте href идентификатор #testube . В контейнер div#testube поместили код ролика с youtube.

Погуглим?

Правда здесь есть одно "но". Класс обязательно должен иметь имя iframe . Соответственно на этот класс нам нужно повесить fancybox

$("a.iframe").fancybox(
{
"frameWidth" : 800, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600 // высота окна, px(355px - по умолчанию)
});

Модальные окна с собственным контентом:

Реализуется аналогично с предыдущим примером:

Клик

Файл content.html содержит htm-код, который и будет выведен в модальное окно. Обратите внимание, что сам файл content.html не содержит в себе ни css-стилей, ни ссылок на них. На демонстрационной страничке между тэгами head я создал класс.green и текст в модальном окне (заключенный в

) получился зеленый.

Мы также в атрибуте href можем указать и php. Давайте реализуем это. Для этого создадим простой php-файл content2.php:

Вы открыли окно №

А на странице с нашими примерами напишем:

Свой контент в модальном окне вариант 2.
Первое окно

Второе окно

Мы видим, что ссылки имеют GET - параметр, и в соответствии с цифрой в этом параметре content2.php может производить какие-либо действия.Таким образом в модальном окне может выводиться контент из базы данных, можно реализовать форму обратной связи и т.д. и т.п.

Теперь об одном большом нюансе , касательно вывода своего контента в модальных окнах.
Т.к. поисковики не понимают яваскриптов, для них наши модальные окна - просто новая страница. Нам следует подстраховаться, дабы ни один поисковик никому не дал прямую ссылку на такую страницу, но в тоже время контент модальных окон смог нормально проиндексировать.
Можно сделать так:

Свой контент в модальном окне вариант 2 с дублированием.
Первое окно

Второе окно

Где for_spider.php - это нормальная страница сайта, с подключенными стилями, скриптами. На этой странице мы будем выводить тот же самый контент, что и в модальном окне. Пускай ее и будут индексировать поисковики и на нее же попадают неадекватные посетители с отключенным javascript. . А для нормальных людей мы сделаем подмену. С помощью jquery мы заменим for_spider.php на content2.php. Между тегами head, после "$(document).ready(function() {" напишем следующий код:

Url = $("a.modalbox").attr("href").replace("for_spider","content2");
$("a.modalbox").attr("href", url);
$("a.modalbox").fancybox(
{
"frameWidth" : 400,
"frameHeight" : 400

Что мы здесь делаем. У тегов мы "вытаскиваем" ссылку, заменяем в ней "for_spider" на "content2" и заносим в переменную url. Затем у этих же тегов мы заменяем атрибут href на новый(значение переменной url). Ну потом уже привычый нам запуск плагина fancybox. Как только на наш сайт зайдет посетитель, все ссылки на for_spider.php преобразуются в content2.php - на наши модальные окна.

На сегодня это все, урок получился большой, но думаю, полезный. Спасибо за внимание и приятных выходных!

Ранее я рассматривал внедрение , доступной в системе по умолчанию. Там упоминается дополнительный модуль Lightbox 2, что уже более 3-х лет не обновляется, поэтому пришлось позаботиться об альтернативе. Хороший вариант, с которым чаще всего доводилось сталкиваться — плагин Easy FancyBox. Он имеет более 300тыс. скачиваний, постоянно дорабатывается и не конфликтует с другими решениями (что немаловажно). Короче говоря, за пару последних лет меня не подводил. Не зря он числится в .

Как вы уже поняли, основная функция модуля — реализация всплывающего лайтбокса для всех медиафайлов в вашем веб-проекте. Он является модификацией традиционного скрипта FancyBox jQuery и обладает множеством полезных опций. Сразу после активации все PNG, JPG и GIF картинки начнут автоматически открываться во всплывающем окне с Lightbox эффектом (если только не указаны другие параметры).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

add_action("wp_enqueue_scripts", "my_conditional_fancybox", 0); 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 в Вордпресс я ставлю практически всегда, когда нужно добавить простой лайтбокс на картинки и галерею. Он работает сходу после установки, как правило, не конфликтует с другими скриптами, имеет пару-тройку настроек и регулярно обновляется. Больше, в принципе, от него ничего и не нужно.

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

Easy Fancybox WordPress — установка, настройка, обзор плагина.

Easy Fancybox — плагин для добавления функциональности к изображениям на сайте wordpress.

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

Easy Fancybox WordPress — обзор плагина Описание

Легкий плагин FancyBox для сайтов WordPress дает вам гибкое и эстетическое решение light box для почти всех медиа-ссылок на вашем сайте.

Easy FancyBox использует обновленную версию традиционного расширения fancybox jQuery и совместим с WordPress не ниже 3 версии.

После активации вы можете найти новый раздел FancyBox в Настройки > Мультимедиа — админ-страницу, где вы можете управлять некоторыми настройками внешнего вида всплывающего окна.

Возможности

Поддерживаемые типы носителей и содержимого:

Все распространенные форматы изображений, включая файлы webp
Видео размещенное на Ютубе, в Vimeo и Dailmotion
PDF — файлы (встраивание с тегом объекта, в iframe или во внешнем Google Docs Viewer)
SWF (Flash) файлы
SVG Media images (спасибо Simon Maillard)
Встроенное HTML-содержимое (см. инструкции в разделе часто задаваемые вопросы)
Внешние веб-страницы (см. инструкции в разделе часто задаваемые вопросы)

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

В плагине доступны различные настройки внешнего вида окна, цвет элементов, размер всплывающего окна, шрифты.

Скачать Easy fancybox wordpress

плагина Easy fancybox на wordpress.org
Скачать zip архив по прямой ссылке с wordpress.org

Проверка Easy fancybox wordpress

Кликните по картинке:

Сайт Usain Bolt — http://usainbolt.com

Easy fancybox wordpress — установка, настройка, использование.

Плагин Easy Fancybox WordPress — установка, настройка, использование

Easy Fancybox WordPress — плейлист 11 видео

Плагин галереи для wordpress FancyBox for WordPress. В этом видео вы узнаете как создать галерею изображений на сайте, созданном на wordpress. Как сделать так чтобы изображения при нажатии отображались поверх сайта. Все видеоуроки по созданию сайта на CMS WordPress смотрите http://prokachaimlm.com

Это первое видео из маленького цикла по скрипту fancybox, из которого вы узнаете что такое Fancybox, какие возможности он предоставляет, как его подключить к странице вашего сайта, а так же какие параметры и настройки можно использовать чтобы настроить работу скрипта под свои уникальные требования.
#fancybox #popup #jquerypopup
Автор: Дмитрий Науменко
Подробное содержание на сайте АВТОРА, или у нас:
Сайт автора: http://shop.dmitriynaumenko.com/aff/free/16073/dvdcurse/
Сайт с курсами на разные темы: http://dvdcurse.ru/
Еще разные курсы: http://dvdcurse.ucoz.ru
Сайт "Графика и 3Dмоделирование": http://allofgraphics.ucoz.ru
Канал с курсами на разные темы: https://goo.gl/mw6wX1
Канал "Графика и 3Dмоделирование": https://goo.gl/Ikk1G5
Так же курсы в:
ВК "Видеокурсы для ВСЕХ": http://vk.com/dvdcurse
Facebook "Видеокурсы для ВСЕХ": http://www.facebook.com/dvdcurse
Twitter "Видеокурсы для ВСЕХ": https://twitter.com/dvdcurse
Blogger "Видеокурсы для ВСЕХ": http://dvdcursenew.blogspot.ru
Livejournal "Видеокурсы для ВСЕХ": http://dvd_course.livejournal.com/
Liveinternet "Видеокурсы для ВСЕХ": http://www.liveinternet.ru/users/dvd_course/
Tumblr "Видеокурсы для ВСЕХ": http://dvdcurse.tumblr.com
Google + "Видеокурсы для ВСЕХ": https://goo.gl/tw4vGm

Создание фотогалереи на сайте Фотогалерея Fancybox - установка и настройкаFancybox (Фантастический бокс, коробка) - популярный плагин для бесплатной библиотеки скриптов jQuery , один из самых удачных клонов фотогалереи LightBox (см. статью jQuery - просто и красиво!). Разработчик - латвийский программист Janis Skarnelis . В настоящее время (май 2013 г.) предлагается уже третья версия этого плагина, а также вариант для мобильных устройств. Если вы планируете коммерческое использование плагина Fancybox , то учтите, что это удовольствие платное (цена от 600 руб.).

Fancybox позволяет выводить в окне не только изображения, но и самый разнообразный контент: видео, iframe, HTML и др. Картинки можно прокручивать как кнопками вперед/назад, так и колесом мыши. Программа имеет несколько настроек режима вывода картинок, скорости перелистывания, вида надписей под картинками и др. Пример использования Fancybox для фотогалереи на сайте показан на рисунке (версия V.1.3.3 2010 года). Пример рабочий, кликайте на здоровье!

Установка фотогалереи Fancybox Для установки фотогалереи Fancybox сначала создадим на сайте новую папку, назвав её, чтобы не путаться, fancybox . Эта папка должна находиться в том же каталоге, что и страница с фотогалереей. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней четыре скрипта (*.js ), вспомогательные картинки (images ) и таблица CSS (*.css ). Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега ... следующие строчки, указывающие пути к нашим новым файлам, и небольшой JavaScript для инициализации фотогалереи Fancybox :

});

Важное замечание: если на вашем сайте используется несколько плагинов jQuery , то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
.
Не рекомендуется использовать на одной странице несколько разных версий jQuery , чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery , так как не все версии взаимозаменяемы.

Теперь необходимо разместить на странице сайта нужные изображения. Как обычно, каждое должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big), на которую указывает ссылка с миниатюры. Размещаем их в соответствие с дизайном сайта, например, в нашем случае - это контейнер

...

Для него указываем класс class="gallery" . Если необходимо выводить несколько изображений в одной галерее, надо в каждую ссылку добавить атрибут rel="group_1" . Его значение может быть любым, но одинаковым для всех элементов одной галереи. Таким образом можно создать на странице несколько фотогалерей, давая им разные имена в атрибуте rel , например, group_1, group_2 и т.д. Для вывода одиночных изображений rel не нужен.

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

Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".

Следовательно, для показанной вверху фотогалереи имеем следующий HTML-код:

Настройка фотогалереи Fancybox

Для настройки фотогалереи Fancybox откройте файл jquery.fancybox-1.3.3.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом его конце увидите доступные настройки, например:
overlayShow: true, //затемнение основной страницы (фон) true/false
overlayOpacity: 0.8, //прозрачность фона
overlayColor: "#777", //цвет фона
titleShow: true, //вывод надписей под изображениями
width: 560, //ширина окна
height: 340 //высота окна
и так далее...

Основные из них снабжены комментариями на русском языке. Изменяйте значения параметров и после сохранения файла jquery.fancybox-1.3.3.js можете наблюдать результат, открыв страницу с вашей фотогалереей в браузере.

Вспомогательные картинки (вперед, назад, загрузка, выход и др.) расположены в папке images , и их также можно менять на ваше усмотрение.

Как сказано выше, кроме изображений, Fancybox может выводить в окне и другой контент, например, видео, iframe, HTML и др. Так как наша тема - создание фотогалереи на сайте, то подробно этот вопрос рассматривать не будем. При необходимости, вы легко найдете соответствующие инструкции в интернете, например, в статье Евгения Попова "FancyBox - фотогалерея + модальные окна ". Замечу только, что вывод другого контента также реализуется очень просто, и для примера, посмотрим, как c помощью Fancybox вывести содержимое любой HTML-страницы.

Для этого необходимо добавить несколько строк в размещенный вверху страницы код инициализации Fancybox :

$(document).ready(function() {
$(".gallery a").fancybox(); // выбор всех ссылок с классом gallery
$("a.iframe").fancybox({ // выбор всех ссылок с классом iframe
width: 560 ,
height: 340
});
});

Для вывода HTML-страницы следует использовать следующую конструкцию ссылки:
Текст или картинка .

Размеры окна, в котором будет выведена страница, устанавливаются в коде инициализации (параметры width и height ), или аналогично в файле jquery.fancybox-1.3.3.js также параметрами width и height (см. выше).

Один из примеров использования Fancybox для вывода HTML-страницы рассмотрен в статье "