- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
FAQs
General Tutorials
Новые шаблоны
MonsterONE Subscrioption
JS Animated. Как приметь плагин jQuery «FancyBox» lightbox
Январь 21, 2014
Данный туториал покажет, как применить плагин jQuery "FancyBox" lightbox в шаблоне JS Animated.
JS Animated. Как применить плагин jQuery «FancyBox» lightboxFancyBox — это инструмент отображения картинок, контента и мультимедийных элементов в стиле "lightbox" Mac, обтекающий верхнюю часть веб-страницы и построенный на библиотеке jQuery.
Для того чтобы добавить его на веб-сайт:
Скачайте плагин библиотеки по ссылке http://fancybox.net/ на компьютер и разархивируйте его.
Скопируйте папку fancybox из архива в папку site шаблона.
Откройте файл .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" />
Найдите строку с картинкой, например
Измените ее следующим образом
В папке images должны находиться image_big.jpg и image_small.jpg соответственно
Инициализируйте галерею: добавьте следующий код в файл .html перед закрывающим тегом </head> :
<script type="text/javascript"> $(document).ready(function() { $("a.fancybox").fancybox(); }); </script>
Сохраните изменения и обновите страницу в браузере: картинка должна открываться в стиле lightbox.
<img src="images/image_small.jpg" alt="" />
<a class="fancybox" href="images/image_big.jpg"><img src="images/image_small.jpg" alt=""/></a>
При помощи таблицы доступных настроек по ссылке http://fancybox.net/api, можно устанавливать объекты key/value в функции fancybox().
Более детальная информация по использованию плагина находится в официальном руководстве на сайте http://fancybox.net/howtoВы также можете воспользоваться детальным видео туториалом:
JS Animated. Ка применить плагин jQuery «FancyBox» lightbox