Генератор форм

Баннер

Для веб-мастера

Реклама


Элегантный ротатор баннеров (изображений, картинок) на jQuery

Рейтинг:
Дата: 20 октября 2011 Просмотры 44025 Комментарии 120
Элегантный ротатор баннеров (изображений, картинок) на jQuery

Наверное каждый веб-мастер участвует в какой-либо партнерской программе и я не исключение. И для продвижения партнерских товаров все большей популярности набирают ротаторы баннеров или изображений. Пример такого ротатора Вы можете наблюдать на моем сайте в правом сайдбаре.

Обычно для того, чтобы разместить такой ротатор на своем сайте достаточно установить специальный javascript-код. Если разбираться глубже, то задачей этого javascript-а является встраивание на Вашу страницу специального iframe, который уже и загружает ротатор изображений на Вашу страницу с сайта разработчика.

Все бы ничего, но у данного подхода есть несколько недостатков:

  • Уязвимость сайта. На Ваш сайт можно загрузить вредоносный код. Поэтому нужно доверять разработчикам,  если Вы решили размещать их ротатор у себя на сайте
  • Вы зависите от сайта разработчика. Т.е. если сайт разработчика будет не доступен, то и ротатор баннеров не будет отображаться на Вашем сайте.
  • Увеличивается время загрузки страницы. Если посмотреть исходный код таких ротаторов баннеров, то мы можем увидеть, что там подключаются различные javascript-файлы и библиотеки, которые могут весит > 100кб. При этом некоторые библиотеки, такие как jQuery, уже могут быть подключены на Вашей странице, но браузеру придется загрузить её дважды.

Все это наводило меня на мысли создать свой ротатор баннеров и не зависит ни от кого, а последним пинком под зад для меня послужило недавнее «падение» сайта Евгения Попова (ну или что там с ним было), ротатор которого я использую на этом сайте, из-за чего мой сайт долго загружался.

В результате на свет появился мой собственный ротатор картинок на jQuery, основным преимуществом которого является то, что для его работы не требуется дополнительных javascript-библиотек (кроме jQuery конечно) и весь html-код самого ротатора формируется за счет javascript-а в самом плагине. Что позволяет браузеру один раз закэшировать файл плагина и в дальнейшем брать его из кэша, а это увеличит скорость загрузки сайта.

Для того чтобы использовать такой ротатор на своем сайте Вам необходимо первым делом подключить библиотеку jQuery и сам плагин. Но подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.

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

<script type="text/javascript">
window.jQuery || document.write('<script type="text/javascript" src="js/jquery-1.6.2.min.js"><\/script>');
</script>

<script type="text/javascript" src="js/jquery.rotator.js"></script>

Данный код необходимо разместить между тегами <head></head> на Вашем сайте.

Останавливаться на этом я не буду, так как на эту тему у меня есть специальная статья «Увеличиваем скорость загрузки страницы загружая jQuery с репозитория Google», скажу лишь что, используя такой подход, мы можем увеличить скорость загрузки страницы

После того, как все необходимые javascript файлы подключены, необходимо добавить следующие стили на Вашу страницу:

ul.slides_rotator{
    margin: 0;
    padding: 0;
    position: relative;
      list-style: none;
}

div.rotator{
    float: left;
    margin: 0 25px;
      position: relative;
}

a.rotator-nav{
    position: absolute;
    top: 50%;
    margin-top: -16px;
    z-index: 3;
    cursor: pointer;    
}

a.rotator-nav div{
    height: 32px;
    width: 32px;
    background: url('../images/nav.png')  no-repeat;    
}

#rotator-left{
    left:-16px;    
}

#rotator-left div{
    background-position: 0 0;    
}

#rotator-left:hover div{
    background-position: 0 -32px;    
}

#rotator-right{
    right:-16px;
}

#rotator-right div{
    background-position: -32px 0;    
}

#rotator-right:hover div{
    background-position: -32px -32px;
}

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

<div id='rotator'></div>

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

<script type="text/javascript">
$(function(){
    
    $('#rotator').rotator({
        slides: [
                {
                    url:'http://1popov.ru/c/577/disc1',
                    img:'images/white200x450.jpg'
                },
                {
                    url:'http://1popov.ru/c/577/disc3',
                    img:'images/beige200x450.jpg'
                },
                {
                    url:'http://1popov.ru/c/577/disc5',
                    img:'images/sky200x450.jpg'
                },
                {
                    url:'http://1popov.ru/c/577/disc6',
                    img:'images/gold200x450.jpg'
                },
                {
                    url:'http://1popov.ru/c/577/disc8',
                    img:'images/green200x450.jpg'
                },
                {
                    url:'http://1popov.ru/c/577/disc11',
                    img:'images/black200x450.jpg'
                }
        ],
        speed: 500,
        timeout: 3000,
        random: true,
        width: 200,
        height: 450,
        fx:'slide',
        autorun: true, 
        nav: true
    });

})
</script>

Как видно плагину мы передаем ряд параметров, а именно:

  • slides — массив слайдов, состаящий из объектов в которых задается партнерская ссылка — url, и картинка слайда — img
  • speed — скорость анимации в мсек.
  • timeout — время показа одного слайда в мсек.
  • random — если установить в true, то слайды будут выводится в хаотичном порядке
  • width — ширина одного слайда
  • height — высота одного слайда
  • fx — эффект анимации (slide — скольжение, fade — затемнение), по умолчанию - fade
  • autorun — автоматически прокручивать все слайды, по умолчанию - true
  • nav — отображать кнопки навигации, по умолчанию — false

Вот такой вот прсотой плагин, для ротации Ваших баннеров. Надеюсь кому-то пригодится.

Не стесняйтесь оставлять свои комментарии и пожелания!

Оцените эту статью:



Похожие статьи
Интересно почитать

    Получать новые материалы этого сайта на свой email адрес?

    Отправлять мне комментарии по эл. почте?

Подписка

Подпишитесь прямо сейчас на почтовую рассылку:

"Новичку Инфо-Бизнеса.
От Простого К Сложному"

Ваше имя: *

Ваш e-mail: *

и получайте каждую неделю на свой электронный адрес список новых статей, опубликованных на страницах этого проекта.

Реклама

Баннер

Топ комментаторы

Нашли ошибку в тексте

Система Orphus
http://biznesguide.ru/coding/152.html
4,3 из 5 на основе 90 оценок.
Твиттер Facebook Google plus RSS