Вертикальная прокрутка последних тем в блоке. jQuery

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
CabinetAdmin

Вертикальная прокрутка последних тем в блоке. jQuery

CabinetAdmin 11 мар 2013, 17:55 Сообщение

Изображение


Вертикальная прокрутка последних тем в блоке "Последние темы форума".

Модификация для стиля prosilver и его клонов.

Скачиваем архив, распаковываем и закачиваем на форум:
vertical_auto-scroll.rar
(5.13 КБ) 165 скачиваний


Открываем шаблон overall_header.html, перед </head> ставим:

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

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="путь до файла/jquery.totemticker.min.js" type="text/javascript"></script> <script type="text/javascript"> // <![CDATA[ $(document).ready(function() { $('#vertical-ticker').totemticker({ row_height : '52px', max_items : 3, speed : 400, interval : 3000, next : '#ticker-next', previous : '#ticker-previous', stop : '#stop', start : '#start', mousestop : true, direction : 'down' }); }); // ]]> </script>


Если библиотека jQuery у вас уже подключена, то:

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

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

ставить не нужно.

Небольшие настройки:
max_items : 3, - количество показываемых строк.
speed : 400, - скорость прокрутки. Чем выше число, тем быстрее прокрутка.
interval : 3000, - интервал между прокрутками. Чем выше число, тем дольше интервал.

Далее. В тему вашего стиля, в конец ставим:

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

/* Vertical auto-scroll */ #vertical-ticker { position: relative; height: 156px; overflow: hidden; } #vertical-ticker li { height: 50px; } .vertical-ticker-icons { padding-left: 120px; margin-top: -14px; margin-bottom: -3px; }



В нужное место index_body.html ставите, если у вас уже стоял блок с последними темами, то просто замените его целиком:

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

<!-- BEGIN recenttopicrow --> <!-- IF not recenttopicrow.S_TOPIC_TYPE_SWITCH and not recenttopicrow.S_FIRST_ROW --> </ul> <span class="corners-bottom"><span></span></span></div> </div> <!-- ENDIF --> <!-- IF recenttopicrow.S_FIRST_ROW or not recenttopicrow.S_TOPIC_TYPE_SWITCH --> <div class="forumbg"> <div class="inner"><span class="corners-top"><span></span></span> <ul class="topiclist"> <li class="header"> <dl class="icon"> <dt>{L_RECENT_TOPICS} <div class="vertical-ticker-icons"> <a href="#" id="ticker-previous" title="Предыдущий"><img src="путь до изображения/player_rew.png" width="16" height="16" alt="Предыдущий"></a> <a href="#" id="ticker-next" title="Следующий"><img src="путь до изображения/player_fwd.png" width="16" height="16" alt="Следующий"></a> <a href="#" id="stop" title="Стоп"><img src="путь до изображения/player_pause.png" width="16" height="16" alt="Стоп"></a> <a href="#" id="start" title="Старт"><img src="путь до изображения/player_play.png" width="16" height="16" alt="Старт"></a> </div> </dt> <dd class="posts">{L_REPLIES}</dd> <dd class="views">{L_VIEWS}</dd> <dd class="lastpost"><span>{L_LAST_POST}</span></dd> </dl> </li> </ul> <ul class="topiclist topics" id="vertical-ticker"> <!-- ENDIF --> <li class="row<!-- IF recenttopicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->"> <dl class="icon" style="background-image: url({recenttopicrow.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;"> <dt style="<!-- IF recenttopicrow.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{recenttopicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{recenttopicrow.TOPIC_FOLDER_IMG_ALT}"><!-- IF recenttopicrow.S_UNREAD_TOPIC --><a href="{recenttopicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{recenttopicrow.U_VIEW_TOPIC}" class="topictitle">{recenttopicrow.TOPIC_TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF --> <!-- IF recenttopicrow.S_TOPIC_UNAPPROVED or recenttopicrow.S_POSTS_UNAPPROVED --><a href="{recenttopicrow.U_MCP_QUEUE}">{recenttopicrow.UNAPPROVED_IMG}</a> <!-- ENDIF --> <!-- IF recenttopicrow.S_TOPIC_REPORTED --><a href="{recenttopicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br /> <!-- IF recenttopicrow.PAGINATION --><strong class="pagination"><span>{recenttopicrow.PAGINATION}</span></strong><!-- ENDIF --> <!-- IF recenttopicrow.ATTACH_ICON_IMG -->{recenttopicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {recenttopicrow.TOPIC_AUTHOR_FULL} &raquo; {recenttopicrow.FIRST_POST_TIME} <!-- IF recenttopicrow.U_VIEW_FORUM and recenttopicrow.FORUM_NAME --><br />{L_IN} <a href="{recenttopicrow.U_VIEW_FORUM}" style="font-weight: bold;">{recenttopicrow.FORUM_NAME}</a><!-- ENDIF --> </dt> <dd class="posts">{recenttopicrow.REPLIES} <dfn>{L_REPLIES}</dfn></dd> <dd class="views">{recenttopicrow.VIEWS} <dfn>{L_VIEWS}</dfn></dd> <dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {recenttopicrow.LAST_POST_AUTHOR_FULL} <a href="{recenttopicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{recenttopicrow.LAST_POST_TIME}</span> </dd> </dl> </li> <!-- IF recenttopicrow.S_LAST_ROW --> </ul> <span class="corners-bottom"><span></span></span></div> </div> <!-- ENDIF --> <!-- BEGINELSE --> <div class="panel"> <div class="inner"><span class="corners-top"><span></span></span> <strong>{L_NO_TOPICS}</strong> <span class="corners-bottom"><span></span></span></div> </div> <!-- END recenttopicrow -->


Всё. Установка завершена.


Архив перезалит - 10.02.2014 // CabinetAdmin
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



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

Re: Вертикальная прокрутка последних тем в блоке. jQuery

CabinetAdmin 09 май 2013, 06:37 Сообщение

BOJIK
Subsilver я к сожалению не смог заставить правильно работать.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

ФаВоРиТ

Вертикальная прокрутка последних тем в блоке. jQuery

ФаВоРиТ 12 мар 2015, 20:38 Сообщение

Возможно сделать такое оформление как у вас на форуме третий блок стоит ?

GoDFaTHeR

Вертикальная прокрутка последних тем в блоке. jQuery

GoDFaTHeR 13 мар 2015, 23:47 Сообщение

ФаВоРиТ писал(а):Источник цитаты Возможно сделать такое оформление как у вас на форуме третий блок стоит

Возможно :) делайте
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ

igorbond

Вертикальная прокрутка последних тем в блоке. jQuery

igorbond 14 мар 2015, 00:53 Сообщение

А на 3.1 это так же делается? Или чуть другой подход?

igorbond

Вертикальная прокрутка последних тем в блоке. jQuery

igorbond 14 мар 2015, 00:59 Сообщение

Да и вопрос, как сделать чтобы прокрутка была только по желанию, без автомата?




Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 3 гостя