ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

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

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


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Слайдер картинок в дополнительном поле профиля


Слайдер картинок в дополнительном поле профиля

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

1

Слайдер картинок в профиле пользователя
Анимирует в виде слайдера картинки, добавленные через дополнительное поле (флажки)

http://forumfiles.ru/uploads/0007/e3/f7/2/237639.gif

Автор скрипта: Герда (+ помощь в финальном фиксе от неповторимого Deff)

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

Скрипт (HTML-верх)

Код:
<!-- Слайдер картинок в профиле -->
<script src="http://forumstatic.ru/files/0006/9d/16/78933.js"></script>
<script>
$(document).ready(function() {
 $('.post-author').each(function() {
  $(this).find(".pa-fld3").wrapInner("<ul id='pics'></ul>");
  $(this).find(".pa-fld3 img").wrap("<li></li>");
     
  $(this).find("#pics").dbpasCarousel({
	itemsVisible: 2,  //количество картинок в одном слайде (РЕКОМЕНДОВАНО 2)
	slideDelay: 500,  //задержка переключения слайда (в милисекундах)
	autoSlide: 1,     //автопролистывание (1 - вкл, 0 - выкл)
	autoDelay: 5000,  //задержка автопролистывания (в милисекундах)
	hoverPause: 1,    //пауза при наведении курсора (1 - вкл, 0 - выкл)
	imgCaption: 0,
	onComplete: null
  });
 })
});
</script>

Стиль (HTML-верх)

Код:
<style>
/* Убираем название доп.поля */
.pa-fld3 .fld-name {display: none;}  /* укажи здесь номер доп.поля */

/* Картинки */
[data-carousel-control="wrapper"] ul li {
display: inline-block;
min-width: none;      /*картинки слишком узкие? установи минимальную ширину */
max-width: none;      /*картинки слишком широкие? установи максимальную ширину */
min-height: none;     /*картинки слишком высокие? установи максимальную высоту */
padding-top: 5px;     /* отступ картинок сверху */
padding-right: 5px;   /* отступ картинок справа */
padding-bottom: 5px;  /* отступ картинок снизу */
padding-left: 5px;    /* отступ картинок слева */
vertical-align: top;
text-align: center;
}

/* Стрелки */
[data-carousel-control="left"], [data-carousel-control="right"] {
font-size: 2em;                        /* Размер шрифта стрелок */
background-color: rgba(0, 0, 0, 0.1);  /* Цвет фона стрелок */
color: rgba(255, 255, 255, 1);         /* Цвет текста стрелок */
cursor: pointer;
display: table-cell;
vertical-align: middle;
}
.no-touch [data-carousel-control="left"]:hover, .no-touch [data-carousel-control="right"]:hover, [data-carousel-control="left"]:active, [data-carousel-control="right"]:active {
background-color: rgba(0, 0, 0, 0.5);  /* Цвет фона стрелок при наведении курсора */
color: rgba(255, 255, 255, 1);         /* Цвет текста стрелок при наведении курсора */
}

#pics {padding: 0; margin: 0;}
.punbb #profile .fs-box p.checkfield {display: inline-block;}
[data-carousel-name] {
display: table;
margin-right: auto;
margin-left: auto;
}
[data-carousel-control="wrapper"] {
display: table-cell;
overflow: hidden;
}
[data-carousel-control="wrapper"] ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}

[data-carousel-control="wrapper"] ul li .caption {white-space: normal;}
[data-carousel-control="wrapper"] ul li div {
overflow: auto;
text-align: left;
white-space: normal;
}
</style>

Настройка
Для скрипта создаем дополнительное поле типа "Флажки". В него вставляем ссылки на картинки (и всплывающее описания):
http://forumfiles.ru/uploads/0007/e3/f7/2/91749.jpg
Остальные настройки поля могут быть любыми на ваш вкус и цвет

Номер дополнительного поля ставим на этих двух строчках скрипта:

$(this).find(".pa-fld3").wrapInner("<ul id='pics'></ul>");
$(this).find(".pa-fld3 img").wrap("<li></li>");

и в этой части стиля:

/* Убираем название доп.поля */
.pa-fld3 .fld-name {display: none;}  /* укажи здесь номер доп.поля */

Все настройки слайдера и стиля, которые вам понадобятся подписаны.
Также я добавила в стиль код, который делает ставит картинки в ряд при редактировании профиля:
http://forumfiles.ru/uploads/0007/e3/f7/2/343823.jpg
Если у вас будет слишком много картинок, их удобнее будет пролистывать - профиль не растянется вниз.

+2

2

Из выявленных проблем:

Для корректного отображения, в профиле должно быть автивировано как минимум на одну картинку больше, чем в настройке:

itemsVisible: 2,  //количество картинок в одном слайде (РЕКОМЕНДОВАНО 2)

Т.е. если установлено две картинки, надо чтоб было как минимум 3
если установлено три - надо как минимум 4

---

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

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Слайдер картинок в дополнительном поле профиля