index.html

<!--
    Данный файл будет располагаться по адресу:
   http://cdn.vmet.ro/html5_bnr/dettol/dettol/index.html
   где dettol/dettol - идентификатор этой конкретной рекламной кампании
   Остальные файлы располагайте как удобно,
   корневой директорией для вас в рамках этой рекламной кампании
   будет http://cdn.vmet.ro/html5_bnr/dettol/dettol/

-->

<style type="text/css">
    /*
        Cтили прописываются внутри тэга style с указанием прямых ссылок на ресурсы
        Аттачить css в виде отдельного файла не допускается
        Путь к ресурсу строится, как показано ниже,
        где dettol/dettol - идентификатор этой конкретной рекламной кампании

        Все стили должн прописываться относительно #interactive-banner > .content
        это именно тот контейнер, в котором будет располагаться ваш баннер
        #interactive-banner спозиционирован фиксированно, растянут на 100% по высоте и ширине
        При открытии баннера ($banner.trigger('show')) он становится видимым,
        а для блока body сайта отключается скролл (overflow: hidden)
    */
    #interactive-banner > .content {
        height: 100%;
        background: url('http://cdn.vmet.ro/html5_bnr/dettol/dettol/bg.png');
    }
    h1 {
        color: green
    }
    img {
        width: 100%
    }
</style>
<script type="text/javascript">
    // Здесь и далее можем обращаться к JQuery объекту баннера через глобальную переменную $banner
    // У нас уже подключен jquery 2.1.3, дополнительно его подключать не нужно
    // Пишем код, который необходимо исполнить до открытия баннера
        $banner.find('.content > h1').css('color', 'red');

    // Отрисовываем полотно баннера
    $banner.trigger('show');

    // После отрисовки полотна выбрасывается событие activate, которое вы можете использовать,
    // к примеру для старта внутренней анимации

    $banner.on('activate', function(){
        console.log('Баннер открылся, мы начинаем анимацию')
    });

    // Также в глобальной области присутствует переменная adfoxVars, где хранятся параметры, заведенные в adFox
    // Их можно использовать, например, так:
    $banner.on('click', function(){
        document.location = adfoxVars.clickUrl
    });


    // На баннере присутствует крестик, при нажатии на который происходит закрытие баннера
    // и удаление всего связанного с ним кода со страницы.
    // Того же эффекта можно добиться, вызвав $banner.trigger('close')

</script>
<h1>
    Client adfox banner
</h1>
<img src="http://cdn.vmet.ro/html5_bnr/dettol/dettol/folder/with/pictures/image.png" />
<p>
    Nulla vel fermentum nulla. Etiam molestie, massa sit amet convallis rutrum, sem ligula pellentesque sem, non interdum ipsum augue at dolor. Nulla sed nulla hendrerit dui ultrices aliquam. Duis consectetur vulputate enim nec lobortis. Integer turpis nibh, congue ut magna a, imperdiet dapibus risus. Fusce maximus nisi eu consequat auctor. Fusce sed risus metus. Nam quis libero nunc. Suspendisse quis sapien mi. Morbi fringilla, diam in vestibulum feugiat, purus quam fringilla ipsum, at dapibus dui nunc tincidunt eros. Nullam elementum eros cursus, consectetur felis ac, mollis ligula.
</p>