—»     —»   Собственный скрипт баннерокрутилки при помощи jQuery
  Раздел: Руководства   Комментариев: 3  

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



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

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

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

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


Приступаем

Глядя на 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; /* http://stackoverflow.com/a/1527834/477958 */
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 закончит производить вычисления, практически сразу же появится рекламный баннер. Этот скрипт может быть запасным вариантом, когда вам необходимо использовать кэширование на стороне сервера, но при этом захочется отображать случайные баннеры при обновлении страницы.

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

В завершение

Множество сайтов, включая блоги, часто используют динамическое отображение баннеров. Сам HTML-код может и не отвечать конкретным стандартам, но цель баннерообмена заключается в том, чтобы отображать динамический контент. Мы надеемся, что данное руководство поможет веб-разработчикам, которые нуждались в примерно таком решении. Вы можете свободно скачивать копию нашего исходного кода и делиться своим мнением по поводу данного скрипта.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, реклама
Опубликовал Design FactoRy   Прочитано (раз): 5934   |   Оставлено комментариев: 3
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 июля 2013 @ 15:37
Написал: Mac — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Ребята, вы реально читаете мысли своих посетителей! Буквально вчера безуспешно искал решение именно этой проблемы, а сегодня вы выдаете решение! И это уже не в первый раз такое :)
Комментарий #2: 8 июля 2013 @ 16:24
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Mac, у нас в штате работает собственный медиум-провидец - это его заслуга lol Рады были вам помочь!
Комментарий #3: 2 марта 2015 @ 10:43
Написал: Игорь — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте!

А не подскажите банерокрутилку с такими функциями:
Попап баннер появляется каждому сотому..., после клика на баннер открывается обратная форма с несколькими полями, после отправки оно закрывается?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930