[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">
<a class="tip" id="cover" title="Слайдер картинок в профиле пользователя">
<div id="icon"></div>
<img src="https://forumupload.ru/uploads/0007/e3/f7/2/237639.gif" class="postimg">
</a>
<div id="cover-block">
Дата: 16.09.2020<br>
Автор: <a href="/profile.php?id=2" target="_blank">Герда</a><br>
Бесплатный скрипт<br>
Описание: Анимирует в виде слайдера картинки, добавленные через дополнительное поле (флажки).
</div>
</div>
<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0, 0, 0) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]
Применение скрипта может быть любым на ваш вкус. Например: очередной вариант наград, значков или даже инвентаря ролевого персонажа.
Картинки вставляются через дополнительное поле (тип поля - флажки) и удобно выдаются пользователям.
Но что всегда мешает выводить такие картинки в профиле в топике - это длинна списка картинок. Этот скрипт убирает картинки в удобный слайдер, который автоматически подстраивается под размер картинок. Теперь можно вставлять в профиль бесконечное количество картинок, все их можно удобно пролистывать и они не растягивают профиль.Скрипт (HTML-верх)
Стиль (HTML-верх)
Настройка
Для скрипта создаем дополнительное поле типа "Флажки". В него вставляем ссылки на картинки (и всплывающее описания):
Остальные настройки поля могут быть любыми на ваш вкус и цвет.
Номер дополнительного поля ставим на этих двух строчках скрипта:
$(this).find(".pa-fld3").wrapInner("<ul id='pics'></ul>");
$(this).find(".pa-fld3 img").wrap("<li></li>");и в этой части стиля:
/* Убираем название доп.поля */
.pa-fld3 .fld-name {display: none;} /* укажи здесь номер доп.поля */Все настройки слайдера и стиля, которые вам понадобятся подписаны.
Также я добавила в стиль код, который делает ставит картинки в ряд при редактировании профиля:
Если у вас будет слишком много картинок, их удобнее будет пролистывать - профиль не растянется вниз.
- Подпись автора
ForumD очень нужны подписчики в социальных сетях!
С увеличением числа подписчиков нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект, просто подпишись!
