Баннерная система "Бионика Медиа"


Последовательность подключения

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

  1. Зарегистрировать Ваш сайт в баннерной системе "Бионика Медиа" (в данный момент может быть сделано только администрацией)

  2. Подключить javascript-файл на Вашем сайте:

    <script type="text/javascript" src="https://www.banners.bionika-media.ru/include.js"></script>
  3. Вставить HTML-код баннера, к примеру:

    <div class='bm-banner' data-place='1'></div>

Код баннеров

Вы можете вставить сколько угодно блоков на страницу с одним условием: баннерные "места" всегда должны быть разными, т.е. невозможно вывести один и тот же баннер в нескольких местах.

Вашему HTML-тэгу необходимо добавить класс bm-banner для того, чтобы в его содержимое был вставлен баннер. Например:

<div class='bm-banner' data-place='1'></div>

или

<span class='bm-banner' data-place='2'></span>

Вы также можете передавать некоторые параметры, которые должны быть записаны в data-аттрибуты:

  • place - обязательный параметр. Идентификатор места, по которому должен быть отображен баннер
  • count (по умолчанию 1) - количество баннеров в блоке. Обратите внимание, что в случае вывода нескольких баннеров, они могут быть выведены в случайном порядке, если они равнозначны. Для вывода всех активных баннеров на указанном месте используйте all
  • spec - специализация (по сути дополнительный параметр, определяющий приоритетность вывода). Допускается перечисление значений через запятую: 1,2,3
  • responsive - будет ли баннер являться респонсивным (100% по ширине) или нет. Обратите внимание, что соотношение сторон у баннера будет соблюдено, но максимальная ширина в любом случае будет равна ширине файла изображения/флэша.

Примеры:

  • Респонсивный баннер на место 3 по специализации Акушерство и Гинекология

    <div class='bm-banner' data-place='3' data-responsive='true' data-spec='1'></div>
  • Все активные баннеры на место 2 с сохранением последовательности

    <div class='bm-banner' data-place='2' data-count='all'></div>
  • Все активные баннеры на место 2 в случайном порядке

    <div class='bm-banner' data-place='2' data-count='999'></div>

Принцип работы

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

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

Примеры результата:

  • Обычный баннер размером 728 × 90 пикселей

    <a href="https://www.banners.bionika-media.ru/banners/go/...">
        <div style="width:728px;height:90px;overflow:hidden;display:inline-block" class="bm-banner-item bm-banner-image">
            <img style="width:100%;max-width:728px" alt="..." src="...">
        </div>
    </a>