Август 2017
Автор: Рубрика: Верстка Комментариев нет

Fotorama плагин фотогалерея для сайта

Fotorama плагин фотогалерея для сайта

Скачаем плагин fotorama с одноименного сайта.

Перед версткой подключим fotorama к нашему проекту.

Зайдем в libs.sass пропишем путь к fotorama.css и добавим путь к fotorama.js файлу в gulpfile.js.


добавим путь к fotorama.js

Задаем section в html

Зададим section с классом sec.

У нас будет темный фон и белые буквы это называется вывертка, поэтому зададим класс inverse.

Картинку фона затемним верхним слоем, для этого зададим класс overley.

Фон будет сделан инлаиновым тегом style=background-image: url (img/img10.jpg).

Разобьем секцию на две колонки.

  1. в первой колонке будет описание к картинкам
  2. во второй будет фотогалерея

Если есть колонки, значит есть bootstrap сетка.

Задаем container и строку row.

Внутри расположим див из 5 и 7 колонок.

Для текста подойдет пять колонок col-md-5.

У любого текста есть заголовок h2 и текст в теге p. Первая колонка в index.html.

в первой колонке будет описание к картинкам

Сделаем вторую колонку с fotorama

Семь колонок bootstarp col-md-7.

Зададим класс sec-gall.

Класс fotorama сам автоматически определит, что этот контейнер для фотогалереи, этот класс будет родительским для тегов img.

Пропишем все картинки, для галереи тегами img src=img/img1.jpg.

Зададим параметры fotorama через атрибуты data-nav и его значение параметра thumbs.

  • dadta-thumbwidth="120" ширина тамба
  • data-thumbheights="70" высота
  • data-thumbborderwidth="5" ширина бордюра
  • data-thumbmargin="10" отступы у тамбов

Сделаем вторую колонку с fotorama

Стилизуем css у fotorama

  1. Зададим белый цвет классу inverse
  2. Вторым зададим отступы в процентах для sec секции padding: 5% 0
  3. Наложим на картинку верхний затемняющий серый фон overley. Для того, чтобы увидеть картинку под ним сделаем прозрачность opacity: .90

Стилизуем css у fotorama

Стилизуем родительский класс fotorama

Бекграунд делаем темным. Настраиваем картинки снизу.

Делаем position: absolute и bottom: 10px.

Отступы делаем снизу 0 по бокам 20 пикселей.

Для стилизации тамба зададим бордюр border: 3px #fff solid.

Цвет у рамки border сделаем красный.

Стилизуем родительский класс fotorama

Фотогалерея с плагином fotorama готова.

Получившийся код для index.html.

Получившийся код для css.

Скачать картинки.

Комментариев нет

Комментарии:

Комментарии запрещены