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

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

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

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

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

   

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

   

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

   ?

   1 2 3 4

   <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">

   

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

?

1	<img src="images/image_small.jpg" alt="">

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

?

1	<a class="fancybox darkbox" href="images/image_big.jpg"><img src="images/image_small.jpg" alt=""></a>



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



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

   ?

   1 2 3 4 5

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

   

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

   

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

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