UniSite CMS - Современный движок для Ваших сайтов.

ZHUR ARTUR.ru

Персональный блог по созданию
мощных и современных Web-Проектов!

Считают, что успех приходит к тем, кто рано встает. Нет: успех приходит к тем, кто встает в хорошем настроении. © Ашар Марсель

»

Введите код полученный после подписки

  • 3

  • 0

Модальные окна с помощью плагина FancyBox

Автор - Жур Артур | Добавлено - 2014-02-24 | Просмотров - 5215 | Скачено - 68

1Подключение плагинов

Первым делом нужно подключить плагин JQuery, скачать его можно тут. Разместите его на ваш сайт и подключите к страницам перед закрывающим тегом </head> . Без этого плагина FancyBox работать не будет!

Подключение плагина Jquery


Подключение плагина FancyBox

  

Подключение стилей FancyBox

 

2Вывод картинок

В атрибут ссылки href помещаем путь к большой картинке, которая будет появляться по нажатию на маленькую картинку, а в img помещаем путь к маленькой картинке. rel="group" - даёт возможность группировать картинки и листать их прямо в модальном окне, можно этот атрибут убрать.

3Подключение модального окна к картинкам

Разместите этот код перед закрывающим тегом </head> или в отдельный JS файл.

   

С помощью класса image-modal мы связываем плагин и ссылки которые ведут к большим картинкам. Заметьте у всех ссылок указан одинаковый класс image-modal. Если вы хотите изменить название класса, то изменять его нужно у всех ссылок и у подключения к плагину $(".image-modal").fancybox();

Интересное

Комментарии