Подключение и настройка fancybox 3

Содержание:

Introduction
- Dependencies
  - Important
- Compatibility
Modules
Media types
Воспроизведение видео
- Пример разметки видео с YouTube и Vimeo с постером
- Настройки для видео
Options
Как использовать
- Инициализация с дата атрибутами
  - Определение типа контента
- Ручной вызов fancyBox
Быстрый старт
Что нового в Fancybox 2?
P.S.
- - Поддержи Xakplant
Easy FancyBox: основные особенности плагина
Modules
Options
FAQ
Media types
Свой контент в модальном окне
Разные варианты работы плагина

Introduction

fancyBox is a JavaScript library used to present images, videos and any html content in an elegant way.
It has all features you would expect — touch enabled, responsive and fully customizable.

Dependencies

jQuery 3+ is preferred, but fancyBox works with jQuery 1.9.1+ and jQuery 2+

Important

If you experience issues with image zooming, then update jQuery to the latest (at least v3.2.1).

Compatibility

fancyBox includes support for touch gestures and even supports pinch gestures for zooming.
It is perfectly suited for both mobile and desktop browsers.

fancyBox has been tested in following browsers/devices:

Chrome
Firefox
IE10/11
Edge
iOS Safari
Nexus 7 Chrome

Modules

Подключение и настройка медиаплеера dune tv-102

fancyBox code is split into several files (modules) that extend core functionality.
You can build your own fancyBox version by excluding unnecessary modules, if needed.
Each one has their own and/or files.

Some modules can be customized and controlled programmatically.
List of all possible options:

Example (show thumbnails on start):

If you would inspect fancyBox instance object, you would find keys that names ar captialized — these are references for each module object.
Also, you would notice that fancyBox uses common naming convention to prefix jQuery objects with .

This is how you, for example, can access thumbnail grid element:

This example shows how to call method that toggles thumbnails:

List of available methods:

If you wish to disable hash module, use this snippet (after including JS file):

Media types

Images

Подключение и настройка роутера от «ростелекома»

The standard way of using fancyBox is with a number of thumbnail images that link to larger images:

By default, fancyBox fully preloads an image before displaying it.
You can choose to display the image right away.
It will render and show the full size image while the data is being received.
To do so, some attributes are necessary:

— the real width of the image
— the real height of the image

fancyBox supports «scrset» so I can display different images based on viewport width. You can use this to improve download times for mobile users and over time save bandwidth.
Example:

It is also possible to protect images from downloading by right-click.
While this does not protect from truly determined users, it should discourage the vast majority from ripping off your files.

Inline

For your Inline HTML you have to place a DIV Container into the content of the page:

And then simply create a link using attribute that matches CSS id selector of the element you want to open ( in this example):

Ajax

To load content via AJAX, you need to add a attribute to your link:

Additionally it is possible to define a selector with the attribute to show only a part of the response. The selector can be any string, that is a valid jQuery selector:

Iframe

If the content can be shown on a page, and placement in an iframe is not blocked by script or security configuration of that page,
it can be presented in a fancyBox:

To access and control fancyBox in parent window from inside an iframe:

Iframe dimensions can be controlled by CSS:

These CSS rules can be overridden by JS, if needed:

If you have not disabled iframe preloading (using an «preload» option), then the script will atempt to
calculate content dimensions and will adjust width/height of iframe to fit with content in it.
Keep in mind, that due to same origin policy,
there are some limitations.

Воспроизведение видео

Подключение и настройка «wi-fi direct» на телевизорах

Плагин Lightgallery позволяет воспроизводить видео с популярных видео-ресурсов, таких, как YouTube, Vimeo, VK, а также различные типы видеоформатов, доступные в HTML5: MP4, WebM, Ogg и т. д.

Чтобы отобразить видео YouTube, Vimeo или VK, вы можете вставить URL-адрес видео или поделиться URL-адресом, который предоставляется YouTube / vimeo в атрибуте data-src. Разметка в остальном такая же, как и для галереи изображений. Lightgallery проверит атрибут data-src и, если это URL-адрес видео YouTube или Vimeo, создаст видео-слайд.

Вы даже можете предоставить изображение постера для каждого видео. Вместо видео будут загружены изображения постеров. Пользователь сможет переходить к другим слайдам с помощью перетаскивания мышью или смахивания. Постеры повышают производительность и сохраняют гибкость вашей галереи, не влияя на взаимодействие с пользователем. Видео будут загружаться, когда пользователь нажимает на изображение-постер. Вы можете поместить URL-адрес изображения постера в атрибут data-poster.

Кроме того, Lightgallery позволяет автоматически загружать миниатюры изображений с YouTube, Vimeo или VK. Вы можете указать размер миниатюр в настройках. Видео будет автоматически приостановлено, когда пользователь начнет переходить к другому слайду.

Пример разметки видео с YouTube и Vimeo с постером

Добавление ссылок на видео в разметку

1
2
3
4
5
6
7
8
9

<a>

<ahref=»https://vimeo.com/1084537″data-poster=»video-poster2.jpg»>

<a>

…

<div>

Внимание! Для корректного воспроизведения видео Lightgallery требует, чтобы в ваш документ был включен плагин для видео, доступный на GitHub. Подключение видео-плагина

Подключение видео-плагина

1
2
3
4
5

lightGallery(document.getElementById(‘video-gallery’));

</script>

Настройки для видео

При добавлении Lightgallery для видео вы можете указать такие настройки:

Настройки для видеосервисов

lightGallery(document.getElementById(‘video-player-param’), {
youtubePlayerParams: {
modestbranding: 1,
showinfo: 0,
rel: 0,
controls: 0
},
vimeoPlayerParams: {
byline : 0,
portrait : 0,
color : ‘A90707’
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13

lightGallery(document.getElementById(‘video-player-param’),{

youtubePlayerParams{

modestbranding1,

showinfo,

rel,

controls

vimeoPlayerParams{

byline,

portrait,

color’A90707′

}

});

Для того чтобы в галерее отображались миниатюры для видео-файлов, необходимо подключить еще один плагин, а затем при вызове основной функции плагина, указать такие настройки:

Добавление миниатюр для видео

JavaScript

lightGallery(document.getElementById(‘video-thumbnails’), {
loadYoutubeThumbnail: true,
youtubeThumbSize: ‘default’,
loadVimeoThumbnail: true,
vimeoThumbSize: ‘thumbnail_medium’,
});

1
2
3
4
5
6

lightGallery(document.getElementById(‘video-thumbnails’),{

loadYoutubeThumbnailtrue,

youtubeThumbSize’default’,

loadVimeoThumbnailtrue,

vimeoThumbSize’thumbnail_medium’,

});

Всю документацию по плагину вы найдете на англоязычном сайте.

Options

Available options listed below.

defaults = {

	// Animation duration in ms
	speed : 330,

	// Enable infinite gallery navigation
	loop : true,

	// Should zoom animation change opacity, too
	// If opacity is 'auto', then fade-out if image and thumbnail have different aspect ratios
	opacity : 'auto',

	// Space around image, ignored if zoomed-in or viewport smaller than 800px
	margin : ,

	// Horizontal space between slides
	gutter : 30,

	// Should display toolbars
	infobar : true,
	buttons : true,

	// What buttons should appear in the toolbar
	slideShow  : true,
	fullScreen : true,
	thumbs     : true,
	closeBtn   : true,

	// Should apply small close button at top right corner of the content
	// If 'auto' - will be set for content having type 'html', 'inline' or 'ajax'
	smallBtn : 'auto',

	image : {

		// Wait for images to load before displaying
		// Requires predefined image dimensions
		// If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found
		preload : "auto",

		// Protect an image from downloading by right-click
		protect : false

	},

	ajax : {

		// Object containing settings for ajax request
		settings : {

			// This helps to indicate that request comes from the modal
			// Feel free to change naming
			data : {
				fancybox : true
			}
		}

	},

	iframe : {

		// Iframe template
		tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',

		// Preload iframe before displaying it
		// This allows to calculate iframe content width and height
		// (note: Due to "Same Origin Policy", you can't get cross domain data).
		preload : true,

		// Scrolling attribute for iframe tag
		scrolling : 'no',

		// Custom CSS styling for iframe wrapping element
		css : {}

	},

	// Custom CSS class for layout
	baseClass : '',

	// Custom CSS class for slide element
	slideClass : '',

	// Base template for layout
	baseTpl	: '<div class="fancybox-container" role="dialog" tabindex="-1">' +
			'<div class="fancybox-bg"></div>' +
			'<div class="fancybox-controls">' +
				'<div class="fancybox-infobar">' +
					'<button data-fancybox-previous class="fancybox-button fancybox-button--left" title="Previous"></button>' +
					'<div class="fancybox-infobar__body">' +
						'<span class="js-fancybox-index"></span>&nbsp;/&nbsp;<span class="js-fancybox-count"></span>' +
					'</div>' +
					'<button data-fancybox-next class="fancybox-button fancybox-button--right" title="Next"></button>' +
				'</div>' +
				'<div class="fancybox-buttons">' +
					'<button data-fancybox-close class="fancybox-button fancybox-button--close" title="Close (Esc)"></button>' +
				'</div>' +
			'</div>' +
			'<div class="fancybox-slider-wrap">' +
				'<div class="fancybox-slider"></div>' +
			'</div>' +
			'<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
		'</div>',

	// Loading indicator template
	spinnerTpl : '<div class="fancybox-loading"></div>',

	// Error message template
	errorTpl : '<div class="fancybox-error"><p>The requested content cannot be loaded. <br /> Please try again later.<p></div>',

	// This will be appended to html content, if "smallBtn" option is not set to false
	closeTpl : '<button data-fancybox-close class="fancybox-close-small"></button>',

	// Container is injected into this element
	parentEl : 'body',

	// Enable gestures (tap, zoom, pan and pinch)
	touch : true,

	// Enable keyboard navigation
	keyboard : true,

	// Try to focus on first focusable element after opening
	focus : true,

	// Close when clicked outside of the content
	closeClickOutside : true,

	// Callbacks; See Documentation/API/Events for description and samples
	beforeLoad	 : $.noop,
	afterLoad    : $.noop,
	beforeMove 	 : $.noop,
	afterMove    : $.noop,
	onComplete	 : $.noop,

	onInit       : $.noop,
	beforeClose	 : $.noop,
	afterClose	 : $.noop,
	onActivate   : $.noop,
	onDeactivate : $.noop
}

Set instance options by passing a valid object to method:

Plugin options / defaults are exposed in namespace so you can easily adjust them globally:

Custom options for each element individually can be set by adding a
attribute to the element.

This attribute should contain the properly formatted JSON object:

Как использовать

Существует несколько способов использования fancyBox.

Инициализация с дата атрибутами

Основной способ использования fancyBox это добавление атрибута к ссылке. Заголовок добавляется используя атрибут . Например:

Если у вас есть несколько объектов, вы можете атрибут к каждому элементу для создания группы элементов. Кажда группа должна иметь свое уникальное название:

Определение типа контента

fancyBox потдерживает автоматическое определние типа контента на основе его адреса. Если тип контента не может быть определен автоматически, вам необходимо вручную установить атрибут:

Ручной вызов fancyBox

fancyBox может быть активирован в любое время с помощью Javascript и следовательно нет необхожимости в специальном тригере элемента. Например для показа простого сообщения:

Для получения подробной информации смотри раздел

Быстрый старт

Подключаем библиотеки и таблицу стилей:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

HTML очень правильный — маленькая картинка внутри ссылки на большую:

<a href="image_big.jpg"><img src="image_small.jpg" width="100" height="100" alt=""/></a>

Если скрипты отключены, то при клике на ссылку просто откроется большая картинка. А если не отключены, то большая картинка откроется не просто, а в красивом, подстраивающемся под размер, отцентрированном окошке с тенькой. Да еще кнопочка «закрыть» будет. Да еще можно подпись из title выводить. И много других приятностей есть. Красота да и только!

Для того, чтобы это все отработало, инициализируем галерею:

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery("a").fancybox();
	});
</script>

Конечно, в боевых условиях так огульно на все ссылки вешать плагин не стоит. Это я для примера показал. Лучше выбрать конкретные ссылки по классу, или, например, по родителю.

Что нового в Fancybox 2?

И так что нового было добавлено в этот релиз за последнее время:

Расширен набор вспомогательных функций;
Отзывчивость (всплывающие окошки теперь масштабируются в зависимости от размера окна браузера);
Добавлено слайдшоу;
Новые эффекты переходов между изображениями в галерее;
Fancybox полностью переведен на CSS3 (тени, скругление углов и прочее);
Обновлен плагин настроек (не имеет обратной совместимости);
Теперь выпускается под лицензией Creative Commons Attribution-NonCommercial 3.0, ознакомится с которой можно по этой ссылке: http://creativecommons.org/licenses/by-nc/3.0/

P.S.

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

Поддержи Xakplant

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

Easy FancyBox: основные особенности плагина

Как и предыдущий плагин, Easy FancyBox для WordPress начинает работать сразу после стандартной установки на CMS по отношению ко всем изображениям. Если вы захотите настроить параметры «под себя», то на странице по адресу в консоли «Настройки» — «Медиафайлы» обнаружите опции, практически идентичные опциям FancyBox для Вордпресс.

Характерными же его отличиями являются:

плагин частично русифицирован, поэтому разобраться в его настройках самостоятельно не составит большого труда;
при базовых установках картинки автоматически не объединяются в галереи, Easy FancyBox выводит во всплывающем окне только то изображение, по которому кликнули. Чтобы отобразить группу файлов в лайтбоксе, необходимо создать стандартную галерею Вордпресс в режиме редактирования записи.

Или же в настройках плагина в блоке «Gallery» в поле «Autogallery» выбрать пункт «Все в одной галерее»;

в варианте «из коробки» Easy FancyBox размещает поверх изображений название, взятое из атрибута alt. Чтобы отключить эту опцию, в блоке «Appearance» снимите галочку возле поля «Показать название»;
плагин позволяет выбрать тип медиафайлов, которые будут открываться в модальном окне.

Каких-либо существенных недостатков в работе плагина не выявлено. Но если в ваш шаблон ВП встроен «родной» лайтбокс, велика вероятность конфликта и может оказаться, что Easy FancyBox для WordPress не работает. В таком случае имеет смысл обратиться в службу поддержки.

Modules

Some modules can be customized and controlled programmatically.
List of all possible options:

Example (show thumbnails on start):

This is how you, for example, can access thumbnail grid element:

This example shows how to call method that toggles thumbnails:

List of available methods:

If you wish to disable hash module, use this snippet (after including JS file):

Options

Available options listed below.

defaults = {

	// Animation duration in ms
	speed : 330,

	// Enable infinite gallery navigation
	loop : true,

	// Should zoom animation change opacity, too
	// If opacity is 'auto', then fade-out if image and thumbnail have different aspect ratios
	opacity : 'auto',

	// Space around image, ignored if zoomed-in or viewport smaller than 800px
	margin : ,

	// Horizontal space between slides
	gutter : 30,

	// Should display toolbars
	infobar : true,
	buttons : true,

	// What buttons should appear in the toolbar
	slideShow  : true,
	fullScreen : true,
	thumbs     : true,
	closeBtn   : true,

	// Should apply small close button at top right corner of the content
	// If 'auto' - will be set for content having type 'html', 'inline' or 'ajax'
	smallBtn : 'auto',

	image : {

		// Wait for images to load before displaying
		// Requires predefined image dimensions
		// If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found
		preload : "auto",

		// Protect an image from downloading by right-click
		protect : false

	},

	ajax : {

		// Object containing settings for ajax request
		settings : {

			// This helps to indicate that request comes from the modal
			// Feel free to change naming
			data : {
				fancybox : true
			}
		}

	},

	iframe : {

		// Iframe template
		tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',

		// Preload iframe before displaying it
		// This allows to calculate iframe content width and height
		// (note: Due to "Same Origin Policy", you can't get cross domain data).
		preload : true,

		// Scrolling attribute for iframe tag
		scrolling : 'no',

		// Custom CSS styling for iframe wrapping element
		css : {}

	},

	// Custom CSS class for layout
	baseClass : '',

	// Custom CSS class for slide element
	slideClass : '',

	// Base template for layout
	baseTpl	: '<div class="fancybox-container" role="dialog" tabindex="-1">' +
			'<div class="fancybox-bg"></div>' +
			'<div class="fancybox-controls">' +
				'<div class="fancybox-infobar">' +
					'<button data-fancybox-previous class="fancybox-button fancybox-button--left" title="Previous"></button>' +
					'<div class="fancybox-infobar__body">' +
						'<span class="js-fancybox-index"></span>&nbsp;/&nbsp;<span class="js-fancybox-count"></span>' +
					'</div>' +
					'<button data-fancybox-next class="fancybox-button fancybox-button--right" title="Next"></button>' +
				'</div>' +
				'<div class="fancybox-buttons">' +
					'<button data-fancybox-close class="fancybox-button fancybox-button--close" title="Close (Esc)"></button>' +
				'</div>' +
			'</div>' +
			'<div class="fancybox-slider-wrap">' +
				'<div class="fancybox-slider"></div>' +
			'</div>' +
			'<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
		'</div>',

	// Loading indicator template
	spinnerTpl : '<div class="fancybox-loading"></div>',

	// Error message template
	errorTpl : '<div class="fancybox-error"><p>The requested content cannot be loaded. <br /> Please try again later.<p></div>',

	closeTpl : '<button data-fancybox-close class="fancybox-close-small">×</button>',

	// Container is injected into this element
	parentEl : 'body',

	// Enable gestures (tap, zoom, pan and pinch)
	touch : true,

	// Enable keyboard navigation
	keyboard : true,

	// Try to focus on first focusable element after opening
	focus : true,

	// Close when clicked outside of the content
	closeClickOutside : true,

	// Callbacks
	beforeLoad	 : $.noop,
	afterLoad    : $.noop,
	beforeMove 	 : $.noop,
	afterMove    : $.noop,
	onComplete	 : $.noop,

	onInit       : $.noop,
	beforeClose	 : $.noop,
	afterClose	 : $.noop,
	onActivate   : $.noop,
	onDeactivate : $.noop

}

Set instance options by passing a valid object to method:

Plugin options / defaults are exposed in namespace so you can easily adjust them globally:

Custom options for each element individually can be set by adding a
attribute to the element.

This attribute should contain the properly formatted JSON object:

FAQ

Opening/closing causes fixed element to jump

Simply add CSS class to your fixed positioned elements.
Example of using Bootstrap navbar component:

The script measures width of the scrollbar and creates CSS class
that uses this value for property.
Therefore, if your element has , you should positon it using and properties instead. Example:

How to customize caption

You can use option that accepts a function and is called for each group element. Example of appending image download link:

Inside method, refers to the clicked element. Example of using different source for caption:

How to reposition thumbnail grid

There is currenty no JS option to change thumbnail grid position.
But fancyBox is designed so that you can use CSS to change position or dimension for each block
(e.g., content area, caption or thumbnail grid).
This gives you freedom to completely change the look and feel of the modal window, if needed.
View demo on CodePen

Media types

Images

The standard way of using fancyBox is with a number of thumbnail images that link to larger images:

— the real width of the image
— the real height of the image

fancyBox supports «scrset» so I can display different images based on viewport width. You can use this to improve download times for mobile users and over time save bandwidth.
Example:

It is also possible to protect images from downloading by right-click.
While this does not protect from truly determined users, it should discourage the vast majority from ripping off your files.

Inline

For your Inline HTML you have to place a DIV Container into the content of the page:

And then simply create a link using attribute that matches CSS id selector of the element you want to open ( in this example):

Ajax

To load content via AJAX, you need to add a attribute to your link:

Additionally it is possible to define a selector with the attribute to show only a part of the response. The selector can be any string, that is a valid jQuery selector:

Iframe

If the content can be shown on a page, and placement in an iframe is not blocked by script or security configuration of that page,
it can be presented in a fancyBox:

To access and control fancyBox in parent window from inside an iframe:

Iframe dimensions can be controlled by CSS:

These CSS rules can be overridden by JS, if needed:

Свой контент в модальном окне

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

1
2
3
4
5
6
7
8
9

<label for=»message»class=»form__label»>Сообщение<label>

<form>

Затем просто создайте ссылку, имеющую атрибут data-src, который соответствует идентификатору элемента, который нужно открыть (с предшествующей хэш-меткой (#):

<a data-fancybox data-src=»#modal-form» href=»javascript:;»>
Показать форму
</a>

1
2
3

<adata-fancybox data-src=»#modal-form»href=»javascript:;»>

Показатьформу

<a>

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

В модальном окне fancybox, так же можно сделать прокрутку контента добавив скролл. Посмотреть демо на CodePen

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

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

<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();