RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Июн
16

Ротатор баннеров на JQuery в сайдбаре

Всем привет, сегодня мы займемся с вами созданием ротатора баннеров при помощи скрипта JQuery, и разместим его в сайдбаре нашего сайта. Но, для начала давайте определимся со всеми понятиями и формулировками.

Ротатор баннеров

Думаю, что все знают, что такое баннер. Так же все знают, что при помощи баннеров рекламируют различные  ресурсы и товары — партнерская программа. А вот, что такое ротатор баннеров знают не все: это скрипт поочередого показа баннера, в одном и том же месте с заданным временным интервалом.

Для наглядности вот пример ротации баннеров:

ротатор баннеров

Для начала к сайту необходимо подключить библиотеку скриптов JQuery:

<script type="text/javascript" src="googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Делается это в файле header.php, выше приведенный код размещают до закрывающего тега , но если у вас библиотека скриптов уже подлючена повторно ее подключать нет необходимости: пропустите этот шаг.

Скрипт ротатора баннеров

Теперь, установим код самого JQuery скрипта, но здесь сразу определитесь с местом показа ротатора баннеров, если вы делаете также как и я ротатор в сайдбаре (то есть он будет показываться на всех страницах сайта),  то код скрипта, можно разместить сразу после подключения библиотеки скриптов JQuery. Если вы собираетесь показывать ротатор баннеров только на каких-то вложенных страницах, то нет необходимости перегружать все страницы загрузкой скрипта для этого скрипт можно вынести в отдельную папку к примеру вот так:

<script type="text/javascript"
src="http://goldserfer.ru/wp-content/themes/colorbold/js/jquery.js">
</script>

 А вот и сам скрипт ротатора баннеров:

<script type="text/javascript">
$(document).ready(function(){
var banners = $("#rotator div").toArray();
settings = function() { this.banners = banners; // массив блоков с изображениями 
this.sum = this.banners.length; // количество блоков с изображениями 
this.timeIn = 1000; // время для появления 
this.timeOut = 1000; // время для скрытия 
this.timeView= 2000; // тайм-аут для показа 
} 
var obj = new settings(); 
if (obj.sum < 1) { $("#rotator").html("<p>Изображения для показа не найдены!</p>");
} 
else { $("#rotator div").css({ "display":"none" }); 
$("#rotator").prepend("<div id='rotator_view'><img src='img/load.gif'></div>"); 
$("#rotator_view").css({ "height" : "200px" //измените высоту баннера на свою }); 
$("#rotator_view img").css({ "display" : "block", "margin" : "22.5px auto", "text-align" : "center" }); 
view (0); } // закрываем открытый выше else 
function view (num){ 
// инициализируем экземпляр класса 
settings() var obj = new settings(); 
// если показали все изображения, показываем их снова 
if (num >= obj.sum) num = 0; 
var interval = setInterval (function(){ // очистка блока показа $("#rotator_view *").remove(); 
// копия изображения в блок показа 
$(obj.banners[num]).clone().prependTo("#rotator_view"); 
// показ изображения 
$("#rotator_view div").fadeIn(obj.timeIn); clearInterval(interval); num++; },obj.timeIn); 
// скрытие изображения 
$("#rotator_view div").fadeOut(obj.timeOut); 
// снова запускаем сами себя если изображений больше одного 
if (obj.sum > 1) setTimeout(function(){view(num)},obj.timeIn+obj.timeOut+obj.timeView); } }); 
</script>

Для тех кто будет выносить скрипт за пределы файла header.php вот исходники и демо ротатора:

downloaddemo

Стили оформления для ротатора баннеров.

Теперь откроем файл стилей style.css и добавим в него в самый конец файла, немного оформления к ротатору баннеров:

/*Ротатор баннеров на JQuery ---------------------*/
#rotator {
border: 1px solid #CCC;
overflow: hidden;
height: 200px;
width: 200px;
}

Здесь, обязательно необходимо прописать точные значения высоты:  height и ширины  width изображений ротатора в пикселях для корректного отображения.

Теперь, остается самое простое: вывести скрипт в сайдбаре и загрузить изображения баннеров. Для этого в сайдбаре создаем новый wordpress виджет текст и вставляем в него следующую конструкцию:

<div id="rotator">
<div>
<img src="http://ваш сайт/img/1.jpg" title="Первый баннер" />
</div>
<div>
<img src="http://ваш сайт/img/2.jpg" title="Второй баннер" />
</div>
<div>
<img src="http://ваш сайт/img/3.jpg" title="Третий баннер" />
</div>
<div>
<img src="http://ваш сайт/img/4.gif" title="Четвертый баннер" />
</div>
<div>
<img src="http://ваш сайт/img/5.gif" title="Пятый баннер" />
</div>
</div>

Вот и все остается только загрузить изображения баннеров с нужными размерами (200px х 200px) в папку Img.

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

<div>
<a href="http://ссылка на сайт рекламодателя" rel="nofollow" target="_blank">

<img src="http://ваш сайт/img/1.jpg" title="Первый баннер" />
</a>
</div>

При клике мышкой по баннеру, в новом окне откроется сайт рекламодателя.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (9) на “Ротатор баннеров на JQuery в сайдбаре”

  • Messershmit (1 коммент.) 4 Ноябрь 2013 в 12:30

    Всем привет, хочу перейти с работы оффлайн в онлай. Скажите, чем лучше начать заниматься, дорвеями, сео, арбитражем или чем?

  • Юлия (1 коммент.) 18 Февраль 2014 в 16:41

    Скажите пожалуйста, а если выносить скрипт за пределы header.php, то куда именно? На сервер, в главную папку сайта или куда-то еще?
    И как в таких случаях следующие два пункта? Выполнять без изменений, по инструкции?
    Я пыталась добавить скрипт по вашей инструкции в заголовок, но из-за того что там куча «левых» надписей, у меня ничего не вышло. Я не поняла что удалять, а что нет. Нужно ли например, удалять двойные наклонные, перед вашими комментариями? Вы не можете этот же скрипт безо всяких приписок разместить в комментарии, для таких неумех как я?
    И еще вопрос, главный: ссылки будут открываться в новом окне или нет?

    • CMSONY
      CMSONY (172 коммент.) 18 Февраль 2014 в 19:46

      Можете и в главную папку (корень сайта) или любую другую это уже как вам удобно, здесь главное при подключении скрипта к сайту правильно указать адрес расположения скрипта… Стили оформления обязательно нужно добавлять, а вот с вызовом скрипта можно делать это и не в сайдбаре (я указал самый простой вариант расположения).
      Ссылки будут открываться так как вы пропишите html код (для открытия в новом окне используется target=»_blank»).

  • Александр (17 коммент.) 26 Январь 2015 в 16:30

    Здравствуйте!
    В целом уже запарился, помогите решить.
    При нажатии на баннер открывается новое окно, но не рекламодателя, а тупо обновилась страничка в новом окне.

    • CMSONY
      CMSONY (172 коммент.) 26 Январь 2015 в 17:48

      Вам нужно в html редакторе посмотреть ссылку которая установлена на баннер и атрибут ссылки target, который может принимать несколько значений.

  • Александр (17 коммент.) 26 Январь 2015 в 17:53

    <a href=’сайт’ rel=»nofollow»></a>

    А вот так работает!

  • Владимир (5 коммент.) 18 Март 2015 в 12:26

    Здравствуйте! Все норм, кроме одного — паузы межды появлением и исчезанием баннера. Особенно если выставить плавный переход. Как сделать, чтобы один исчезал а второй появлялся. это было бы гораздо красивее пустого окно при смене баннера.

    • CMSONY
      CMSONY (172 коммент.) 26 Март 2015 в 22:38

      Подкорректируйте в самом скрипте время появления, скрытия и тайм-аута показа.

  • Владимир (5 коммент.) 27 Март 2015 в 9:39

    Я чуть раскрою свою мысль, наверно не совсем понятно описал. Если выставить 3000 время появления и время скрытия, а время показа увеличить до 4000, то появляется красивый эффект медленного исчезания и появления. Но! Появляется пауза с пустым полем между показами и пауза ожидания первой загрузки, которую предполагается заполнить анимацией. Подправив код, вместо анимации я сразу гружу 1-й баннер, что имхо логичнее. А вот с паузой промежутка… Она вообще то не сильно критичная. Красиво было бы, конечно, одновременное угасание первого и появление второго баннера.

Оставить комментарий


вверх