portfoliopost
FDteam-portf
freepost
Превращение категорий в горизонтальный слайдер для форумов на форумах MyBB.ru
Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.Инструкции
Все коды стилей ставятся в Администрирование > Свой стиль или HTML-верх между тегов <style>Код:<style> тут коды </style>Код:
Скрипт
Скрипт устанавливаем в HTML-низ.Вариант 1. Прокрутка останавливается при достижении конца:
Вариант 2. Прокрутка по кругу:
Настройки стиля
1. Ставим форумы в строчку
Для начала нужно поставить коды, которые позволят "превратить" категорию в слайдер2. Блочная верстка форумов
Затем надо сделать блочную верстку форумов на главной, чтобы поправить отображение форумов, задать их ширину и т.д.Подробнее о блочной верстке форумов вы можете почитать тут: Стиль разделов форума на главной (MyBB) [Герда]
Там вы найдете ответы на все вопросы про "Украшательства" форумов и как расставить контент ячеек внутри форума-блока.Вот код, который необходимо поставить для форумов
3. Добавляем в категории стрелки
Стрелки вставляются через селекторы .catleft и .catright в заголовках категорий. Если они у вас задействованы (для иконок, картинок или еще чего-то), надо будет что-то придумать.
Также многие стили по умолчанию скрывают catright и catleft. На всякий случай я постаралась подобрать такой код, чтобы они точно отобразились. Но если пользуетесь функцией "Свой стиль", лучше убедиться, что у вас просто нет кодов, скрывающих этот селектор (или найти и удалить их).Настройки скрипта
var leftMargin = 40;
отступ блока с форумом
var blockWidth = 600;
полная ширина блока (включая отступ)
Изменение начального слайда
Если нужно поменять начальную позицию слайдера для определенных категорий, сожно добавлять такие строки в конец скрипта:$('.category-10')[0].dataset.start = 1;
Красное - селектор конкретной категории. Как узнать кникальный селектор можно посмотреть здесь: Дизайн отдельных категорий и заголовков категорий
Синее - номер форума, на котором должен открыться слайдер, нумерация начинается с 0
После них скрипту придется нужно переместиться в новое положение слайдов, поэтому добавляем после наших кодов:Код:$('.category').each(function() { $(this).find('tbody tr').first().css('margin-left', (leftMargin - $(this)[0].dataset.start * blockWidth) + 'px'); });
- Подпись автора
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.