Если данный туториал не то, что Вы искали, у Вас все еще остались вопросы или предложения - дайте нам знать. Пожалуйста, помогите нам обслуживать Вас лучше!

Ваше имя

Ваш e-mail

Ваше сообщение (обязательно)

captcha

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

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
 
Чат
We help you to choose the right product.
Начать чат