Fancybox и Blogspot

В интеграции Fancybox в блог на платформе Blogspot есть одна весомая проблема: fancybox предполагает размещение всех своих файлов (3 js, 1 css и аж 20 картинок) в каком-либо каталоге. На платформе блогспот такая возможность не предусмотрена. Поэтому приходится делать следующее:

1. Во-первых, для работы Fancybox нужен jQuery. Т.к. библиотека jQuery доступна сразу на нескольких сайтах (http://code.jquery.com/jquery-1.6.1.min.js, https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js), то можно просто включить ссылку на неё в шаблон (Дизайн -> Изменить HTML -> Добавить <script language='JavaScript' src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> в head).


2. Со скриптами Fancybox (сам fancybox и необходимые для эффектов и переключения фотографий колесом jquery-плагины easing и mousewheel) можно поступить по-разному. Во-первых, можно вставить их аналогично п.1 в шаблон, только уже непосредственно, открыв тег <script> и вставив исходный текст туда. Но мне, например, сам Fancybox, в отличие от jQuery, был нужен только в одном единственном посте (точнее, странице), поэтом я открыл <script language="javascript" type="text/javascript"> в самом посте и вставил текст библиотек туда, чтобы не загружать шаблон.


3. Теперь нужно разобраться с картинками. Если нет своего хоста, куда можно их положить, проще всего пожалуй будет залить их на blogspot (создать новое сообщение, там перейти в "Изменить Html", где нажать на "Добавить изображение" и методично залить все 20 картинок. В итоге в теле сообщения появятся теги с картинками, из них нам нужны только ссылки (вида http://1.bp.blogspot.com/-JVCSBJ0vUyQ/Tg ... ). Теперь открываем css Fancybox`a, и заменяем там все ссылки на картинки (url(*.png) и AlphaImageLoader(src='*.png')) ссылками на только что залитые на blogspot картинки.


4. Все, css готов к вставке в блог. Идем в Дизайн -> Дизайнер шаблонов -> Дополнительно -> Добавить CSS, куда и вставляем отредактированный в п.3 код. (ну или можно вставить его в тег <style> в html-коде шаблона).


5. Все, fancybox готов к использованию в постах блога.

UP от 08.08.2012: уже не помню, про какую версию Fancybox я писал этот пост, но с текущей версией (2.0.6) все гораздо проще: картинки там всего 3 (blank.gif, fancybox_loading.gif и fancybox_sprite.png), что порядком упрощает задачу.