Использование JQuery Totemticker phpbb3
Добавлено: 18 июл 2013, 00:01
Всем привет. Лично по моим наблюдениям, в последнее время в достаточном количестве модификаций начинает использоваться плагин Totemticker для JQuery, допустим вот в последнем анонсе - .
Что делает плагин ? Добавляет плавную прокрутку содержимого в каком либо блоке. Достаточно интересная вещь, можно и рассказать по его подключении и настройке, авось пригодится кому.
Для начала нам нужно скачать сам плагин отсюда. Из архива берем папкуjs и кидаем в корень форума. В шаблон стиля overall_header.html перед тегом </head> вставляем
Сразу же обращаем внимание на строку
Тут конфигурируется высота строки на которую будет периодически подыматься вверх содержимое вашего блока, а так же обращаем внимание на эту строку
Если у вас уже подключен jquery.min.js , то удалите данную строку.
Теперь определяемся что у вас в блоке будет крутиться и где, потому как советую обернуть все выше представленное в одно из , потому как незачем нам грузить эти скрипты на те страницы, где они не будут нужны.
А сейчас нам надо создать сам блок с содержимым и необходимыми элементами. Все просто, для примера есть блок
Тегами <li> обрамлены пункты которые будут плавно двигаться вверх, содержимое может быть любым. А так же нужно добавить еще и управляющие кнопки - Назад
Вперед
Стоп
Старт
Отмечу, что не обязательно вставлять все эти кнопки, это на ваше усмотрение, кнопки можно сделать любыми на свой вкус(все зависит от ваших познаний в HTML), главное не теряйте айди, это замечание относится и к самому блоку, не потеряйте id="vertical-ticker" , когда будете оформлять блок, присвойте его к головному тегу в вашей конструкции.
Так же в файлеjs/jquery.totemticker.js есть такой кусочек
где
Высота поднимаемой строки, значение должно совпадать со значением аналогичной строки из хедера (см. начало статьи)
Скорость анимации в миллисекундах
Интервал между анимацией (т.е. задержка перед сменой одной строки на другую)
Самая интересная строка, количество элементов (строк) отображаемых одновременно (этим же параметром регулируется высота вашего блока, так же не забываем про row_height ). По умолчанию отображаются все элементы, смените
null на нужное вам число отображаемых строк.
Впринципе на этом все, успехов в освоении
Что делает плагин ? Добавляет плавную прокрутку содержимого в каком либо блоке. Достаточно интересная вещь, можно и рассказать по его подключении и настройке, авось пригодится кому.
Для начала нам нужно скачать сам плагин отсюда. Из архива берем папку
Код: Выделить всё
<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,
Впринципе на этом все, успехов в освоении