9.07.13, 21:27
0 комментарий
  Уроки

Собственный скрипт баннерокрутилки при помощи jQuery

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

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



Приступаем

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

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>javascript Ad Rotator Demo - SpyreStudios</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/ads-rotator.js"></script>
</head>


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

 <div id="w">
    <h1>javascript Ad Banner Rotator</h1>
    <p>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.</p>
    
   <div id="topad">
      <a href=""><img src="" alt="advertisement" width="728" height="90"></a>
    </div><!-- @end #topad -->
  </div><!-- @end #w -->


Два ключевых объекта, над которыми нам нужно поработать, это 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-код может и не отвечать конкретным стандартам, но цель баннерообмена заключается в том, чтобы отображать динамический контент. Мы надеемся, что данное руководство поможет веб-разработчикам, которые нуждались в примерно таком решении. Вы можете свободно скачивать копию нашего исходного кода и делиться своим мнением по поводу данного скрипта.

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

СКАЧАТЬ

Вес файла
351.28 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204