Что делает плагин ? Добавляет плавную прокрутку содержимого в каком либо блоке. Достаточно интересная вещь, можно и рассказать по его подключении и настройке, авось пригодится кому.
Для начала нам нужно скачать сам плагин отсюда. Из архива берем папку
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.totemticker.js"></script>
<script type="text/javascript">
$(function(){
$('#vertical-ticker').totemticker({
row_height : '100px',
next : '#ticker-next',
previous : '#ticker-previous',
stop : '#stop',
start : '#start',
mousestop : true,
});
});
</script>
Код: Выделить всё
row_height : '100px',
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Теперь определяемся что у вас в блоке будет крутиться и где, потому как советую обернуть все выше представленное в одно из , потому как незачем нам грузить эти скрипты на те страницы, где они не будут нужны.
А сейчас нам надо создать сам блок с содержимым и необходимыми элементами. Все просто, для примера есть блок
Код: Выделить всё
<ul id="vertical-ticker">
<li>One Time</li>
<li>Baby</li>
<li>One Less Lonely Girl</li>
<li>Somebody to Love</li>
<li>Eenie Meenie</li>
<li>Never Say Never</li>
<li>U Smile</li>
</ul>
Код: Выделить всё
<a href="#" id="ticker-previous">Previous</a>
Код: Выделить всё
<a href="#" id="ticker-next">Next</a>
Код: Выделить всё
<a id="stop" href="#">Stop</a>
Код: Выделить всё
<a id="start" href="#">Start</a>
Так же в файле
Код: Выделить всё
$.omr.totemticker.defaultOptions = {
message : 'Ticker Loaded', /* Disregard */
next : null, /* ID of next button or link */
previous : null, /* ID of previous button or link */
stop : null, /* ID of stop button or link */
start : null, /* ID of start button or link */
row_height : '100px', /* Height of each ticker row in PX. Should be uniform. */
speed : 800, /* Speed of transition animation in milliseconds */
interval : 4000, /* Time between change in milliseconds */
max_items : null, /* Integer for how many items to display at once. Resizes height accordingly (OPTIONAL) */
};
Код: Выделить всё
row_height : '100px', /* Height of each ticker row in PX. Should be uniform. */
Код: Выделить всё
speed : 800, /* Speed of transition animation in milliseconds */
Код: Выделить всё
interval : 4000, /* Time between change in milliseconds */
Код: Выделить всё
max_items : null,
Впринципе на этом все, успехов в освоении