Использование JQuery Totemticker phpbb3

В данном подфоруме я буду выкладывать разнообразные украшения форума phpbb3, от смайлов до скриптов, от ВВ-кодов до различных полезных программ.

Модераторы: Vl@d1m1r, Lorem Ipsum, Atlas

Правила форума
----
Ответить
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Использование JQuery Totemticker phpbb3

Сообщение DeaDRoMeO »

Всем привет. Лично по моим наблюдениям, в последнее время в достаточном количестве модификаций начинает использоваться плагин Totemticker для JQuery, допустим вот в последнем анонсе - .

Что делает плагин ? Добавляет плавную прокрутку содержимого в каком либо блоке. Достаточно интересная вещь, можно и рассказать по его подключении и настройке, авось пригодится кому.

Для начала нам нужно скачать сам плагин отсюда. Из архива берем папку js и кидаем в корень форума. В шаблон стиля overall_header.html перед тегом </head> вставляем

Код: Выделить всё

	<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>
Если у вас уже подключен jquery.min.js, то удалите данную строку.

Теперь определяемся что у вас в блоке будет крутиться и где, потому как советую обернуть все выше представленное в одно из , потому как незачем нам грузить эти скрипты на те страницы, где они не будут нужны.

А сейчас нам надо создать сам блок с содержимым и необходимыми элементами. Все просто, для примера есть блок

Код: Выделить всё

		<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>
Тегами <li> обрамлены пункты которые будут плавно двигаться вверх, содержимое может быть любым. А так же нужно добавить еще и управляющие кнопки - Назад

Код: Выделить всё

<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>
Отмечу, что не обязательно вставлять все эти кнопки, это на ваше усмотрение, кнопки можно сделать любыми на свой вкус(все зависит от ваших познаний в HTML), главное не теряйте айди, это замечание относится и к самому блоку, не потеряйте id="vertical-ticker", когда будете оформлять блок, присвойте его к головному тегу в вашей конструкции.

Так же в файле js/jquery.totemticker.js есть такой кусочек

Код: Выделить всё

 $.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, 
Самая интересная строка, количество элементов (строк) отображаемых одновременно (этим же параметром регулируется высота вашего блока, так же не забываем про row_height ). По умолчанию отображаются все элементы, смените
null на нужное вам число отображаемых строк.

Впринципе на этом все, успехов в освоении :men:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#1
Аватара пользователя
Олег В
Активно общаюсь
Активно общаюсь
Сообщения: 340
Стаж: 11 лет
Контактная информация:

Использование JQuery Totemticker phpbb3

Сообщение Олег В »

Добрый день! Не подскажете в каком файле нужно сделать изменения, что бы задать другой размер для отображаемой картинки в рекламе? Хочу использовать мод для прокрутки картинок и фотографий!
Изначально стоит ограничение 458х50. Мне нужен размер 1400х300. Спасибо
#2
Ответить