Информация от спонсоров

 

Полезная информация


----

Начать новую тему Ответить на тему
АвторСообщение

 Сообщение Использование JQuery Totemticker phpbb3 
#1 

Аватар пользователя

Всем привет. Лично по моим наблюдениям, в последнее время в достаточном количестве модификаций начинает использоваться плагин 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, по ЛС не отвечаю !!!

Теги темы
Использование JQuery Totemticker phpbb3
          Вернуться наверх  
 

#2 

Аватар пользователя

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


          Вернуться наверх  
 
 
Начать новую тему Ответить на тему


Дополнительные возможности

  Похожие темы  Автор  Ответов  Просмотров  Последнее сообщение 
Аватар пользователя Использование JQuery Countdown Timer phpbb3
Речь пойдет о подключении плагина JQuery Countdown Timer (таймер обратного отсчета)

DeaDRoMeO

0

2674

Аватар пользователя

20 июл 2013, 10:51

DeaDRoMeO

Аватар пользователя Совместное использование файлов разными форумами

ursego

2

323

Аватар пользователя

15 фев 2013, 10:18

DeaDRoMeO

Аватар пользователя overall_header и jquery

Vl@d1m1r

12

786

Аватар пользователя

21 сен 2013, 00:09

brigadir

Аватар пользователя Если используются два jQuery.js

jasiuk

6

597

Аватар пользователя

09 ноя 2012, 05:37

DeaDRoMeO

Аватар пользователя Костыли или как подружить JQuery разных версий
Мини-статейка о дружбе JQuery разных версий

DeaDRoMeO

6

5448

Аватар пользователя

02 ноя 2014, 11:52

Discovery

Оставить свой комментарий

Поделиться темой с помощью

Ссылки на тему

Прямая ссылка:
BB-код для форумов, сайтов, блогов:
HTML ссылка:
 


cron

Самая неформальная поддержка phpBB :P