Сегодня мы продолжаем изучать создание landing-page и в данной статье я рассмотрю ключевые моменты по верстке всплывающих изображений (fancybox) и создание быстрых ссылок для сайта landing-order.ru.

Верстка всплывающих изображений для сайта landing-order.ru fancybox

Скачиваем плагин fancybox по этой ссылке и, распаковав архив, копируем папку Source в папку fancybox на сервере.

Затем нужно подключить 2 файла: jquery.fancybox.css и jquery.fancybox.js (либо сжатую версию —  jquery.fancybox.pack.js)

В данном случае, мы затрагиваем только файл functions.js и потому заносим в него следующий код:

Верхняя часть кода нужна для того, чтобы при открывании изображения, верхнее меню НЕ сдвигалось в сторону.

Быстрые ссылки



Теперь мы сделаем так, чтобы переход  через меню на разный раздел странички был плавным. А также — чтобы верхнее меню не закрывало собой название раздела (после перехода).

Для этого в файл functions.js нам нужно добавить следующий код:

В следующий раз мы добавим анимацию — не пропустите!