Intense Template Documentation

Расширения

RD Calendar. Календарь с поддержкой событий

Intense использует расширение RD Calendar для реализации календаря. Базовая HTML разметка календаря выглядит следующим образом:


        <div class="rd-calendar">
            <div class="rdc-panel">
                <a class="rdc-next"></a>
                <a class="rdc-prev"></a>
                <div class="rdc-today_day"></div>
                <div class="rdc-today_date"></div>
                <div class="rdc-today_month"></div>
                <div class="rdc-today_fullyear"></div>
                <div class="rdc-month"></div>
                <div class="rdc-fullyear"></div>
            </div>
            <div class="rdc-table"></div>
            <div class="rdc-events">
                <a class="rdc-events_close"></a>
                <ul>
                    <li class="rdc-event" data-date="10/28/2015">
                        Event 1
                    </li>
                    <li class="rdc-event" data-date="10/31/2015">
                        Event 2
                    </li>
                </ul>
            </div>
        </div>

Карта классов для создания HTML разметки

RD Calendar поддерживает следующие структурные еденицы для создания разметки календаря:

.rdc-today_day

отображает текущий день недели;
.rdc-today_date

отображает текущий день месяца;
.rdc-today_month

отображает текущий месяц;
.rdc-today_fullyear

отображает текущий год;
.rdc-panel

отображает информационную панель;
.rdc-prev

отображает переключатель предыдущего месяца календаря;
.rdc-next

отображает переключатель следующего месяца календаря;
.rdc-month

отображает месяц календаря;
.rdc-fullyear

отображает год календаря;
.rdc-table

отображает таблицу дней месяца;
.rdc-table_day

отображает день недели каледаря;
.rdc-table_date

отображает день месяца каледаря;
.rdc-table_events

отображает события в дне месяца каледаря;
.rdc-table_has-events

отображает день каледаря, который содержит события;
.rdc-table_events-count

отображает количество событий в дне календаря;
.rdc-table_event

отображает событие в дне месяца каледаря;
.rdc-table_today

отображает текущий день месяца в календаре;
.rdc-table_prev

отображает дни предыдущего месяца календаря;
.rdc-table_next

отображает дни следующего месяца календаря;

Настройка формата вывода дней недели

По умолчанию дни недели в RD Calendar выводятся в следующем формате.

Sun, Mon, Tue, Wed, Thu, Fri, Sat

Для определения персонального формата вывода дней недели необходимо воспользоваться дата атрибутом data-days для целевого календаря в HTML разметке в виде строки с разделением дней запятыми:


        <div class="rd-calendar" data-days="Sn, Mn, Te, Wd, Th, Fr, St">
            ...
        </div>

Обратите внимание: формат вывода в RD Calendar может быть совершенно любым. Вы просто указываете нужное Вам наименование: любой текст на любом языке в формате, предложенном в примере (текст, разделенный запятыми).

Настройка формата вывода месяцев года

По умолчанию месяцы года в RD Calendar выводятся в следующем формате:

January, February, March, April, May, June, July, August, September, October, November, December

Для определения персонального формата вывода дней недели необходимо воспользоваться дата атрибутом data-months для целевого календаря в HTML разметке в виде строки с разделением месяцев запятыми:


        <div class="rd-calendar" data-months="Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec">
            ...
        </div>

Обратите внимание: формат вывода в RD Calendar может быть совершенно любым. Вы просто указываете требуемое Вам именование: любой текст на любом языке в формате, предложенном в примере (текст, разделенный запятыми).

Работа с событиями в календаре

Для того чтобы привязать некоторое событие к определенному дню в календаре, необходимо определить соответствующую разметку события в списке событий целевого календаря:


        <!-- RD Calendar -->
        <div class="rd-calendar">
            ...
            <!-- Events List Holder -->
            <div class="rdc-events">
                ...
                <!-- Events List -->
                <ul>
                    <!-- Create Event -->
                    <li class="rdc-event" data-date="10/28/2015">
                        Event 1
                    </li>
                </ul>
            </div>
        </div>

Обратите внимане, что атрибут data-date="10/28/2015" элемента .rdc-event является обязательным и имеет формат MM/DD/YYYY, в инном случае скрипт не определит день с описанным внутри событиями и не отобразит их в календаре. Само событие может содержать любую вложенную разметку.

RD Parallax

Intense используют расширение RD Parallax для реализации параллакс-эффектов на странице.

Базовая разметка скрипта выглядит следующим образом:


        <!-- RD Parallax -->
        <section class="rd-parallax">
            <div class="rd-parallax-layer" data-speed="0.2" data-type="media"
                 data-url="path/to/your-image.jpg"></div>
            <div class="rd-parallax-layer" data-speed="0.3" data-type="html" data-fade="true">
                ...
            </div>
        </section>
        <!-- END RD Parallax-->

Каждый элемент параллакса представляет собой отдельный слой. Слоев может быть неограниченное количество.

Настройка типа слоя

Для настройки типа слоя необходимо использовать атрибут data-type. Атрибут data-type может принимать значения media, html. Эта настройка определяет тип слоя параллакса. Если тип слоя определен как media, будет производиться расчет размера слоя относительно высоты секции параллакса, если как html - размер определяется содержимым.

Например:


        <div class="rd-parallax-layer" data-speed="0.2" data-type="media">

Настройка скорости слоя

Для настройки скорости слоя необходимо использовать атрибут data-speed. Атрибут data-speed может принимать значения от 0 до 2. тот атрибут определяет скорость движения параллакса относительно движения полосы прокрутки. Так, если значение скорости равно 1, получаем эмуляцию css свойства background-attachment: fixed.

Например:


        <div class="rd-parallax-layer" data-speed="0.2" data-type="media">

Настройка размытия слоя

Для настройки размытия слоя необходимо использовать атрибут data-blur. Атрибут data-blur может принимать значения true, false. Атрибут нужно определить как true, чтобы включить размытие изображения в случае, если размер изображения слишком маленький для качественного отображения в секции параллакса.


        <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-blur="true">

Настройка направления движения слоя

Для настройки направления движения слоя необходимо использовать атрибут data-direction.

Атрибут data-direction может принимать значения inverse, normal.

Определяет направление движения слоя параллакс. Если он определен как normal - параллакс будет двигаться параллельно скроллу, если inverse - в противоположном направлении.

Например:


        <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-direction="inverse">

Настройка фонового изображения медиа-слоя

Для того, чтобы разместить фоновое изображение внутри медиа-объекта, просто укажите дата атрибут data-url.

Например:


        <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-url="path/to/your-image.jpg">

Настройка эффекта проявки HTML слоя

Для настройки эффекта проявки HTML слоя необходимо использовать атрибут data-fade

Атрибут data-fade может принимать значения true, false.

Если задано значение true, слой будет постепенно проявляться из полной прозрачности в полную непрозрачность в зависимости от позиции прокрутки слоя.

Например:


        <div class="rd-parallax-layer" data-speed="0.2" data-type="media" data-fade="true">

Работа с пользовательским содержимым слоя

Блок с атрибутом data-type="media" может содержать любое пользовательское содержимое, например , различные скрипты слайдеров, фоновое видео и т.д. Для того чтобы разместить пользовательское содержимое внутри медиа объекта, просто не указывайте атрибут data-url.

Например:


        <div class="rd-parallax-layer vide" data-speed="0.2" data-type="media">

RD Mailform

Вы можете использовать любые элементы форм, представленные на странице Components > Toolkit Components > Form Elements для реализации контактных форм с нестандартным набором полей. Вы также можете использовать любые элементы Bootstrap, связанные с формами, которые представлены на официальной странице Bootstrap , а также элементы Bootstrap Grid и Flex Grid для реализации нестандартной структуры формы.

Обратите внимание: в RD Mailform <input type="email" name="email"> является обязательным для работы формы. В случае отсутствия данного поля , будет выведена соответствующая ошибка при попытке отправки формы.

Базовая разметка для создания стандартной формы поиска выглядит следующим образом:


        <form data-form-output="form-output-global" method="post"
                        action="bat/rd-mailform.php" class="rd-mailform">
            <div class="form-group">
                <label for="contact-us-name" class="form-label form-label-outside">Name:</label>
                <input id="contact-us-name" type="text" name="name"
                        data-constraints="@Required" class="form-control">
            </div>
            <div class="form-group">
                <label for="contact-us-email" class="form-label form-label-outside">E-Mail:</label>
                <input id="contact-us-email" type="email" name="email"
                        data-constraints="@Required @Email" class="form-control">
            </div>
            <div class="form-group">
                <label for="contact-us-message" class="form-label form-label-outside">Message:</label>
                <textarea id="contact-us-message" name="message"
                        data-constraints="@Required" class="form-control"></textarea>
            </div>
            <div class="group-sm text-center text-lg-left offset-top-30">
                <button type="submit" class="btn btn-primary">Send</button>
                <button type="reset" class="btn btn-default">Reset</button>
            </div>
        </form>

Настройка типа почтовой формы

RD Mailform поддерживает три типа почтовой формы:

Контактная форма

contact;
Форма заказа

order;
Форма подписки

subscribe;

Для того чтобы изменить тип контактной формы, необходимо в HTML разметке целевой формы добавить атрибут data-form-type, где в качестве значения указывается тип формы.


        <form class='rd-mailform' data-form-type="contact" method="post" action="bat/rd-mailform.php">
            ...
        </form>

Настройка полей формы

Почтовая форма RD Mailform поддерживает следующие типы полей:

Текстовое поле


                ...
                <div class="form-group">
                    <label for="contact-us-name" class="form-label form-label-outside">Name:</label>
                    <input id="contact-us-name" type="text" name="name"
                            data-constraints="@Required" class="form-control">
                </div>
                ...

Меню выбора даты и времени. Данное меню поддерживает 3 вида отображения:

Выбор времени

time;
Выбор даты

date;
Выбор даты и времени

datetime.

Для того чтобы указать один из видов отображения, воспользуйтесь атрибутом date-time-picker с необходимым вам значением.


                        ...
                        <div class="form-group">
                         <label for="rd-mailform-time" class="form-label form-label-outside">Time:</label>
                             <input id="rd-mailform-time" type="text" name="time"
                        date-time-picker="time" class="form-control">
                        </div>
                        ...

Простое меню выбора


                ...
                <div class="form-group">
                    <label for="select" class="form-label form-label-outside">Gender:</label>
                    <select id="select" data-placeholder="Select an option"
                            data-minimum-results-for-search="Infinity" class="form-control">
                        <option>Male</option>
                        <option>Female</option>
                    </select>
                </div>
                ...

Меню выбора c подкатегориями


                ...
                <div class="form-group">
                    <select data-placeholder="Select an option"
                            data-minimum-results-for-search="Infinity" class="form-control select-filter">
                        <optgroup label="Category 1">
                            <option>Demo Item 1-1</option>
                            <option>Demo Item 1-2</option>
                            <option>Demo Item 1-2</option>
                        </optgroup>
                        <optgroup label="Category 2">
                            <option>Demo Item 2-1</option>
                            <option>Demo Item 2-2</option>
                            <option>Demo Item 2-3</option>
                        </optgroup>
                    </select>
                </div>
                ...

Текстовая область


        ...
        <div class="form-group">
            <label for="message" class="form-label form-label-outside">Message:</label>
            <textarea id="message" name="message" data-constraints="@Required"
                                                    class="form-control"></textarea>
        </div>
        ...

Настройка валидации полей формы

Для динамической валидации полей формы используется библиотека Regula. Ссылку на документацию по даной библиотеке вы можете найти в разделе Credits.

Настройка информационных сообщений формы

Контактная форма RD Mailform поддерживает настройку информационных сообщений об успешной/неудачной отправке формы.

Для того чтобы изменить некоторые информационные сообщения по умолчанию, необходимо в файле инициализации скриптов script.js в модуле RD Mailform внести соответствующие правки в поле msg целевого типа валидации:


        msg = {
        'MF000': 'Successfully sent!',
        'MF001': 'Recipients are not set!',
        'MF002': 'Form will not work locally!',
        'MF003': 'Please, define email field in your form!',
        'MF004': 'Please, define type of your form!',
        'MF254': 'Something went wrong with PHPMailer!',
        'MF255': 'Aw, snap! Something went wrong.'
        };

Настройка SMTP сервера

Настройка SMTP сервера никоим образом не относится к настройке почтовой формы RD Mailform.

Для отправки сообщений с помощью SMTP сервера Вам необходимо обратиться к оффициальной документации PhpMailer (библиотеки, которая используется для отправки почты) или воспользоваться туториалом из оффиальной документации.

http://phpmailer.worxware.com

Обратите внимание: расширение контактной формы не работает на локальном сервере. Для отправки почты необходимо загрузить ваш сайт на соответствующий хостинг-сервер.

Настройка защиты от спама и злоупотреблений.

RD Mailform использует расширение Google reCAPTCHA для защити от спама.

Обратите внимание: для того что бы убрать Google reCAPTCHA, достаточно удалить область html разметки, выделенную комментариями "" - "".

Начало работы с Google ReCaptcha.

Для работы с Google ReCaptcha Вам необходимо:

Зарегистрировать Ваш домен на сайте Google reCaptcha и получить пару API ключей (пара ключей состоит из site key и secret).
Указать ваши API ключи в файле bat/reCaptcha.php в соответствующих переменных $siteKey и $secret в начале файла:
```
        $siteKey = 'You site key here';
        $secret = 'You secret key here';
      
```
Вставить разметку в html, указав в дата-атрибуте data-sitekey="" в ваш site key.

Более детальную информацию Вы можете получить на официальном сайте Google ReCaptcha.

Разметка Google ReCaptch

Базовая разметка для ReCaptcha выглядит следующим образом:


    <!--Google captcha-->
    <div class="form-group">
      <div id="captcha1" data-sitekey="You site key here" class="recaptcha"></div>
    </div>
    <!-- End google captcha-->

Обратите внимание: наличие атрибута id и класса .recaptcha является обязательным.

Настройка Google ReCaptcha

Google Recaptcha поддерживает следующие настройки:

Изменение размера;
Изменение цветовой схемы.

Изменение размера Google ReCaptcha

Для измения размера виджета, необходимо указать в дата-атрибуте data-size один из возможных вариантов размера:

compact;
normal (значение по умолчанию).

Пример кода выглядит следующим образом:


    <!--Google captcha-->
    <div class="form-group">
      <div id="captcha1"
           data-sitekey="You site key here"
           data-size="compact"
           class="recaptcha"></div>
    </div>
    <!-- End google captcha-->

Изменение цветовой схемы виджета Google ReCaptcha

Для изменения цветовой схемы виджета, необходимо указать в дата-атрибуте data-theme один из возможных вариантов:

dark;
light (значение по умолчанию).

Пример кода выглядит следующим образом:


    <!--Google captcha-->
    <div class="form-group">
      <div id="captcha1"
           data-sitekey="You site key here"
           data-theme="dark"
           class="recaptcha"></div>
    </div>
    <!-- End google captcha-->

RD Google Maps

С версии Intense 3, RD Google Maps больше не поддерживается и был заменен скриптом Google Maps.

Intense использует плагин RD Google Maps для реализации Google Maps.

Плагин поддерживает следующие настройки:

Замена координат карты;
Добавление пользовательких маркеров на карту;
Добавление всплывающих окон к маркерам;
Пользовательскую стилизацию карты;
Поиск по карте;

Как добавить поиск по карте

RD Google Map поддерживает возможность добавление поиска по карте.

Чтобы включить поиск по карте, необходимо добавить текстовое поле с id "rd-google-map-address" и кнопку с id "rd-google-map-address-submit".

Полный пример кода карты с поиском будет выглядеть следующим образом:


    <!--Google map search-->
    <div class="form-group">
      <label for="rd-google-map-address" class="form-label rd-input-label">Address</label>
      <div class="input-group">
        <input id="rd-google-map-address"
                  type="text" name="address"
                  data-constraints="@Required"
                  placeholder="" autocomplete="off"
                  class="form-control
                  form-control-has-validation">
          <span class="input-group-btn">
          <a id="rd-google-map-address-submit" href="#" class="btn btn-primary">Find Address</a>
          </span>
      </div>
    </div>
    <!-- RD Google Map-->
    <div class="rd-google-map">
      <div id="rd-google-map"
              data-zoom="15"
              data-x="-73.9874068"
              data-y="40.643180"
              data-styles="[]"
              class="rd-google-map__model">
      </div>
      <ul class="map_locations">
        <li data-x="-73.9874068" data-y="40.643180">
          <p>9870 St Vincent Place, Glasgow, DC 45 Fr 45.</p>
        </li>
      </ul>
    </div>

Как изменить координаты карты

Для замены координат карты на нужные Вам необходимо в .html файле с картой в блоке:


        <!-- RD Google Map-->
        <div id="google-map" class="map_model">
            ...
        </div>

указать два data атрибута: data-x (северная широта) и data-y (западная долгота). В результате, у Вас получится следующая строка кода:


        <!-- RD Google Map-->
        <div class="rd-google-map">
            <div id="google-map" class="map_model" data-x="-73.9994068" data-y="40.643180">
                ...
            </div>
            ...
        </div>

Нужные Вам координаты можно получить при помощи сервиса Google Maps. Для этого необходимо в целевом участке карты нажать на правую кнопку мышки и выбрать пункт “Что здесь”. В открывшемся модальном окне необходимые координаты будут под названием места, где первое число - это data-x, второе - data-y.

Внимание: также обращаем ваше внимание на то, что часто координаты путают местами и карта показывает неправильный адрес в другом полушарии Земли.

Как добавить маркер на карту

Для того чтобы добавить пользовательский маркер на карту, необходимо в .html файле с картой в список:


        <!-- RD Google Map-->
        ...
        <ul class="map_locations">
            ...
        </ul>
        ...

добавить новый пункт и определить в него два data атрибута: data-x (северная широта) и data-y (западная долгота). В результате получится:


        <!-- RD Google Map-->
        ...
        <ul class="map_locations">
            <li data-x="-73.9994068" data-y="40.643180"></li>
        </ul>
        ...

Без указанных координат скрипт проигнорирует пустой пункт списка и маркер не отобразится.

Полный примера кода будет выглядеть следующим образом:


        <!-- RD Google Map-->
        <div class="rd-google-map">
            <div id="google-map" class="map_model"></div>

            <ul class="map_locations">
                <li data-x="-73.9874068" data-y="40.643180">
                    <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                        <span>800 2345-6789</span>
                    </p>
                </li>
                <li data-x="-72.9874068" data-y="39.643180">
                    <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                        <span>800 2345-6789</span>
                    </p>
                </li>
            </ul>
        </div>

где:


        <!-- RD Google Map-->
        ...
        <li data-x="-73.9874068" data-y="40.643180">
            <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                <span>800 2345-6789</span>
            </p>
        </li>
        ...

Представляет собой новый маркер на карте.

Добавление всплывающих окон к маркерам

Для добавления всплывающего окна к пользовательскому маркеру достаточно просто указать содержимое всплывающего окна в соответствующем пункте списка маркеров карты:


        <!-- RD Google Map-->
        ...
        <li data-x="-73.9994068" data-y="40.643180" >
            ...
        </li>
        ...

В результате получится строка кода:


        <!-- RD Google Map-->
        ...
        <li data-x="-73.9994068" data-y="40.643180" >
            Наше представительство
        </li>
        ...

Как заменить стилизацию карты

RD Google Map поддерживает множество различных вариантов стилизации карты. Вы можете получить различные готовые варианты стилизации на сайте: https://snazzymaps.com/.

На данном сайте Вам необходимо скопировать массив стилей понравившейся карты и вставить его в атрибут data-style соответствующей карты на целевой *.html странице:


        <!-- RD Google Map-->
        <div id="google-map" class="map_model" data-styles='Your Map Styles'>
            ...
        </div>

Google Maps

Плагин поддерживает следующие настройки:

Установка ключа Google API для карты;
Изменение масштаба карты;
Изменение центра карты по адресу или координатам;
Установка стиля карты;
Добавление маркеров на карту;

Установка ключа для карты

Без ключа ваша карта будет работать в демо режиме, инструкцию по получению можно найти на сайте developers.google.com

Полученный клуч нужно вписать в атрибут data-key:


<!-- Google Map-->
<div class="google-map-container" data-key="ВАШ_API_КЛЮЧ">
    <div class="google-map"></div>
</div>

Как изменить координаты центра карты

Для замены координат центра карты на нужные Вам необходимо в .html файле с картой в блоке:


<!-- Google Map-->
<div class="google-map-container">
    <div class="google-map"></div>
</div>

указать в атрибуте data-center нужный адрес. В результате, у Вас получится следующий код:


<!-- Google Map-->
<div class="google-map-container" data-center="9870 St Vincent Place, Glasgow, DC 45 Fr 45.">
    <div class="google-map"></div>
</div>

Как добавить маркер на карту

Для того чтобы добавить свой маркер на карту, необходимо в .html файле с картой в список:


<!-- Google Map-->
...
<ul class="google-map-markers">
    ...
</ul>
...

добавить новый пункт с атрибутом data-location. В результате получится:


<!-- Google Map-->
...
<ul class="google-map-markers">
    <li data-location="9870 St Vincent Place, Glasgow, DC 45 Fr 45."></li>
</ul>
...

Добавление описания к маркеру

Для добавления всплывающего окна к пользовательскому маркеру нужно указать содержимое для окна в атрибуте data-description:


<!-- Google Map-->
...
<li data-location="9870 St Vincent Place, Glasgow, DC 45 Fr 45." data-description="9870 St Vincent Place, Glasgow"></li>
...

Как заменить стилизацию карты

Карта поддерживает множество различных вариантов стилизации. Вы можете получить различные готовые варианты стилизации на сайте: https://snazzymaps.com/.

На данном сайте Вам необходимо скопировать массив стилей понравившейся карты и вставить его в атрибут data-styles соответствующей карты на целевой *.html странице:


<!-- Google Map-->
<div class="google-map-container" data-styles='Your Map Styles'>
    ...
</div>

RD Video Player

Intense использует расширение RD Video Player для реализации собственного видеоплеера.

Добавление видеоплеера на страницу

Для добавления видеоплеера на целевую HTML страницу необходимо воспользоваться следующей разметкой:


        <div data-rd-video-path="path/to/video" class="rd-video-player">
            <div class="rd-video-wrap embed-responsive-16by9">
                <div class="rd-video-preloader">< /div>
                <video preload="metadata">/video>
                <div class="rd-video-preview">/div>
                <div class="rd-video-top-controls">
                    <span class="rd-video-title"></span>
                    <a href="#" class="rd-video-fullscreen mdi mdi-fullscreen rd-video-icon"></a>
                </div>
                <div class="rd-video-controls">
                    <div class="rd-video-controls-buttons">
                        <a href="#" class="rd-video-prev mdi mdi-fast-forward rd-video-icon"></a>
                        <a href="#" class="rd-video-play-pause mdi mdi-play"></a>
                        <a href="#" class="rd-video-next mdi mdi-fast-forward rd-video-icon"></a>
                    </div>
                    <div class="rd-video-progress-bar"><  /div>
                    <div class="rd-video-time">
                        <span class="rd-video-current-time">< /span>
                        <span class="rd-video-time-divider">:</span>
                        <span class="rd-video-duration">< /span><  /div>
                    <div class="rd-video-volume-wrap">
                        <a href="#" class="rd-video-volume mdi mdi-volume-high rd-video-icon">/a>
                        <div class="rd-video-volume-bar-wrap">

                            <div class="rd-video-volume-bar"></div>
                        </div>
                    </div>
                </div>
            </div>

Вы можете внести изменения в данную разметку для изменения внешнего вида видеоплеера. Для работы плеера необходимы лишь классы для определенных элементах. Список данных классов с описанием указан ниже в виде карты классов:

Карта классов видеоплеера

.rd-video-prev

кнопка включения предыдущего видео;
.rd-video-play-pause

кнопка воспроизведения/паузы видео;
.rd-video-next

кнопка включения следующего видео;
.rd-video-stop

кнопка остановки видео;
.rd-video-progress-bar

полоса прогресса воспроизведения;
.rd-video-progress-bar-slider

ползунок на полосе прогресса;
.rd-video-duration

отображает длительность видео;
.rd-video-current-time

отображает текущее время воспроизведения;
.rd-video-title

отображает название видео;
.rd-video-fullscreen

кнопка включения/отключения полноэкранного режима;
.rd-video-volume

кнопка включения/отключения звука;
.rd-video-volume-bar

полоса громкости;
.rd-video-volume-bar-slider

ползунок полосы громкости;
.rd-video-playlist

список воспроизведения.

Замена видео в видеоплеере

Для замены видео необходимо в атрибуте data-rd-video-path указать путь к видео без формата. Данный атрибут не работает при наличии списка воспроизведения:


        <div data-rd-video-path="path/to/video" class="rd-video-player">
            ...
        </div>

Замена названия видео в видеоплеере

Для замены названия видео необходимо в атрибуте data-rd-video-title указать название видео. Данный атрибут не работает при наличии списка воспроизведения:


        <div data-rd-video-title="Your title" class="rd-video-player">
            ...
        </div>

Отключение звука видео по умолчанию в видеоплеере

Для отключения звука видео необходимо добавить атрибут data-rd-video-muted со значением true:


        <div data-rd-video-muted="true" class="rd-video-player">
            ...
        </div>

Настройка громкости по умолчанию в видеоплеере

Для того чтобы изменить громкость видео по умолчанию, необходимо добавить атрибут data-rd-video-volume. Значение может быть от 0 до 1:


        <div data-rd-video-path="path/to/video" class="rd-video-player" data-rd-video-volume="0.5">
            ...
        </div>

Вставка списка воспроизведения в видеоплеер

HTML разметка для создания списка воспроизведения выглядит следующим образом:


        <ul data-rd-video-play-on="li" class="rd-video-playlist">
            <li data-rd-video-src="path/to/video1" data-rd-video-title="title 1">
                ...
            </li>
            <li data-rd-video-src="path/to/video2" data-rd-video-title="title 2">
                ...
            </li>
        </ul>

Для привязки ссылки видео файла с элементом списка необходимо использовать следующие атрибуты:

data-rd-video-src

путь к видеофайлу без формата;
data-rd-video-title

название видео (дополнительный атрибут, необходимый в случае вывода названия видео в плеере).

RD Audio Player

Intense использует расширение RD Audio Player для реализации собственного аудиоплеера.

Добавление аудиоплеера на страницу

Для добавления аудиоплеера на целевую HTML страницу необходимо воспользоваться следующей разметкой:


        <div data-rd-audio-playlist-name="audio-playlist" class="rd-audio">
            <div class="rd-audio-controls">
                <div class="rd-audio-controls-left">
                    <a href="#" class="rd-audio-prev mdi mdi-fast-forward rd-audio-icon"></a>
                    <a href="#" class="rd-audio-play-pause mdi mdi-play rd-audio-icon has-controls"></a>
                    <a href="#" class="rd-audio-next mdi mdi-fast-forward rd-audio-icon"></a>
                </div>
                <div class="rd-audio-progress-bar-wrap">
                    <div class="rd-audio-progress-bar"></div>
                    <div class="rd-audio-time">
                        <span class="rd-audio-current-time">00:00</span>
                        <span class="rd-audio-time-divider">/</span>
                        <span class="rd-audio-duration">00:00</span>
                    </div>
                    <div class="rd-audio-title-wrap">
                        <span class="rd-audio-author"></span>
                        <span class="rd-audio-title-divider">- </span>
                        <span class="rd-audio-title"></span>
                    </div>
                </div>
                <a href="#" class="rd-audio-volume mdi mdi-volume-high rd-audio-icon"></a>
                <div class="rd-audio-volume-bar"></div>
                <div class="rd-audio-controls-right">
                    <a href="#" class="rd-audio-playlist-button rd-audio-icon mdi mdi-dots-horizontal"></a>
                </div>
            </div>
        </div>

Вы можете внести изменения в данную разметку для изменения внешнего вида аудиоплеера. Для работы плеера необходимы лишь классы определенных элементов. Данные классы с описанием указаны ниже в карте классов:

Карта классов аудиоплеера

.rd-audio-prev

кнопка включения предыдущего трека;
.rd-audio-play-pause

кнопка воспроизведения/паузы трека;
.rd-audio-next

кнопка включения следующего трека;
.rd-audio-stop

кнопка остановки трека;
.rd-audio-progress-bar

полоса прогресса воспроизведения;
.rd-audio-progress-bar-slider

ползунок на полосе прогресса;
.rd-audio-duration

отображает длительность трека;
.rd-audio-current-time

отображает текущее время воспроизведения;
.rd-audio-title

отображает название трека;
.rd-audio-author

отображает автора трека;
.rd-audio-volume

кнопка включения/отключения звука;
.rd-audio-volume-bar

полоса громкости;
.rd-audio-volume-bar-slider

ползунок полосы громкости;
.rd-audio-playlist

список воспроизведения.

Замена аудиотрека в аудиоплеере

Для замены аудиотрека необходимо в атрибуте data-rd-audio-src указать путь к аудиотреку. Данный атрибут не работает при наличии списка воспроизведения:


        <div data-rd-audio-src="path/to/audio" class="rd-audio">
            ...
        </div>

Загрузка списка воспроизведения в аудиоплеер

Данный плагин поддерживает возможность создания неограниченого количества списков воспроизведения на странице. Для загрузки определенного списка воспроизведения необходимо добавить атрибут data-rd-audio-playlist-name с указанием названия списка воспроизведения:


        <div data-rd-audio-playlist-name="name" class="rd-audio">
            ...
        </div>
        ...
        ...
        <ul data-rd-audio-playlist="name">
            ...
        </ul>

Принцип формирования списка воспроизведения указан ниже.

Замена названия аудиотрека в аудиоплеере

Для замены названия аудиотрека необходимо в атрибуте data-rd-audio-title указать название аудиотрека. Данный атрибут не работает при наличии списка воспроизведения:


        <div data-rd-audio-title="Your Title" class="rd-audio">
            ...
        </div>

Замена автора аудиотрека в аудиоплеере

Для замены автора аудиотрека необходимо в атрибуте data-rd-audio-author указать автора аудиотрека. Данный атрибут не работает при наличии списка воспроизведения:


        <div data-rd-audio-author="Your Author" class="rd-audio">
            ...
        </div>

Автовоспроизведение аудиотрека

Для включения автовоспроизведения необходимо добавить атрибут data-rd-audio-autoplay со значением true:


        <div data-rd-audio-autoplay="true" class="rd-audio">
            ...
        </div>

Зацикливание аудиотрека

Для включения зацикливания необходимо добавить атрибут data-rd-audio-loop со значением true:


        <div data-rd-audio-loop="true" class="rd-audio">
            ...
        </div>

Добавление списка воспроизведения в аудиоплеер

HTML разметка для создания списка воспроизведения выглядит следующим образом:


        <ul data-rd-audio-playlist="audio-playlist" data-rd-audio-play-on="li" class="rd-audio-playlist">
            <li data-rd-audio-src="path/to/audio1" data-rd-audio-title="title 1"
                                                                        data-rd-audio-author="author 1">
                ...
            </li>
            <li data-rd-audio-src="path/to/audio2" data-rd-audio-title="title 2"
                                                                        data-rd-audio-author="author 2">
                ...
            </li>
        </ul>

Разметка внутри элемента списка может быть произвольной. Для привязки ссылки на аудиотрек с элементом списка необходимо использовать следующие атрибуты:

data-rd-audio-src

путь к аудифайлу;
data-rd-audio-title

название аудиотрека (дополнительный атрибут, необходимый в случае отображения названия аудиотрека в плеере);
data-rd-audio-author

автор аудиотрека (дополнительный атрибут, необходимый в случае отображения автора аудиотрека в плеере).

RD Background Video

Intense используют расширение RD Background Video для создания фонового видео на странице.

Базовая разметка для создания фонового видео вгялдит следующим образом:


        <div
                data-rd-video-path="video/bg-video-1/bg-video-1"
                data-rd-video-image-xs="26"
                data-rd-video-image-sm="26"
                data-rd-video-image-md="37"
                data-rd-video-image-lg="74"
                data-rd-video-image-xlg="100"
                class="rd-video">
            ...
        </div>

Требования к файлам

Данный плагин отличается способностью адаптировать качество видео под скорость Интернета. Для этого Вам необходимо подготовить 5 вариантов видео с разными разрешениями для правильной работы скрипта, а также подготовить 5 вариантов изображений с расширением *.jpg для отображения заставки на мобильных устройствах или компьютеров со слабой скоростью Интернета.

Наименования файлов должны выглядеть следующим образом:

video-(суффикс).mp4
video-image-(суффикс).jpg

Список расширений и их суффиксов:

1920х1080 - xlg (video-xlg.mp4);
1280х720 - lg (video-lg.mp4);
854х480 - md (video-md.mp4);
640х360 - sm (video-sm.mp4);
380х240 - xs (video-xs.mp4).

В итоге, у Вас должны быть в наличии 10 файлов: 5 видео и 5 изображений.

Замена фонового видео

Для того чтобы заменить видео в HTML разметке, нужно изменить путь к видео в атрибуте data-rd-video-path. При этом, расширение видео указывать не нужно, достаточно указать только название файла, скрипт сам выберет соответствующий формат.

Например:


        <div data-rd-video-path="video/bg-video-1/bg-video-1"></div>

Так же для правильного просчета скорости Интернета необходимо с помощью атрибутов указать размер каждой картинки в килобайтах. Суффиксы для атрибутов указаны в пункте "Требования к файлам". Например:


        <div
                data-rd-video-path="video/bg-video-1/bg-video-1"
                data-rd-video-image-xs="26" data-rd-video-image-sm="26"
                data-rd-video-image-md="37"
                data-rd-video-image-lg="74"
                data-rd-video-image-xlg="100"
                class="rd-video">
            ...
        </div>

RD Flickr Gallery

Intense используют расширение RD Flickrgallery для получения данных с сервиса https://www.flickr.com/ на веб-странице.

Вставка виджета на страницу

Базовая HTML разметка виджета для вывода одного элемента выглядит следующим образом:


        <div class="flickr" data-flickr-id="47302490@N05">
            <div data-type="flickr-item">
                <img data-image_q="src" data-title="alt" src="images/_blank.png" alt=""/>
            </div>
        </div>

Вы можете вывести неограниченное количество элементов или использовать данный виджет несколько раз на странице. Так же, данное расширенное можно интегрировать с любым сторонним скриптом (например: карусель, галерея и т.д.) HTML структура внутри виджета произвольная. Например, Вы можете использовать ТМ Grid систему для удобного расположения элементов. Обязательным является только наличие элемента с атрибутом data-type="flickr-item".

Настройка профиля пользователя Flickr

Для того чтобы указать пользователя, необходимо указать идентификатор пользователя сервиса в атрибуте data-id. Например:


        <div class="flickr" data-flickr-id="47302490@N05">

Идентфикатор пользователя сервиса можно получить по следующей ссылке:

http://idgettr.com/.

Для того чтобы получить данные с нескольких профилей пользователей, укажите их в атрибуте data-id через запятую.

Настройка фильтрации данных

Для того чтобы отфильтровать данные по определенным тегам, необходимо добавить атрибут data-tags. Для указания нескольких тегов, введите их через запятую. Например:


        <div class="flickr" data-flickr-id="47302490@N05,48444528@N07"
                            data-flickr-tags="webdesign, baseball" data-flickr-tagmode="any">

где атрибут data-flickr-tagmode отвечает за тип фильтрации по тегам и принимает 2 значения:

any

вывод элемента, если он соответствует хотя бы одному из тегов;
all

вывод элемента, который соответствует всем тегам.

Настройка формата вывода даты

Дла того, чтобы настроить формат вывода даты, необходимо добавить атрибут data-flickr-date-format. Например:


        <div class="twitter" data-flickr-date-format="%b/%d/%Y">

где

%d

вывод числа(1,2,3);
%Y

вывод полного формата года(2011, 2013, 2015);
%y

вывод последних 2 цифр года(11, 13, 15);
%m

вывод номера месяца(1,2,3);
%B

вывод полного названия месяца(January,February, March);
%b

вывод сокращенного названия месяца(Jan, Feb, Mar). По умолчанию дата выводится в формате Oct/30/2015.

По умолчанию дата выводится в формате Oct/30/2015.

Настройка языка данных

Для изменения языка содержимого, укажите атрибут data-lang. Например:


        <div class="flickr" data-flickr-id="47302490@N05,48444528@N07" data-flickr-lang="en-us">

Допустимые значения:

de-de

немецкий язык;
en-us

английский язык;
es-us

испанский язык;
fr-fr

французкий язык;
it-it

итальянский язык;
ko-kr

корейский язык;
pt-br

португальский язык;
zh-hk

китайский язык.

Создание корректной структуры элемента виджета

Получить данные элемента возможно только внутри блока с атрибутом data-type="flickr-item". Например:


        <div data-type="flickr-item">
            <img data-image_q="src" data-title="alt" src="images/_blank.png" alt=""/>
        </div>

Логика работы виджета

Для получение данных об элементе виджета необходимо указать следующий атрибут:

data-(название данных)="target"

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

Вывод картинки элемента

Для получения ссылки на картинку сервиса необходимо указать аттрибут data-image_(суффикс картинки)="src". Например:


        <img data-image_q="src" data-title="alt" src="images/_blank.png" alt=""/>

С помощью суффикса картинки Вы можете указать желаемый размер полученной картинки. Доступны следующие значение:

s: 75px75px;
q: 150pх150px;
t: 100px по большей стороне;
m: 240px по большей стороне;
n: 320px по большей стороне;
-: 500px по большей стороне;
z: 640px по большей стороне;
c: 800px по большей стороне;
b: 1024px по большей стороне;
h: 1600px по большей стороне;
k: 2048px по большей стороне;
o: оригинальная картинка.

Вывод ссылки на элемент

Для получения ссылки на картинку сервиса необходимо указать атрибут data-link="href,text". Например, для вывода ссылки с текстом ссылки, используйте следующий код:


        <a href="#" data-link="href,text"></a>

Отображение автора элемента

Для отображения автора элемента с указанием адреса электронной почты, необходимо указать атрибут data-author_name="text". Например:


        <p data-author_name="text"></p>

Для отображения автора элемента без указания адреса электронной почты, необходимо указать атрибут data-author="text". Например:


        <p data-author="text"></p>

Отображение тегов элемента

Для получения тегов элемента необходимо указать атрибут data-tags="text". Например:


        <p data-tags="text"></p>

Отображение названия элемента

Для отображения названия элемента необходимо указать атрибут data-title="text". Например:


        <p data-title="text"></p>

Отображение даты добавления

Для отображения даты добавления элемента необходимо указать атрибут data-dating="text". Что отобразить дату в формате YY-MM-DD, необходимо указать атрибут data-datetime="text".Например:


        <time data-dating="text" data-datetime="datetime"></time>

Отображение описания элемента

Для отображения описания элемента необходимо указать атрибут data-description="text". Например:


        <p data-description="text"></p>

RD Twitterfeed

Intense использует расширение jquery.rd-twitter-feed.js для получения данных с сервиса https://twitter.com/ на веб-странице.

Добавление виджета на страницу

Базовая HTML разметка виджета для вывода одного элемента выглядит следующим образом:


        <div class="twitter" data-twitter-username="templatemonster">
            <div data-twitter-type="tweet">
                <img data-media_url="src" src="images/_blank.png" alt=""/>
                <p data-tweet=text></p>
            </div>
        </div>

Вы можете отобразить неограниченное количество элементов или использовать данный виджет несколько раз на странице. Так же, данное расширенное можно интегрировать с любым сторонним скриптом (например: карусель, галерея и т.д.). HTML структура внутри виджета произвольная. Например, Вы можете использовать ТМ Grid систему для удобного расположения элементов. Обязательно только наличие элемента с атрибутом data-twitter-type="tweet".

Настройка проекта для работы с Twitter API

Для работы с Twitter API Вам необходимо создать приложение со своего профиля пользователя Twitter, создать ключи и записать их в файл bat/twitter_api/config.php. Список необходимых ключей:

CONSUMER_KEY;
CONSUMER_SECRET;
ACCESS_TOKEN;
ACCESS_SECRET.

Файл config.php:


        // Consumer Key
        define('CONSUMER_KEY', 'Put CONSUMER_KEY here ');
        define('CONSUMER_SECRET', 'Put CONSUMER_SECRET here');

        // User Access Token
        define('ACCESS_TOKEN', 'Put ACCESS_TOKEN here');
        define('ACCESS_SECRET', 'Put ACCESS_SECRET here');

Локальное использование

При запуске проекта с файловой системы плагин работать не будет, так как для работы плагина необходим PHP версии 5.2+. При использовании на локальном сервере, данные с сервиса Twitter не будут получены, так как сервис аутентификации Твиттера не может получить доступ к локальным данным. Вместо этого, будут показаны тестовые данные, идентичные полученным из Твиттера. При загрузке проекта на рабочий сервер будут получены реальные данные.

Настройка профиля пользователя Twitter

Для того чтобы указать пользователя, необходимо записать имя пользователя сервиса в атрибут data-twitter-username. Например:


        <div class="twitter" data-twitter-username="templatemonster">

Настройка вывода твитов по хештегу:

Для того, чтобы отфильтровать твиты по хештегу, необходить записать его название в атрибут data-twitter-hashtag. Например:


        <div class="twitter" data-twitter-hashtag="webdesign">

Внимание! Вывод твитов возможен только по хештегу или имени пользователя.

Натройка вывода твитов из списка:

Для того чтобы отфильтровать твиты по списку, необходимо записать его название в атрибут data-twitter-listname и указать имя пользователя при помощи атрибута data-twitter-username. Например:


        <div class="twitter" data-twitter-username="templatemonster" data-twitter-listname="templatemonster">

Внимание! Вывод твитов по списку возможен только при наличии имени пользователя.

Настройка формата вывода даты

Если твит был добавлен недавно (до 2-х дней), найстройка формата вывода данных проводится следующим образом:

Если твит добавлен меньше минуты назад: Для того, чтобы настроить данный текст необходимо добавить атрибут data-twitter-date-seconds. Например:
```
                <div class="twitter" data-twitter-date-seconds="less 1m">
            
```
Если твит добавлен меньше часа назад: Для того чтобы настроить текст, выводимый возле количества минут (с момента добавления) необходимо добавить атрибут data-twitter-date-minutes. Например:
```
                <div class="twitter" data-twitter-date-minutes="m">
            
```
Если твит добавлен меньше суток назад: Для того чтобы настроить текст, выводимый возле количества часов (с момента добавления) необходимо добавить атрибут data-twitter-date-hours. Например:
```
                <div class="twitter" data-twitter-date-hours="h">
            
```
Если твит добавлен вчера: Для того чтобы настроить данный текст необходимо добавить атрибут data-twitter-date-yesterday. Например:
```
                <div class="twitter" data-twitter-date-yesterday="yd">
            
```
Если твитер добавлен более 2-х дней назад, чтобы настроить формат вывода данных необходимо добавить атрибут data-date-format. Например:
```
                <div class="twitter" data-twitter-date-format="%b/%d/%Y">
            
```
где
- %d
  
  вывод числа(1,2,3);
- %Y
  
  вывод полного формата года(2011, 2013, 2015);
- %y
  
  вывод последних 2 цифр года(11, 13, 15);
- %m
  
  вывод номера месяца(1,2,3);
- %B
  
  вывод полного названия месяца(January,February, March);
- %b
  
  вывод сокращенного названия месяца(Jan, Feb, Mar).
По умолчанию дата выводится в формате Oct/30/2015.

Создание корректной структуры элемента виджета

Отобразить данные элемента возможно только внутри блока с атрибутом data-type="tweet". Например:


        <div data-twitter-type="tweet">
            <img data-media_url="src" alt="" src="#"/>
            <div data-tweet="text"></div>
        </div>

Логика работы виджета

Для получение данных о твите необходимо прописать следующий атрибут: data-(название данных)="target" где target - атрибут, в который будут записаны данные. Если в target указать значение "text", данные будут выведены внутрь тега обычным текстом. Ниже указаны примеры для получение различных данных. Если необходимо записать значение данных в нескольких атрибутах, задайте их через запятую.

Отображение картинки твита

Для отображения картинки твита необходимо указать атрибут data-media_url="src". Например:


        <img data-media_url="src" src="#" alt=""/>

Обратите внимание, если в твите отсутсвует картинка, данный элемент будет удален с разметки. Если Вы хотите вывести 2 или больше картинок продублируйте данный код необходимое количество раз.

Отображение текста твита

Для отображения текста твита необходимо указать атрибут data-tweet="text". Например:


        <p data-tweet="text"></p>

Отображение даты добавления твита

Для отображения даты добавления необходимо указать атрибут data-date="text". Например:


        <div data-date="text"></div>

Для отображения даты в формате атрибута datetime тега time необходимо указать атрибут data-datetime="datetime".

Отображение аватарки пользователя

Для получения тегов аватарки необходимо указать атрибут data-avatar="src". Например:


        <img data-avatar="src" src="#" alt=""/>

Отображение ссылки на твит

Для получения названия элемента необходимо указать атрибут data-title="text". Например:


        <a data-url="href,text"></a>

Отображение логина пользователя

Для отображения логина пользователя в формате "@templatemonster" необходимо указать атрибут data-screen_name="text". Например:


        <div data-screen_name="text"></div>

Вывод имени пользователя

Для получения имени пользователя необходимо указать атрибут data-user_name="text". Например:


        <div data-user_name="text"></div>

RD Facebook Feed

Intense использует расширение jquery.rd-facebook-feed.js для получения данных с сервиса https://facebook.com/ на веб-странице.

Добавление виджета на страницу

Базовая HTML разметка виджета для вывода одного элемента выглядит следующим образом:


        <div class="facebook" data-fb-id="TemplateMonster" data-fb-access="...">
            <div data-fb-post>
                <img src="images/_blank.png" alt="" data-picture="src" data-remove/>
                <p data-message="text"></p>
            </div>
        </div>

Вы можете отобразить неограниченное количество элементов или использовать данный виджет несколько раз на странице. Так же, данное расширенное можно интегрировать с любым сторонним скриптом (например: карусель, галерея и т.д.). HTML структура внутри виджета произвольная. Например, Вы можете использовать систему ТМ Grid для удобного расположения элементов. Обязательным является только наличие элемента с атрибутом data-fb-post или data-fb-user.

Настройка проекта для работы с Facebook API

Для работы с Facebook API Вам необходимо создать приложение со своего профиля пользователя Facebook, получить AccessToken и указать его в атрибуте data-fb-access:


        <div class="facebook" data-fb-access="...">
        </div>

Настройка профиля пользователя Facebook

Для того чтобы указать пользователя, данные которого будут отображены, необходимо указать имя пользователя сервиса в атрибуте data-fb-id. Например:


        <div class="facebook" data-fb-id="TemplateMonster">

Настройка формата вывода даты

Если запись добавлена более 2-х дней назад, чтобы настроить формат вывода данных, необходимо добавить атрибут data-fb-date-format. Например:


        <div class="facebook" data-fb-date-format="%b/%d/%Y">

где:

%d

вывод числа(1,2,3);
%Y

вывод полного формата года(2011, 2013, 2015);
%y

вывод последних 2 цифр года(11, 13, 15);
%m

вывод номера месяца(1,2,3);
%B

вывод полного названия месяца(January,February, March);
%b

вывод сокращенного названия месяца(Jan, Feb, Mar).

По умолчанию дата выводится в формате Oct/30/2015.

Создание корректной структуры элемента виджета

Получить данные элемента возможно только внутри блока с атрибутом data-fb-post или data-fb-user. Например:


        <div data-fb-post>
            ...
        </div>

Логика работы виджета

Для получение данных о посте необходимо прописать следующий атрибут: data-(название данных)="target" где target - атрибут, в который будут записаны данные. Если в target указать значение "text", данные будут выведены внутри тега обычным текстом. Ниже указаны примеры для получение различных данных. Если необходимо записать значение данных в несколько атрибутов, задайте их через запятую.

Отображение картинки в посте

Для отображения картинки поста необходимо указать атрибут data-picture="src". Например:


        <img data-picture="src" src="_blank.png" alt=""/>

Отображение текста поста

Для получения текста поста необходимо указать атрибут data-message="text". Например:


        <p data-message="text"></p>

Отображение названия вложения

Для отображения названия вложения необходимо указать атрибут data-name="text". Например:


        <div data-name="text"></div>

Отображение описания вложения

Для получения тегов описания необходимо указать атрибут data-description="text". Например:


        <div data-description="text"></div>

Отображение количества лайков

Для отображения количества лайков необходимо указать атрибут data-likes-count="text". Например:


        <div data-likes-count="text"></div>

Отображение ссылки на пост

Для отображения ссылки на пост необходимо указать атрибут data-postlink="href". Например:


        <a href="#" data-postlink="href"></div>

Отображение аватарки пользователя

Для отображения аватарки пользователя необходимо указать атрибут data-from-picture="src". Например:


        <img data-from-picture="src" src="_blank.png" alt=""/>

Отображение имени пользователя

Для отображения имени пользователя необходимо указать атрибут data-from-picture="src". Например:


        <div data-from-name="text"></div>

RD Instafeed

Intense использует расширение RD Instafeed для отображения данных с сервиса https://www.instagram.com/ на веб-странице.

Добавление виджета на страницу

Базовая HTML разметка виджета для отображения одного элемента выглядит следующим образом:


        <section class="instafeed" data-instafeed-clientid="..."
                        data-instafeed-get="user" data-instafeed-user="1507096244">
            <div data-instafeed-item>
                <img src="images/_blank.png" alt="" data-images-low_resolution-url="src" />
            </div>
        </section>

Вы можете отобразить неограниченное количество элементов или использовать данный виджет несколько раз на странице. Так же, данное расширение можно интегрировать с любым сторонним скриптом (например: карусель, галерея и т.д.) HTML структура внутри виджета произвольная. Например, Вы можете использовать систему ТМ Grid для удобного расположения элементов. Обязательным является только наличие элемента с атрибутом data-instafeed-item.

Отображение изображений Instagram со страницы пользователя

Для того чтобы отобразить изображения со страницы пользователя, необходимо добавить атрибут data-instafeed-get="user" и ввести идентификатор пользователя сервиса в атрибут data-instafeed-user. Например:


        <section class="instafeed" data-instafeed-get="user" data-instafeed-user="1507096244">
            ...
        </section>

Идентификатор пользователя можно получить при помощи различных сервисов. Вотодин из них .

Отображение изображений Instagram по тегу

Для того чтобы отобразить изображения по тегу, необходимо добавить атрибут data-instafeed-get="tagged" и ввести название тега в атрибут data-instafeed-tagname. Например:


        <section class="instafeed" data-instafeed-get="user" data-instafeed-user="1507096244">
            ...
        </section>

Отображение информации о пользователе Instagram

ля того чтобы отобразить информацию о пользователе, необходимо добавить атрибут data-instafeed-get=”profile” и ввести идентификатор пользователя сервиса в атрибут data-instafeed-user. Например:


        <section class="instafeed" data-instafeed-get="profile" data-instafeed-user="1507096244">
            ...
        </section>

Настройка формата отображения даты

Для того чтобы настроить формат отображения даты, необходимо добавить атрибут data-instafeed-date-format. Например:


        <div class="instafeed" data-instafeed-date-format="%b/%d/%Y">

где

%d

вывод числа(1,2,3);
%Y

вывод полного формата года(2011, 2013, 2015);
%y

вывод последних 2 цифр года(11, 13, 15);
%m

вывод номера месяца(1,2,3);
%B

вывод полного названия месяца(January,February, March);
%b

вывод сокращенного названия месяца(Jan, Feb, Mar).

По умолчанию дата выводится в формате Oct/30/2015.

Создание корректной структуры элемента виджета

Получить данные элемента возможно только внутри блока с атрибутом data-instafeed-item. Например:


        <div data-instafeed-item>
            <img src="images/_blank.png" alt="" data-images-low_resolution-url="src" />
        </div>

Логика работы виджета

Для получение данных о элементе виджета необходимо прописать следующий атрибут: data-(название данных)="target" где target - атрибут, в который будут записаны данные. Если в target указать значение "text", данные будут выведены внутри тега обычным текстом. Ниже указаны примеры получения различных данных. Если необходимо записать значение данных в несколько атрибутов, задайте их через запятую.

Отображение картинки элемента

Для отображения ссылки на картинку сервиса необходимо указать атрибут data-images_(разрешение картинки)="src". Например:

Картинка 320х320:


            <img data-images_low_resolution-url="src" src="images/_blank.png" alt=""/>

Картинка 640х640:


            <img data-images_standard_resolution-url="src" src="images/_blank.png" alt=""/>

Картинка 150х150:


            <img data-images_thumbnail-url="src" src="images/_blank.png" alt=""/>

Отображение ссылки на элемент

Для отображения ссылки на картинку сервиса необходимо указать атрибут data-link="href,text". Например, для отображения ссылки с текстом ссылки используйте:


        <a href="#" data-link="href,text"></a>

Отображение тегов элемента

Для отображения тегов элемента необходимо указать атрибут data-tags_full="text". Например:


        <p data-tags_full="text"></p>

Отображение даты добавления

Для отображения даты добавления элемента необходимо указать атрибут data-dating=”text”. Чтобы отобразить дату в формате YY-MM-DD необходимо указать атрибут data-created_time=”text”. Например:


        <time data-created_time="text"></time>

Отображение описания элемента

Для отображения описания элемента необходимо указать атрибут data-caption-text="text". Например:


        <p data-caption-text="text"></p>

Отображение количества лайков

Для отображения количества лайков изображения необходимо указать атрибут data-likes-count="text". Например:


        <p data-likes-count="text"></p>

Отображение количества комментариев

Для отображения количества комментариев изображения необходимо указать атрибут data-comments-count="text". Например:


        <p data-comments-count="text"></p>

Отображение имени пользователя

Для отображения имени пользователя необходимо указать атрибут data-username="text". Например:


        <p data-username="text"></p>

Отображение полного имени пользователя

Для отображения имени пользователя необходимо указать атрибутdata-full_name="text". Например:


        <p data-full_name="text"></p>

Отображение биографии пользователя

Для отображения биографии пользователя необходимо указать атрибут data-bio="text". Например:


        <p data-bio="text"></p>

Отображение количества подписчиков

Для отображения количества подписчиков необходимо указать атрибут data-counts-follows="text". Например:


        <p data-counts-follows="text"></p>

Отображение количества страниц, на которые подписан пользователь

Для отображения количества страниц, на которые подписан пользователь, необходимо указать атрибут data-counts-followed_by="text". Например:


        <p data-counts-followed_by="text"></p>

Отображение веб-страницы пользователя

Для отображения веб-страницы пользователя необходимо указать атрибут data-counts-followed_by="text". Например:


        <a href="#" data-website="href,text"></a>

CountTo

Intense использует расширение jQuery CountTo для реализации счетчиков на веб-странице.

Добавление счетчика на страницу

Для того чтобы добавить счетчик, нужно вставить следующую часть кода на HTML страницу .


        <div class="counter" data-from="25" data-to="125"></div>

где атрибут data-from отвечает за начало отсчета счетчика, а атрибут data-to за конечный результат, нужный для отображения на странице.

Корректировка времени расчета счетчика

Для того чтобы изменить скорость счета, нужно добавить атрибут data-speed и задать в нем промежуток времени в миллисекундах до оконнчания счета.

Например:


        <div class="counter" data-from="25" data-to="125" data-speed="5000"></div>

Интервал обновления счетчика

Для того чтобы изменить время обновление счетчика, нужно добавить атрибут data-refresh-interval и задать в нем временой интервал в миллисекундах.

Например:


        <div class="counter" data-from="25" data-to="125" data-speed="5000" data-refresh-interval="300"></div>

Счётчик обратного отсчёта

Intense использует расширение jQuery Countdown для реализации счётчика.

Добавление счётчика на страницу

Для добавления счётчика обратного отсчета на целевую HTML-страницу, необходимо воспользоваться следующей разметкой:


        <div class="countdown" data-type="until" data-time="24 Dec 2015 15:00">

Атрибут data-type может принимать следующие значения:

until

счётчик ведет отсчет времени до указанной в data-time даты.
since

счётчик ведет отсчет времени с указанной в data-time даты

Например:


        <div class="countdown" data-type="until" data-time="24 Dec 2016 15:00">

Обратный отсчет будет вестись до 15:00 24 декабря 2016 года.


        <div class="countdown" data-type="since" data-time="24 Dec 2014 15:00">

В данном случае, отсчет будет вестись с 15:00 24 декабря 2014 года.

Дату отсчета нужно указывать в атрибуте data-time в следующем формате.

    
        DD month YYYY HH:MM

где month - это месяц, который может иметь следующие значения:

Jan

January
Feb

February
Mar

March
Apr

April
May

May
Jun

June
Jul

July
Aug

August
Sep

September
Oct

October
Nov

November
Dec

December

Например:


        <div class="countdown" data-type="until" data-time="24 Aug 2016 12:00">

В данном случае, отсчет будет вестись до 12:00 24 августа 2016 года.

Настройка формата отображения счётчика

Для того чтобы задать формат отображения счётчика на странице, нужно добавить атрибут data-format.

Используйте следующие символы (в указанном порядке), чтобы указать какие периоды Вы хотите отобразить: "Y" - в течение многих лет, "O" - в течение нескольких месяцев, "W" - в течение нескольких недель, "D" - в течение нескольких дней, "H" - в течение нескольких часов, "М" - за несколько минут, "S" - за несколько секунд.

Например:


        <div class="countdown" data-type="until" data-time="24 Aug 2016 12:00" data-format="wdh">

В данном случае счётчик будет иметь следующий формат:

в течение нескольких недель, в течение нескольких дней, в течение нескольких часов.

RD Search

Данный плагин позволяет реализовать поиск по определенным страницам с возможностью задавать разметку для результатов поиска.

Базовая разметка данной формы выглядит следующим образом:


        <form action="search-results.html" method="GET" class="rd-search">
            <div class="form-group">
                <label for="search" class="form-label">Type and hit enter...</label>
                <input id="search" type="text" name="s" autocomplete="off" class="form-control"/>
            </div>
        </form>

Вы можете вставить данную разметку в любом необходимом месте, обязательным является наличие класса rd-search.

Данный поиск позволяет производить вывод результатов с любой разметкой, но для этого требуется правильно настроить все целевые страницы.

Настройка страниц для поиска

Вся настройка выполняется внутри секции head каждой страницы и необходима для формирования шаблона результата поиска.


        <head>
            ...
        </head>

Вывод заголовка в результатах

Для вывода заголовка в результатах поиска необходимо его указать для каждой страницы внутри тега title:


        <!-- Site Title-->
        <title>Intense - multi-page template by TemplateMonster</title>

Вывод ключевых слов в результатах

Для вывода ключевых слов(тегов) в результатах поиска необходимо их указать для каждой страницы в атрибуте content тега <meta name="keywords"> :


        <meta name="keywords" content="intense web design multipurpose template">

Вывод дополнительной информации в результатах

Для вывода дополнительной информации в результатах поиска необходимо указать её для каждой страницы в теге meta с атрибутами name и content. Где name - уникальное название информации, а content - информация, которую необходимо вывести. Например для вывода описания страницы необходимо добавить следующий тег:


        <meta name="description" content="This page ...">

Количество данных тегов может быть неограниченым.

Настройка формы поиска

Настройка поиска выполняется на целевой странице в форме с классом .rd-search.


        <form action="search-results.html" method="GET" class="rd-search">
            ...
        </form>

Настройка фильтра поиска

Вы можете указать фильтр, который будет указывать на каких страницах производить поиск(по названию). Например, для выполнения поиска по HTML страницам, в названиях которых присутсвует слово blog фильтр выглядит следующим образом:


        <form action="search-results.html" method="GET" class="rd-search" data-search-filter="*blog*.html">
            ...
        </form>

Фильтр поиска по-умолчанию можно изменить в файле script.js в переменной defaultFilter, который находится в коде после следующего комментария:


        /**
        * RD Search
        * @description Enables search
        */

Настройка "живого" поиска

Вы можете включить опцию “живого” поиска для отображения результатов без перезагрузки страницы. Для этого необходимо добавить атрибут data-search-live с указанием id элемента, в который будет выведен результат. Например:


        <form action="search-results.html" method="GET" class="rd-search" data-search-live="search-results">
            ...
        </form>
        <div id="search-results"></div>

Настройка шаблона результатов поиска

Шаблон результатов поиска тесно связан с настройкой страницы, описанной выше, а именно, с указанием различных мета тегов. Вы можете указать HTML разметку элемента результатов поиска. Для этого небходимо добавить атрибут data-search-template, в котором нужно указать соответствующую разметку для вывода результатов поиска. Строка поддерживает передачу параметров в формате #{rule}, где rule - атрибут name тега meta, указанного на странице. Существует 4 значения по умолчанию, которые не требуют мета тегов и выводят необходимую информацию:

#{title} - содержит значение тега <title/> целевой страницы
#{tokens} - содержит часть найденного содержимого целевой страницы, соответствующего критериям поиска;
#{href} - содержит путь к найденной странице;
#{count} - количество найденных совпадений на странице.

Например:


        <form  action="search-results.html" method="GET" class="rd-search" data-search-template="">
            <div class="result-item">
                <h3 class="title"><a href="#{href}">#{title}</a></h3>
                <p class="tags">in #{keywords}</p>
            </div>
        ...
        </form>
        <div id="search-results"></div>

Шаблон результата поиска по-умолчанию можно изменить в файле script.js в переменной defaultTemplate, которая находится в коде после следующего комментария:


        /**
        * RD Search
        * @description Enables search
        */

Owl Carousel - Карусель

Intense использует расширение Owl-carousel.js для реализации карусели на страницах шаблона с расширенным data-API для взаимодействия.

<з>Разметка карусели по умолчанию выглядит следующим образом:


        <!-- Owl Carousel -->
        <div class="owl-carousel">
            <div class="owl-item">
                ...
            </div>
            <div class="owl-item">
                ...
            </div>
            <div class="owl-item">
                ...
            </div>
        </div>

Настройка зацикливания карусели

Для того, чтобы зациклить отображение слайдов в карусели, необходимо воспользоваться атрибутом data-loop (true/false, по-умолчанию true) для целевого элемента с классом .owl-carousel.

Например:


        <div class="owl-carousel" data-loop="false">
            ...
        </div>

Настройка автоматического переключения элементов карусели

Автоматическое переключение элементов в Owl Carousel для HTML Website templates по-умолчанию отключено. Для того чтобы включить автоматическое переключение слайдов, необходимо воспользоваться дата атрибутом data-autoplay с указанием значения true.


        <div class="owl-carousel" data-autoplay="true">
            ...
        </div>

Настройка отображения элементов карусели

Owl carousel поддерживает отображение одного или нескольких элементов карусели одновременно. Для настройки отображения элементов карусели необходимо воспользоваться соответствующими атрибутами data-items и data-*-items.

data-items="N"

отображает N элементов карусели по-умолчанию (значение по-умолчанию = 1).
data-xs-items="N"

отображает N элементов карусели, начиная с XS разрешения.
data-sm-items="N"

отображает N элементов карусели, начиная с SM разрешения.
data-md-items="N"

отображает N элементов карусели, начиная с MD разрешения.
data-lg-items="N"

отображает N элементов карусели, начиная с LG разрешения.

где N - цифра, отображающая количество необходимых элементов.

Например:


        <div class="owl-carousel" data-items="2" data-xs-items="3" data-lg-items="4">
            ...
        </div>

В данном примере, по умолчанию в карусели будет отображаться 2 элемента, на разрешениях xs, sm и md - 3 элемента, на разрешении lg - 4 элемента.

Настройка навигации карусели

Для отображения элементов навигации "Вперед"/"Назад" в Owl Carousel необходимо воспользоваться атрибутом data-nav="true" для целевой карусели:


        <div class="owl-carousel" data-nav="true">
            ...
        </div>

Настройка пагинации карусели

Для отображения пагинации в Owl Carousel необходимо воспользоваться атрибутом data-dots="true" для целевой карусели:


        <div class="owl-carousel" data-dots="true">
            ...
        </div>

Для определения шага отображения точек пагинации необходимо воспользоваться атрибутом data-dots-each="N".


        <div class="owl-carousel" data-dots="true" data-dots-each="1">
            ...
        </div>

где N - цифра, отображающая количество необходимых элементов.

Настройка паддинга сцены карусели

Для определения паддинга сцены карусели необходимо воспользоваться атрибутом data-*-stage-padding="N":


        <div class="owl-carousel" data-xs-stage-padding="30">
            ...
        </div>

Настройка отступа между элементами карусели

Для определения отсупа между элементами карусели необходимо воспользоваться атрибутом data-*-margin="N" (по-умолчанию = 30):


        <div class="owl-carousel" data-xs-margin="15">
            ...
        </div>

Isotope. Фильтр макета

Intense использует Isotope для создания фильтров макета.

Добавление Isotope на страницу

Для того чтобы добавить isotope в соответствующий макет целевой страницы, достаточно просто добавить дата атрибут data-isotope-layout к целевой HTML разметке, указав соответствующий режим макета:


        <div class="row" data-isotope-layout="masonry">
            <div class="col-sm-6 col-md-4">
                Item 1
            </div>
            <div class="col-sm-6 col-md-4">
                Item 2
            </div>
        </div>

Поддерживаются следующие режимы макета:

masonry

элементы групируются в хаотическом порядке;
fitRows

элементы группируются в горизонтальном порядке;
vertical

элементы группируются в вертикальном порядке.

Для добавления isotope в макеты, которые не содержат элементы сетки, необходимо дополнительно определить класс .isotope-item для каждого элемента isotope:


        <div data-isotope-layout="masonry">
            <div class="isotope-item">
                Item 1
            </div>
            <div class="isotope-item">
                Item 2
            </div>
        </div>

Обратите внимание: в данной ситуации, определять размеры элементов Isotope прийдется вручную. Intense предоставляет готовый функционал только для элементов сетки.

Фильтрация элементов Isotope

Для добавления isotope фильтров на страницу необходимо определить группу элементов isotope с помощью атрибута data-isotope-group и соответствующие типы фильтров для каждого из элементов:


        <div data-isotope-group="gallery" data-isotope-layout="masonry">
            <div class="isotope-item" data-filter="type-1">
                Item 1
            </div>
            <div class="isotope-item" data-filter="type-2">
                Item 2
            </div>
        </div>

Теперь для фильтрации элементов достаточно определить лишь соответствующие контрольные кнопки фильтров для целевой группы элементов Isotope.


        <button data-isotope-filter="*" data-isotope-group="gallery">
            Show All
        </button>
        <button data-isotope-filter="type-1" data-isotope-group="gallery">
            Type 1
        </button>
        <button data-isotope-filter="type-2" data-isotope-group="gallery">
            Type 2
        </button>

Responsive Tabs. Табы

Intense использует расширение jQuery Responsive Tab для реализации вкладок. Для добавления вкладок на целевую страницу необходимо воспользоваться следующей разметкой:


        <div class="responsive-tabs">
            <ul class="resp-tabs-list">
                <li> Tab 1 Title </li>
                <li> Tab 2 Title </li>
                <li> Tab 3 Title </li>
            </ul>

            <div class="resp-tabs-container">
                <div> Tab 1 Body </div>
                <div> Tab 2 Body </div>
                <div> Tab 3 Body </div>
            </div>
        </div>

Адаптивные вкладки: аккордеон

Intense использует расширение jQuery Responsive Tab для реализации аккордеона. Для добавления аккордеона на целевую страницу необходимо воспользоваться следующей разметкой:


        <div class="responsive-tabs" data-type="accordion">
            <ul class="resp-tabs-list">
                <li> Item 1 Title </li>
                <li> Item 2 Title </li>
                <li> Item 3 Title </li>
            </ul>

            <div class="resp-tabs-container">
                <div> Item 1 Body </div>
                <div> Item 2 Body </div>
                <div> item 3 Body </div>
            </div>
        </div>

Вкладки RD Material Tabs

Intense используют расширение RD Material Tabs для реализации вкладок. Для добавления вкладок на целевую страницу, необходимо воспользоваться следующей разметкой:


    // RD Material Tabs
    <div class="rd-material-tabs">
      <div class="rd-material-tabs__list">
        <ul>
          <li>
            <a href='#'>  Вкладка 1 </a>
          </li>
          <li>
            <a href='#'>  Вкладка 2 </a>
          </li>
          <li>
            <a href='#'>  Вкладка 3 </a>
          </li>
        </ul>
      </div>
      <div class="rd-material-tabs__container">
        <div>
          Контент 1
        </div>
        <div>
          Контент 2
        </div>
        <div>
          Контент 3
        </div>
      </div>
    </div>

Stacktable. Адаптивные таблицы

Intense использует расширение Stacktable для реализации адаптивных таблиц. Для того чтобы сделать целевую таблицу адаптивной, достаточно просто добавить атрибут data-responsive="true" к ее разметке.


        <table data-responsive="true"  >
            ...
        </table>

Swiper Slider

Intense использует плагин Swiper Slider для реализации слайдера на страницах шаблона с расширенным data-API для взаимодействия.

Разметка слайдера по умолчанию выглядит следующим образом:


        <!-- Swiper -->
        <div class="swiper-container swiper-slider" data-height="" data-min-height="">
            <div class="swiper-wrapper">
                <div class="swiper-slide" data-slide-bg="">
                    <div class="swiper-slide-caption">

                    </div>
                </div>
                <div class="swiper-slide" data-slide-bg="">
                    <div class="swiper-slide-caption">

                    </div>
                </div>
                <div class="swiper-slide" data-slide-bg="">
                    <div class="swiper-slide-caption">

                    </div>
                </div>
            </div>

            <!-- Swiper Pagination -->
            <div class="swiper-pagination"></div>

            <!-- Swiper Navigation -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- Swiper Scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
        <!-- END Swiper -->

Настройка высоты слайдера

Высота слайдера Swiper задается с помощью соответствующих атрибутов data-height и data-min-height для целевого слайдера.

data-height

определяет желаемую высоту слайдера;
data-min-height

определяет минимальную высоту слайдера;

Для определения высоты слайдера (data-height, data-min-height) можно использовать значения в трех форматах:

*px

дает статическую высоту, которая не изменяется при изменении разрешения экрана;
*%

задает высоту слайдера в процентах о его ширины;
*vh

задает высоту слайдера в процентах от высоты окна.

Пример со статической высотой:


        <div class="swiper-container swiper-slider" data-height="500px">
            ...
        </div>

Пример с процентом от ширины слайдера:


        <div class="swiper-container swiper-slider" data-height="50%" data-min-height="300px">
            ...
        </div>

Пример с процентом от высоты окна:


        <div class="swiper-container swiper-slider" data-height="100vh" data-min-height="300px">
            ...
        </div>

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

Настройка автоматического переключения слайдов

Автоматическое переключение слайдов в Swiper для HTML Website template по-умолчанию включено. Для того что отключить или изменить время автоматического переключения слайдов, необходимо воспользоваться атрибутом data-autoplay с указанием ключа false или времени в милисекундах для целевого элемента с классом .swiper-slider.

Например:


        <div class="swiper-container swiper-slider" data-autoplay="false">
            ...
        </div>

или,


        <div class="swiper-container swiper-slider" data-autoplay="3000">
            ...
        </div>

Настройка зацикливания слайдера

Для того чтобы зациклить отображение слайдов в слайдере, необходимо воспользоваться атрибутом data-loop (true/false, по-умолчанию true) для целевого элемента с классом .swiper-slider.

Например:


        <div class="swiper-container swiper-slider" data-loop="false">
            ...
        </div>

Настройка направления перелистывания слайдов

В слайдере Swiper имеется возможность изменить направление пролистывания слайдов с горизонтального на вертикальное. Для этого необходимо воспользоваться атрибутом data-direction (“horizontal”/”vertical”, по умолчанию “horizontal”) для целевого элемента с классом .swiper-slider.

Например,


        <div class="swiper-container swiper-slider" data-direction="vertical">
            ...
        </div>

Настройка навигации слайдера

Swiper поддерживает отображение кнопок "Вперед" и "Назад" для управления отображением слайдов. Для их отображения необходимо добавить соответствующую разметку для целевого слайдера:


        <div class="swiper-container swiper-slider">
            <!-- Slider Navigation -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

Настройка пагинации слайдера

Swiper поддерживает отображение пагинации слайдера. Для ее отображения необходимо добавить соответствующую разметку для целевого слайдера:


        <div class="swiper-container swiper-slider">
            <!-- Slider Pagination -->
            <div class="swiper-pagination"></div>
        </div>

По умолчанию, пагинация для слайдера кликабельна. Для того чтобы отключить кликабельность пагинации необходимо добавить атрибут data-clickable для соответвующей пагинации слайдера.


        <div class="swiper-container swiper-slider">
            <!-- Slider Pagination -->
            <div class="swiper-pagination" data-clickable="false"></div>
        </div>

Для отображения порядкового номера соответствующей точки пагинации необходимо воспользоваться атрибутом data-index-bullet="true" для соответствующей пагинации слайдера:


        <div class="swiper-container swiper-slider">
        <!-- Slider Pagination -->
        <div class="swiper-pagination" data-index-bullet="true"></div>
        </div>

Настройка полосы прокрутки

Swiper поддерживает отображение полосы прокрутки слайдера. Для ее отображения необходимо добавить соответствующую разметку для целевого слайдера:


        <div class="swiper-container swiper-slider">
            <!-- Slider Scrollbar-->
            <div class="swiper-scrollbar"></div>
        </div>

По умолчанию, возможность взаимодествия с полосой прокрутки включена. Для ее отключения необходимо воспользоватья атрибутом data-draggable="false" для соответсвующей полосы прокрутки целевого слайдера:


        <div class="swiper-container swiper-slider">
            <!-- Slider Scrollbar-->
            <div class="swiper-scrollbar" data-draggable="false"></div>
        </div>

Управление стрелками

Swiper слайдер поддерживает возможность управления слайдером с помощью стрелок на клавиатуре. Для включения данной опции необходимо воспользоваться атрибутом data-keyboard для целевого слайдера:


        <div class="swiper-container swiper-slider" data-keyboard="true">
            ...
        </div>

Управление мышю

Swiper слайдер поддерживает возможность управления слайдером с помощью мыши. Для включения данной опции необходимо воспользоваться атрибутом data-mousewheel для целевого слайдера:


        <div class="swiper-container swiper-slider" data-mousewheel="true">
            ...
        </div>

По умолчанию, данная опция блокирует дальнейшую прокрутку страницы при достижении последнего или первого слайда в слайдере. Для отключения блокировки прокрутки страницы в данной ситуации необходимо воспользоваться атрибутом data-mousewheel-release="true" для целевого слайдера:


        <div class="swiper-container swiper-slider" data-mousewheel="true" data-mousewheel-release="true">
            ...
        </div>

Интеграция параллакса в слайдер

Для реализации параллакса используется плагин RD Parallax.

Для интеграции параллакса в слайдер необходимо использовать слайдер внутри параллакса, добавив класс rd-parallax-swiper. Таким образом, эффект параллакса будет присутствовать и на содержимом внутри слайдера. Для того чтобы изменить скорость любого из элементов находищихся внутри слайдера, необходимо добавить класс swiper-parallax для элемента и добавить атрибут data-speed для регулировки скорости:


        <div class="rd-parallax rd-parallax-swiper">
            <div data-speed="0.3" data-sm-speed="1" data-type="html" class="rd-parallax-layer">
                <div class="swiper-container swiper-slider">
                    ...
                    <div data-speed="0.5" class="swiper-caption swiper-parallax">
                        ...
                    </div>
                </div>
            </div>

Интеграция Фонового видео в слайдер

Для реализации фонового видео используется плагин RD Video Background.

Для интеграции фонового видео в слайдер необходимо в блок с классом swiper-slide вставить разметку для активации фонового видео:


        <div class="swiper-slide">
            <div data-rd-video-path="path/to/video" class="rd-video">
                ...
            </div>
        </div>

Путь к видео необходимо указывать без расширения файла.

Photoswipe

Intense использует расширение Photoswipe.js для реализации красивых галерей на мобильных устройствах.

Вставка галлереи на страницу

Для правильной работы галлереи необходимо добавить следующую разметку в конец целевой страницы перед закрывающим тегом <body>:


        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="pswp__bg"></div>
            <div class="pswp__scroll-wrap">
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>
                <div class="pswp__ui pswp__ui--hidden">
                    <div class="pswp__top-bar">
                        <div class="pswp__counter"></div>
                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                        <button class="pswp__button pswp__button--share" title="Share"></button>
                        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip"></div>
                    </div>
                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                    </button>
                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                    </button>
                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>
                </div>
            </div>
        </div>

Создание модального окна для одного изображения

Для вставки модального окна c отдельным изображением воспользуйтесь атрибутом data-photoswipe-item для соответствующей ссылки и атрибутом data-size для указания размера большой картинки в формате WxH:


        <a class="thumbnail-classic" data-photo-swipe-item="" data-size="1170x600" href="link-to-popup-image.jpg">
            <img width="270" height="270" src="link-to-thumbnail-of-popup-image.jpg" alt="">
        </a>

Создание галлереи из множества картинок с элементами управления

Для вставки галлереи из множества картинок воспользуйтесь атрибутом data-photoswipe-gallery="gallery" для родительского элемента соответсвующей группы отдельных изображений.


        <div data-photo-swipe-gallery="gallery">
            <a class="thumbnail-classic" data-photo-swipe-item=""
                            data-size="1170x600" href="link-to-popup-image.jpg">
                <img width="270" height="270" src="link-to-thumbnail-of-popup-image.jpg" alt="">
            </a>
            <a class="thumbnail-classic" data-photo-swipe-item=""
                            data-size="1170x600" href="link-to-popup-image-2.jpg">
                <img width="270" height="270" src="link-to-thumbnail-of-popup-image-2.jpg" alt="">
            </a>
        </div>

Progress Bar. Горизонтальные полосы прогресса

Intense используют расширение Bootstrap Progress Bars для реализации горизонтальных полос прогресса.

Базовая HTML разметка для создания полосы прогресса выглядит следующим образом:


    <div class="progress">
      <div class="progress-bar"
           role="progressbar"
           aria-valuenow="60"
           aria-valuemin="0"
           aria-valuemax="100">
        <span class="sr-only">60% Complete</span>
      </div>
    </div>

гед:

aria-valuenow

текущее значение полосы прогресса;
aria-valuemin

минимальное значение полосы прогресса;
aria-valuemax

максимальное значение полосы прогресса.

Вы также можете использовать любые дополнительные настройки Bootstrap, связанные с progress bars, которые представлены на официальной странице Bootstrap .

Circle-progress. Радиальные полосы прогресса c градиентом

Intense использует расширение jquery-circle-progress.js для реализации радиальных полос прогресса с градиентом.

Базовая HTML разметка для создания полосы прогресса выглядит следующим образом:


    <!-- Circle Progress Bar-->
    <div data-value="0.8"
         data-gradient="#5aba67, #78c157"
         data-empty-fill="rgb(245,245,245)"
         data-size="150" class="progress-bar-circle">
      <span></span>
    </div>

гед:

data-value

значение полосы прогресса (обязательный атрибут);
data-gradient

цвет заполненного пути полосы прогресса (обязательный атрибут);
data-size

размер полосы прогресса в пикселях;
data-empty-fill

цвет незаполненного пути полосы прогресса.

Диаграммы и графики

Intense использует плагины hightchart.js, flot.js и c3charts.js для реализации диаграмм и графиков. Перед тем как использовать данные расширения, настоятельно рекомендуем ознакомится с официальной документацией:

Общие принципы использования

Для удобства редактирования параметров диаграмм и графиков мы рекомендуем воспользоваться исходными файлами .jade. В .jade файлах перед каждой конкретной диаграммой объявляется объект с настройками данной диаграммы или графика, который всегда имеет комментарий "//- Define object for "*"". Все настройки графиков и диаграмм задаются через этот объект.

Вы можете использовать любые диаграммы и графики, представленные на странице Components > Toolkit Components > Charts and Graphs.

Настройка и работа с плагином hightcharts.js

Для создание графика на основе плагина hightcharts необходимо в разметку добавить блок с классом "hightchart", главным атрибутом которого будет "data-graph-object", значением которого является заранее определенный объект со всеми настройками для графика.

Полный пример кода будет выглядеть следующим образом:


    //- Define object for "Pie Chart"
    var highPieObject = {
      credits: false,
      chart: {
       reflow: true,
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false,
       renderTo: 'pie-container'
    },
    title: {
     text: null
    },
    tooltip: {
     pointFormat: '{series.name}: <b>{point.percentage:.1f}% </b>'
    },
    plotOptions: {
     pie: {
      center: ['19%', '50%'],
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
       enabled: false
      },
      showInLegend: true
     }
    },
    colors: ['#f5bf2f', '#42b574', '#8668ad', '#64aae1' ],
    legend: {
      x: 190,
      floating: true,
      verticalAlign: "middle",
      layout: "vertical",
      itemStyle: {
       "color": "#9b9b9b",
       "fontSize": "12px",
       "fontFamily": "lato",
      },
     itemMarginTop: 10
    },
    series: [{
     type: 'pie',
     name: 'Browser share',
     data: [
      ['Chrome', 35.0],
      ['IE', 36.8], {
       name: 'Firefox',
       y: 15.8,
       sliced: true,
       selected: true,
       },
       ['Safari', 18.5],
     ]
    }]
    }

    //Pie Chart
    .higchart(data-graph-object= JsonStringify(highPieObject), style='width: 100%; height: 255px; margin: 0 auto;')

Настройка и работа с плагином flot.js

Для создание графика на основе плагина flot необходимо в разметку добавить блок с классом "flot-chart", главным атрибутом которого будет "data-graph-object", значением которого является заранее определенный объект с настройками для графика, а так же "data-grid-object", значением которого является заранее определенный объект с настройками для системы координат.

Полный пример кода будет выглядеть следующим образом:


    //-Define Grid object for Flot Charts Plugin
    var gridObject = {
     grid: {
      show: true,
      aboveData: true,
      color: "#bbbbbb",
      labelMargin: 15,
      axisMargin: 0,
      borderWidth: 0,
      borderColor: null,
      minBorderMargin: 5,
      clickable: true,
      hoverable: true,
      autoHighlight: true,
      mouseActiveRadius: 20,
     },
     tooltip: true,
     //activate tooltip
     tooltipOpts: {
      content: "%x : %y.0",
       shifts: {
        x: -30,
        y: -50
       },
      defaultTheme: false
     }
    }

    //- Define object for "Spine Chart"
    var d1 = [];

    for (var i = 0; i < 14; i += 0.5) {
     d1.push([i, Math.sin(i)]);
    }

    var splineChartObject = [{
     data: d1,
     lines: {
      show: true,
      fill: true
     },
     color: '#46b777'
    }]

    .flot-chart(data-graph-object= JsonStringify(splineChartObject),
                data-grid-object= JsonStringify(gridObject),
                style='width: 100%; height: 370px; margin: 0 auto')

Настройка и работа с плагином с3chart.js

Для создание графика на основе плагина с3chart необходимо в разметку добавить блок с классом d3-chart, главным атрибутом которого будет "data-graph-object", значением которого является заранее определенный объект со всеми настройками для графика. У каждого графика должен быть уникальный id, который должен соответствовать параметру "bindto" объекта с настройками.

Полный пример кода будет выглядеть следующим образом:


    //- Define object for "Area Chart"

    var areaChartObject = {
     bindto: '#area-chart',
      color: {
       pattern: d3ChartColors,
      },
      padding: {
       left: 30,
       right: 15,
       top: 0,
       bottom: 0,
      },
      data: {
       columns: [
       ['data1', 300, 350, 300, 0, 0, 0],
       ['data2', 130, 100, 140, 200, 150, 50]]
      }
    }
    .d3-chart#area-chart(data-graph-object= JsonStringify(areaChartObject),
                         style='width: 100%; height: 370px; margin: 0 auto')