Существует так много причин к тому, почему вам стоит использовать javascript в качестве движка для отображения случайных баннеров, нежели реализовывать эту затею при помощи серверного языка разработки. Но основная причина проявляется в тех случаях, когда на сайте используется система кэширования, так как сам по себе рекламный баннер для кэша лишь единожды может быть случайным. Затем он фиксируется для последующих просмотров страницы. Тем не менее, при помощи javascript мы можем сгенерировать новые случайные числа при каждом обновлении страницы, и отображать один из баннеров, при этом используя тот же самый сохраненный кэш.В этом руководстве мы хотим рассказать вам о том, как можно создать javascript-скрипт баннерокрутилки, который будет работать даже с кэшированием PHP/Rails. Вам нужно будет реализовать коды во внешнем интерфейсе, что означает, что настройки вашего веб-сервера здесь не играют никакой роли. Скрипт будет удерживать массив контента, который будет сочетаться на базе изображений и внешних ссылок. Вы можете взглянуть на пример, чтобы понять, что мы сегодня будем разрабатывать.

Приступаем

Глядя на HTML-код кажется, что большинство из этого нам просто не нужно на странице. Мы будем использовать оболочку с внутренним контейнером для баннеров. Этот контейнер будет обозначен ID, который мы укажем для того, чтобы иметь возможность управлять внутренним тегом img. Что касается связанных библиотек, то нам понадобится лишь копия jQuery и несколько внешних CSS-стилей.

  
  
  javascript Ad Rotator Demo - SpyreStudios
  
  
  
  
  
  

Важно понять, что нам нужно оставить некоторые элементы страницы пустыми. Баннерные изображения на HTML будут отображаться пустыми как только загрузится DOM, либо мы можем использовать spacer.gif. Или даже какую-нибудь заглушку, которая будет заменяться посредством javascript. Но лучше всего будет использовать разные ID для всех контейнеров с баннерной рекламой, чтобы иметь возможность указывать внутренние элементы.

javascript Ad Banner Rotator

    
Refresh the page and you can see the banner image change each time. The purpose of using JS over PHP/HTML is when used alongside caching. Banner ads will cache and the easiest way to avoid this would be to rotate using javascript.
    
   
      
    
  

Два ключевых объекта, над которыми нам нужно поработать, это src-атрибут у изображения, а также href-атрибут анкорной ссылки. Оба эти значения будут храниться в виде переменных внутри javascript-массива. Все дизайны баннеров для данного руководства были выполнены в размерах 728x90.

Базовые стили страницы

Здесь мы не будем рассказывать про все CSS-стили. Мы используем обычный блок CSS-сбросов, который помогает нам добиться практически одинакового отображения во всех браузерах. Многие разработчики активно протестуют против подобного подхода, даже несмотря на то, что он отлично работает.

h1 { 
  font-size: 3.2em;
  line-height: 1.6em;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
  padding: 5px 9px;
}
p { 
  font-size: 1.4em;
  line-height: 1.3em;
  color: #545454;
  margin-bottom: 20px;
}
a { color: #8ca6d2; }
a:hover { color: #9cb4dd; }

#w { 
  display: block; 
  width: 750px; 
  margin: 0 auto; 
  background: #fff; 
  padding: 4px 15px; 
  padding-bottom: 22px; 
  -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
  box-shadow: 1px 2px 2px rgba(0,0,0,0.4);
}

Внешняя оболочка div’а центрирована на странице при помощи ширины равной 750 пикселям. Также мы применяем незначительную тень блока, которая делает дизайн еще более привлекательным. Но обратите внимание на то, что мы не использовали какие-либо другие CSS-свойства, направленные на div с рекламой. Это говорит о том, что мы можем манипулировать изображениями на странице без необходимости стилизовать их. Конечно же, в собственных проектах вы можете свободно добавлять разные поля, правила позиционирования, отступы и прочее.

Реализуем случайный подбор объявлений

Пришло время взглянуть на содержимое заветного файла ads-rotator.js. Код требует размещения некоторых данных в большие переменные, поэтому давайте этим и займемся. У нас есть два основных массива, в каждом из которых содержится 9 индексов. Первая переменная, adBanners, будет содержать URL до источника изображения, а во второй переменной, bannerLinks, будут расположены внешние ссылки.

$(function(){
  var adBanners = [
    "txp-leaderboard-728x90.jpg",
    "basic-textpattern-728x90.jpg",
    "wordpress-mythemesshop-728x90.jpg",
    "mwp_banner_18_728x90.jpg",
    "grooveshark-ad-728x90.jpg",
    "treehouse-learning-ad-728x90.jpg",
    "ddg-duck-duck-go-ad-728x90.jpg",
    "photoshop-to-html-ad-728x90.jpg",
    "getting-good-javascript-ad-728x90.jpg"
  ];
  var bannerLinks = [
    "http://textpattern.com/",
    "http://textpattern.com/",
    "http://mythemeshop.com/",
    "https://managewp.com/",
    "http://grooveshark.com/",
    "http://teamtreehouse.com/",
    "https://duckduckgo.com/",
    "http://rockablepress.com/books/photoshop-to-html",
    "http://rockablepress.com/books/getting-good-with-javascript"
  ];

Если вы разбираетесь в файле .htaccess, то вы без труда сможете обновить внешние URL соответствующим образом. Они будут меньше похожи на рекламные объявления, а значит пользователи с большей вероятностью кликнут по ним, чтобы перейти на другую страницу. Оставшаяся часть скрипта создает новый пакет переменных для работы с соответствующими URL, а также для динамического изменения этих атрибутов.

var imgPrefix   = "images/";
  var randNum     = Math.floor(Math.random() * (8 - 0 + 1)) + 0; 
  var topAdBanner = $('#topad > a > img');
  
  var newBannerImg  = imgPrefix + adBanners[randNum];
  var newBannerLink = bannerLinks[randNum];
  
  // update new img src and link HREF value
  $(topAdBanner).attr('src',newBannerImg);
  $('#topad > a').attr('href',newBannerLink);

Очевидно, imgprefix должен представлять собой URl, указывающий на папку с изображениями баннеров для веб-сайта. Он должен указываться относительно расположения HTML-файла, а не JS. Вы можете избежать этого, сделав prefix абсолютным URL (то есть, http://sitename.com/images/ads/). randNum представляет собой переменную, которая содержит значения от 0 до 8, которые сообщаются с отдельными элементами массива.Мы наткнулись на эту замечательную строку кода в ответе Stack Overflow, и она идеально подошла для данного скрипта. Вы можете отредактировать значения таким образом, чтобы они соответствовали вашим нуждам, если количество баннеров превысит 9 штук. Переменные newBannerImg и newBannerLink используют эти случайные числа в комбинации с переменными массива, которые мы создавали ранее. Итак, если мы получим случайное число 4, мы можем внести этот индекс в оба массива и получить четвертое по счету изображение баннера или URL.Применяя jQuery-метод .attr(), мы без труда можем управлять значениями href у анкорной ссылки, и src у изображения. После того, как DOM закончит производить вычисления, практически сразу же появится рекламный баннер. Этот скрипт может быть запасным вариантом, когда вам необходимо использовать кэширование на стороне сервера, но при этом захочется отображать случайные баннеры при обновлении страницы.

В завершение

Множество сайтов, включая блоги, часто используют динамическое отображение баннеров. Сам HTML-код может и не отвечать конкретным стандартам, но цель баннерообмена заключается в том, чтобы отображать динамический контент. Мы надеемся, что данное руководство поможет веб-разработчикам, которые нуждались в примерно таком решении. Вы можете свободно скачивать копию нашего исходного кода и делиться своим мнением по поводу данного скрипта.

Исходники в архиве.