Вёрстка от Колобдура

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Вёрстка от Колобдура » Scripts » Слайдер Вывод новостей из темы в шапку или объявление.


Слайдер Вывод новостей из темы в шапку или объявление.

Сообщений 1 страница 2 из 2

1

Слайдер Вывод новостей из темы в шапку или объявление. Версия 4.1 © Kolobdur (идея взята у Romych).

В НТМЛ низ:

Код:
<!-- Слайдер Вывод новостей из темы в шапку или объявление. Версия 4.1.a © Kolobdur (идея взята у Romych) -->
<!-- Настройки слайдера CSS -->
<style>
#title-logo-tdl {width: 300px !important;} /* Настройка левой ячейки таблицы (ширина). Убрать если слайдер установлен не в шапку */
#title-logo-tdr {padding-right: 0  !important;} /* Настройка правой ячейки таблицы (внутренний отступ). Сюда вставляется слайдер. Убрать если слайдер установлен не в шапку */
.stance {margin: 10px 14px 0 0;} /* Внешние отступы слайдера */
.sautor {background: #8EA1BC url(https://i.ibb.co/HF69GH1/cellpic4.jpg) repeat-x top left / contain; color: #fff;} /* Фон и цвет текста ячейки с автором */
.goover, .sdata {background: url(https://i.ibb.co/G2g52Cb/cat-big.png) repeat-x #EDF0F5;} /* Фон даты и названия темы */
.stance:before {background: white url(https://i.ibb.co/9rfv8S0/cat-mini4.jpg) repeat-x top left / contain;} /* Фон сообщения */
.news-slider {width: 586px;} /* Ширина слайдера */
.news-slider {display: flex; flex-direction: column-reverse;} /* Сортировка от первого сообщения к последнему (добавить для реверса) */
</style>
<!-- Настройки слайдера JS -->
<script>
var slider_position = 2, //расположение новостей. 1 - в шапке, 2 - в объявлении
slider_number = 12, //число отображаемых сообщений из темы
sort_dir = 'desc', //сортировка, asc - от первых сообщений темы, desc - от последних сообщений темы                                  
default_avatar = 'https://forumstatic.ru/files/0000/14/1c/20038.jpg', //аватар по умолчанию для тех, у кого он не установлен
topic_id = [641], //id темы
slider_timeout = 0, //время задрежки появления слайдера в миллисекундах. Если НТМЛ в постах не успевает отработать поставить 150.
slider_speed = -4; //скорость бегущей строки. Минус - направление снизу вверх, без минуса - с верху вниз.
</script>
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/88415.css">
<script type="text/javascript" src="https://forumstatic.ru/files/001a/ad/c5/66095.js"></script>

Правки для bo2Soft:

Код:
<!-- Правки для bo2Soft -->
<style>
/* Правка спойлера */
.slider-post .spoiler-box > blockquote.visible {display: block;overflow: auto;}
.slider-post .spoiler-box > blockquote {padding-top: 1.4em;display: none;}
.slider-post .spoiler-box > div {
  background: url(/img/plus.png) no-repeat 10px center, 
              url(https://i.ibb.co/nwN2WJ7/bbcode-quote.gif) no-repeat 100% 50% #4E79A6;
  padding: 4px 26px;
  cursor: pointer;
}
.slider-post .spoiler-box > div.visible {
  background: url(/img/minus.png) no-repeat 10px center, 
              url(https://i.ibb.co/nwN2WJ7/bbcode-quote.gif) no-repeat 100% 50% #4E79A6;
}
.slider-post .quote-box, .slider-post .code-box {margin: 0 0px 14px 0px;}
</style>

0

2

Новая версия Слайдера - 9.0.

Что нового:
- исправлены ряд ошибок
- уменьшена нагрузка на сервер
- добавлена возможность брать первое или последнее сообщение из темы
- добавлена возможность брать любое конкретное сообщение (одно или несколько) из темы по pid в сообщении (ссылка в посту)
- добавлена возможность выводить одно сообщение из одной темы
- добавлен запрет прокрутки автора при одном сообщении и одной теме
- добавлена сортировка тем и вывод их либо по расположению в настройках, либо по дате сообщения
- добавлен кеш и ограничение количества постов в кеше
- добавлена ручная прокрутка слайдера для ПК и мобильных устройств.

Недостатки:
- есть подёргивания при маленькой скорости прокручивания.
- ручная прокрутка не бесконечна, имет концовку в обе стороны

HTML и CSS :
HTML оставлен как был, исключение при одном сообщении, при запрете прокручивать автора - появляется новый блок .author-static, вынесенный из скролла. CSS тоже несколько переработан.

Ставить в НТМЛ верх:

Код:
<!-- Слайдер Вывод новостей из темы в шапку или объявление. Версия 9.0 © Kolobdur -->
<!-- Настройки слайдера CSS -->
<style>
#title-logo-tdl {width: 300px !important;} /* Настройка левой ячейки таблицы (ширина). Убрать если слайдер установлен не в шапку */
#title-logo-tdr {padding-right: 0  !important;} /* Настройка правой ячейки таблицы (внутренний отступ). Сюда вставляется слайдер. Убрать если слайдер установлен не в шапку */
.stance {margin: 10px 14px 0 0;} /* Внешние отступы слайдера */
.sautor {background: #8EA1BC url(https://forumstatic.ru/files/001a/ad/c5/24494.jpg) repeat-x top left / contain; color: #fff;} /* Фон и цвет текста ячейки с автором (cellpic4.jpg)*/
.goover, .sdata {background: url(https://forumstatic.ru/files/001a/ad/c5/48527.png) repeat-x #EDF0F5;} /* Фон даты и названия темы (cat-big.png) */
.stance:before {background: white url(https://forumstatic.ru/files/001a/ad/c5/10948.jpg) repeat-x top left / contain;} /* Фон сообщения (cat-mini4.jpg) */
.news-slider {width: 586px;} /* Ширина слайдера */
.author-static + .Ticker .news-slider {width: 454px;} /* Ширина слайдера при одном сообщении */
.news-slider {display: flex; flex-direction: column;} /* Сортировка от первого сообщения к последнему (добавить column-reverse для реверса) */
</style>

<!-- Правки для bo2Soft -->
<style>
/* Правка спойлера */
.slider-post .spoiler-box > blockquote.visible {display: block;overflow: auto;}
.slider-post .spoiler-box > blockquote {padding-top: 1.4em;display: none;}
.slider-post .spoiler-box > div {
  background: url(/img/plus.png) no-repeat 10px center, 
              url(https://forumstatic.ru/files/001a/ad/c5/49667.gif) no-repeat 100% 50% #4E79A6; /* bbcode-quote.gif */
  padding: 4px 26px;
  cursor: pointer;
}
.slider-post .spoiler-box > div.visible {
  background: url(/img/minus.png) no-repeat 10px center, 
              url(https://forumstatic.ru/files/001a/ad/c5/49667.gif) no-repeat 100% 50% #4E79A6; /* bbcode-quote.gif */
}
.slider-post .quote-box, .slider-post .code-box {margin: 0 0px 14px 0px;}
</style>

<!-- Основной стиль слайдера -->
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/001a/ad/c5/44531.css">

<!-- Настройки слайдера -->
<script>
// topics[]  - перечень тем и их настроек
// id        - ID темы
// perTopic  - сколько постов брать
// fromStart - брать с начала темы
// posts[]   - конкретные посты
// 
// Если указаны posts, они имеют приоритет над perTopic.
// 
// respectTopicOrder: true
// true  - порядок тем строго как в topics[]
// false - сортировка по дате
// 
// maxPosts: 50, - Это максимальное количество постов, которое хранится в кеше и может появиться в слайдере.

var sliderConfig = {
    position: 1,              // 1 - шапка, 2 - объявление
    sortOverall: 'desc',      // сортировка всего слайдера: 'asc' или 'desc'
    defaultAvatar: 'https://forumstatic.ru/files/0000/14/1c/20038.jpg', // аватар по умолчанию.
    topics: [
            { id:41, perTopic:1 },
            
            { id:23, perTopic:1, fromStart:true },
            
            { id:37, posts:[63,72,73] },
            
            { id:34, perTopic:1 },
            
            { id:35, perTopic:1 }
            
            ],
    respectTopicOrder: true,     // Сортровка тем по порядку
    timeout: 0,                  // задержка перед инициализацией слайдера
    speed: 0.4,                  // скорость бегущей строки
    cacheKey: 'sliderCache',     // ключ кэша localStorage
    maxPosts: 50,                // максимальное количество постов, которое хранится в кеше
    singlePostStaticAuthor: true // если true и пост один — автор не прокручивается
};
</script>

<!-- Основной скрипт слайдера -->
<script type="text/javascript" src="https://forumstatic.ru/files/001a/ad/c5/18200.js"></script>

Настройки:

topics[] - перечень тем и их настроек
id        - ID темы
perTopic  - сколько постов брать
fromStart - брать с начала темы
posts[]   - конкретные посты

Если указаны posts, они имеют приоритет над perTopic.

respectTopicOrder: true
true - порядок тем строго как в topics[]
false - сортировка по дате

maxPosts: 50 - Это максимальное количество постов, которое хранится в кеше и может появиться в слайдере.

Откуда брать pid сообщения: нажимаем на ссылку в посту, в браузере отобразится ссылка вида: https://kolobdur.mybb.ru/viewtopic.php?id=41#p86 - последние цифры после решетки и будет pid сообщения или по другому: номер поста по нумерации всего форума, а не конкретной темы.  Именно этот номер поста и надо вставлять в posts[], а не номера в теме.

+1

Похожие темы


Вы здесь » Вёрстка от Колобдура » Scripts » Слайдер Вывод новостей из темы в шапку или объявление.