Всё обо всём или попытки заработка

Я хотел приспособить у себя на сайте ротатор банеров, что-то на подобии как у joomla. Есть возможность использовать php код уже готовых ротаров, но мы не ищем лёгких путей и поэтому сейчас рассмотрим ctrotator на jquery.
Для начала нам нужно подключить jquery (если ещё это не сделано) и скрипт ctrotator`a:

<script src=”lib/jquery-1.2.6.pack.js” type=”text/javascript”></script> <script src=”src/jquery.ctrotator.js” type=”text/javascript”></script>

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

<script type=”text/javascript”>
var dataSource = [
{title: 'test', url: 'http://ksail.ru', tip: 'Заработок не выходя из дома'},
{title: 'test2', url: 'http://dtsa.ru', tip: 'Бесплатный каталог статей'},
{title: 'test3', url: 'http://google.com', tip: 'Гугля'},
{title: 'test4', url: 'http://ya.ru', tip: 'Яндекс'}
];
</script>

Далее создадим сам ротатор и вместе его вызова напишем данный код:

<ul id=”container”></ul>

<script type=”text/javascript”>
$(’#container’).ctRotator(dataSource, {
showCount:5,
speed:1000
});
</script>

Теперь рассмотрим пример создания ротатора из RSS ленты
Опять таки сначала подключаем скрипты:

<link rel=’stylesheet’ href=’src/jquery.ctrotator.css’ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’lib/jquery-1.2.6.pack.js’></script>
<script type=’text/javascript’ src=’src/jquery.ctrotator.js’></script>
<script type=’text/javascript’ src=’src/jquery.ctrotator.bridge.rss20.js’></script>

Далее вместе вызова функции содаём ротатор с нужными параметрами:

var bridge = new ctRotatorBridgeRss20(’http://ksail.ru/feed’, function(dataSource){ $(’#container’).ctRotator(dataSource, {showCount:10}); }); bridge.getDataSource();

И вот наконец-то мы добрались к наиболее меня интересующему вопросу по ротации одиночных картинок. Для начала всё также подключаем скрипты в header.php

<link rel=’stylesheet’ href=’src/jquery.ctrotator.css’ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’lib/jquery-1.2.6.pack.js’></script>
<script type=’text/javascript’ src=’src/jquery.ctrotator.js’></script>
<script type=’text/javascript’ src=’src/jquery.ctrotator.bridge.flickr.js’></script>

А теперь создадим ротарот который вставим на месте вызова

var bridge = new ctRotatorBridgeFlickR(’http://ksail.ru/image/’, function(dataSource){
$(’#container’).ctRotator(dataSource, {
showCount:10,
speed: 1000,
itemRenderer:function(item){
return ‘<li class=”ctrotator-item”><a href=”‘ +
item.url+ ‘”><img src=”‘ + item.image +
‘” alt=”‘ + item.title + ‘”/></a></li>’;
}
});
});

bridge.getDataSource();

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

Спонсоры поста:
покупка продажа уникального контента
ремонт фото
Ремонт часов