Элегантный ротатор баннеров (изображений, картинок) на jQuery
59484
121
Наверное каждый веб-мастер участвует в какой-либо партнерской программе и я не исключение. И для продвижения партнерских товаров все большей популярности набирают ротаторы баннеров или изображений. Пример такого ротатора Вы можете наблюдать на моем сайте в правом сайдбаре.
Обычно для того, чтобы разместить такой ротатор на своем сайте достаточно установить специальный 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
Вот такой вот прсотой плагин, для ротации Ваших баннеров. Надеюсь кому-то пригодится.
Не стесняйтесь оставлять свои комментарии и пожелания!
-
Комментарии (121)
- Сайт
Facebook
Простая CRM
Нашли ошибку в тексте
