JS Animated. Как приметь плагин jQuery «FancyBox» lightbox

Данный туториал покажет, как применить плагин jQuery "FancyBox" lightbox в шаблоне JS Animated.

FancyBox — это инструмент отображения картинок, контента и мультимедийных элементов в стиле "lightbox" Mac, обтекающий верхнюю часть веб-страницы и построенный на библиотеке jQuery.

Для того чтобы добавить его на веб-сайт:

1. Скачайте плагин библиотеки по ссылке http://fancybox.net/ на компьютер и разархивируйте его.

   

2. Скопируйте папку fancybox из архива в папку site шаблона.

   

3. Откройте файл .html, содержащий картинку, для которой нужно применить плагин и добавьте библиотеку и таблицу стилей при помощи DreamWweaver в тег :

   

4. Найдите строку с картинкой, например

5. Измените ее следующим образом



6. В папке images должны находиться image_big.jpg и image_small.jpg соответственно



7. Инициализируйте галерею: добавьте следующий код в файл .html перед закрывающим тегом :

   

8. Сохраните изменения и обновите страницу в браузере: картинка должна открываться в стиле lightbox.

   

При помощи таблицы доступных настроек по ссылке http://fancybox.net/api, можно устанавливать объекты key/value в функции fancybox().

Вы также можете воспользоваться детальным видео туториалом: