[contact-form-7 id="24085" title="Feedback RU"]

Новые шаблоны

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

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

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

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

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

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

    js_animated_jquery_fancybox_lightbox_plugin_implementing_1

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

    js_animated_jquery_fancybox_lightbox_plugin_implementing_2

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

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

    js_animated_jquery_fancybox_lightbox_plugin_implementing_3

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

  5. <img src="images/image_small.jpg" alt="" />
    
  6. Измените ее следующим образом

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

    js_animated_jquery_fancybox_lightbox_plugin_implementing_4

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

  9. js_animated_jquery_fancybox_lightbox_plugin_implementing_5

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

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

    js_animated_jquery_fancybox_lightbox_plugin_implementing_6

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

    js_animated_jquery_fancybox_lightbox_plugin_implementing_7

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

Более детальная информация по использованию плагина находится в официальном руководстве на сайте http://fancybox.net/howto

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

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