Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Новые возможности форумов » Скрипты от пользователей 3


Скрипты от пользователей 3

Сообщений 481 страница 500 из 569

1

Администрация MyBB не гарантирует работоспособность данных скриптов, вы ставите их на свой страх и риск.

Для тех кто выкладывает скрипты:
1) Дайте краткое описание скрипта.
2) Обязательно укажите куда его вставлять.
3) Сам скрипт вставьте в bb-коды [сode] [/сode] или в [quotе] [/quotе]

Авторы скриптов, размещающие свои разработки на бесплатной и добровольной основе, оставляют за собой право в любой момент вносить в них изменения на своё усмотрение (в том числе: обновление с целью улучшения функционала и стабильности; изъятие из публичного пользования; включение рекомендательных интеграций, содержащих информацию о других разработках, относящихся к MyBB). Скрипты предоставляются авторами "как есть" и без каких-либо гарантий, высказанных или подразумеваемых. При этом размещаемый скрипт должен соответствовать условиям Пользовательского соглашения, не содержать вредоносного кода и не использоваться для рекламы и продвижения сторонних ресурсов, не относящихся к MyBB.

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

Данные правила относятся ко всем свободно распространяемым скриптам, размещаемым как в этой теме, так и в других темах раздела Новые возможности форумов.

В данной теме запрещено задавать вопросы и просить скрипты. Для этого есть раздел  Запросы по скриптам[10], при нарушение данного правила будет выдаваться предупреждение в профиль.

Отредактировано Alex_63 (Пт, 14 Мар 2025 11:28:27)

+8

481

Обновлен скрипт Новое выделение кода в блоке "Код"
Налажена работа копирования выделенного текста в блоке "Код" по нажатию сочетания Ctrl+C. Скрипт должен работать корректно в любых версиях браузеров.

+8

482

Часто спрашивают, как сделать отображение смайлов и другого специфичного 
функционала для формы ответа также и в ЛС и на странице редактирования, - 
Попытался решить эту проблему скриптом, пока от сервиса это не реализовано:

Подгрузка кодов из Формы Ответа на страницу редактирования и ЛС

С 07.08.2020 неактуально, реализовано в движке форумов

В HTML верх:

<!-- Подгрузка формы ответа на стр.редактирования и ЛС -->
<script type="text/javascript">
if($('#pun-messages,#pun-edit').length)(function () {
//==================================//
var forum_Load =
126; //Форум с возможностью создания тем всем юзерам
//==================================//
var lnk='/post.php?fid='+forum_Load,form=sessionStorage.getItem('formCNT');
if(!form){form=$.ajax({url:lnk,async:false,cache:false}).responseText;
form=form.split(/><\/textarea><\/span>\s*<\/p>|<p\sclass="checkfield">/)[1];
sessionStorage.setItem('formCNT',form);} $().pun_mainReady(function(){FORUM.dw=document.write;
document.write=function(a){$(a).appendTo('#f-cnt');};form='<div id="f-cnt">'+form+'<div>';
$(form).insertAfter('.areafield');});}());</script><script>
$().pun_mainReady(function(){if(FORUM.dw)document.write=FORUM.dw});</script>

Красным - указываем ID форума, в котором все группы могут создавать темы (см. настройки в Администрирование - Форумы),
ID форума - последние цифры в адресной строке на странице форума, к примеру: https://forum.mybb.ru/viewforum.php?id=16


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

+6

483

собираю в теме разбросанные наработки из заказов скриптов, может кому-то ещё пригодится

Напоминание пользователю не писавшему 30 дней

http://se.uploads.ru/BzvEk.jpg

Код:
<!-- Напоминание пользователю не писавшему 30 дней -->
<style type="text/css">
/* pазмер шрифта, ширина и высота всплывающей таблички */
.jGrowl .pomni {background:#cc3300;padding: 3px;text-align:center;font-size:18px;width: 400px !important;height: 151px !important;}
/* фон таблички (тень шрифта и т.д.) */
.jGrowl .pomni .jGrowl-message {height: 140px !important;background: #e7a61a;border-radius: 6px;-webkit-box-shadow: inset 0px 1px 32px 9px rgba(244,67,54,1);-moz-box-shadow: inset 0px 1px 32px 9px rgba(244,67,54,1);box-shadow: inset 0px 1px 32px 9px rgba(244,67,54,1);text-shadow:0px 5px 7px #060600 !important;padding-top: 12px;
}
.jGrowl .pomni .jGrowl-close {display: none;}
</style>
<script type="text/javascript">
var porog = 30; //порог срабатывания скрипта для пользователя не писавшего N-ое количество дней
if(UserPosts>10&&$('#pun-viewtopic').length){var t=new Date((RequestTime-UserLastPost)*1e3),r=Math.ceil(t/864e5);r>=porog&&$.jGrowl(UserLogin+', что-то Вы ничего не писали уже '+r+' дней',{theme:'pomni',position:'center',life:6e3})}
</script>

Скрипт не срабатывает для тех, кто не писал вовсе или написал не больше 10 сообщений,
за это отвечает эта часть кода:

if(UserPosts>10

Напоминалка закроется сама через 6 секунд, но есть вариант по-жёстче, не закроется пока пользователь сам её не закроет или всё таки не напишет новый пост

Код:
<!-- Напоминание пользователю не писавшему 30 дней -->
<style type="text/css">
/* pазмер шрифта, ширина и высота всплывающей таблички */
.jGrowl .pomni {padding: 3px;text-align:center;font-size:18px;width: 400px !important;height: 151px !important;
} 
/* фон таблички (тень шрифта и т.д.) */
.jGrowl .pomni .jGrowl-message {height: 140px !important;background: #e7a61a;border-radius: 6px;-webkit-box-shadow: inset 0px 1px 32px 9px rgba(244,67,54,1);-moz-box-shadow: inset 0px 1px 32px 9px rgba(244,67,54,1);box-shadow: inset 0px 1px 32px 9px rgba(244,67,54,1);text-shadow:0px 5px 7px #060600 !important;padding-top: 12px;
}
</style>
<script type="text/javascript">
var porog = 30;//порог срабатывания скрипта для пользователя не писавшего N-ое количество дней
if(UserPosts>1&&$('#pun-viewtopic').length){var t=new Date((RequestTime-UserLastPost)*1e3),r=Math.ceil(t/864e5);r>=porog&&$.jGrowl(UserLogin+', что-то вы ничего не писали уже '+r+' дней',{theme:'pomni',position:'center',sticky:!0})}
</script>

+6

484

Рейтинг самых уважаемых с опциями настроек

Код:
<!-- Рейтинг уважения-->
<table id="userhero2" style="width: auto;"></table>
<style type="text/css">
#userhero2 img{border:1px solid #696969;border-radius: 9px;
}
#userhero2 figure {display:block;height: 50px;width: 50px;position: relative;overflow:hidden;text-align: center;
}
#userhero2 figcaption {display:block; width:44px;background:#99CC33;background:rgba(153,204,0,.8);border-radius: 0 0 7px 7px;box-shadow: 0 0 5px #40310A inset;color: #fff; font-size: 0.8em;font-weight: bold;height: 15px;left: 3px;position: absolute;top: 30px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );
}
</style>
<script type="text/javascript">
var limit = 10, // количество выводимых человек на доске почёта
wt = 42, // ширина аватаров
ht = 62, // высота аватаров
figurTop = 30, // высота блока репутации, видимая часть
figurTop2 = 50;      // высота блока репутации, на которую он опускается при наведении курсора
</script>
<script type='text/javascript' src='https://forumstatic.ru/files/0017/d8/50/69985.js'></script>

Устанавливать на отдельной странице или в Объявление

+6

485

Продолжение темы с рейтингами. Как известно можно воспользовавшись скриптом или поиском в списке Участников форума посмотреть условный список/рейтинг самых уважаемых, но нет возможности посмотреть самых позитивных/негативных. Данный скрипт решает эту задачу.

Рейтинг самых позитивных/негативных

http://s5.uploads.ru/Quzys.jpg     http://se.uploads.ru/sRVxi.jpg
ДЕМО

Код:
<!-- Рейтинг самых позитивных/негативных -->
<style type="text/css">
#joper {width: 100%;text-align: center; margin:0 auto;}
.tabz {height: 25px;line-height: 20px;margin: 0 0 3px;list-style: none;
}
.tabz li {float: left;margin-right: 1px; cursor:pointer;background: url("//uploads.ru/i/P/5/Q/P5Q2V.png") no-repeat scroll -366px 0 transparent;background-position-x: -366px;background-position-y: 0px;color: #444444;display: block;margin-bottom: -1px;padding: 0 14px 1px;text-align: center;text-decoration: none;width: 126px;height: 29px;
}
.tabz li:hover {color:#EFEFEF;padding: 0 14px;background: url("//uploads.ru/i/P/5/Q/P5Q2V.png")no-repeat scroll;background-position: -366px -31px; text-decoration:none;
}
.tabz .active {color: #444;padding: 0px 14px 2px;border: medium hidden;line-height: 22px;background-position: -366px -61px;
}
input[type="text"] {background:transparent;border:none !important;padding:0 !important;text-align:center;vertical-align:sub;width:84px;}
input[type="text"]:hover {color: #cbc3f7;
}
.tabz .active input[type="text"]:hover {color: #cbc3f7;}
div[class^="t-"]:not(.t-0) {display: none;}
div[class^="t-"] {background: #fbfbfb;border: 1px solid #888;border-radius: 0 0 9px 9px;padding: 0 5px 5px;counter-reset: span;width: 297px;
} 
#us_min img{border:1px solid #696969;border-radius: 9px;-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);filter: grayscale(100%);transition: all 0.5s ease;
}
#us_min figure {display:block;height: 52px;width: 52px;position: relative;overflow:hidden;text-align: center;
}
#us_min figcaption {display:block; width:50px;background:rgba(255, 46, 0, 0.8);border-radius: 0 0 7px 7px;box-shadow: 0 0 5px #40310A inset;color: #fff; font-weight: bold;font-size: 12px;height: 15px;left: 1px;position: absolute;top: 36px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );
}
#us_min td img:hover {-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);filter: grayscale(0%);
}
.tipsy-inner {background-color:#004d66; color:white; max-width:200px;
}
#us_min th,#us_poz th {border-radius: 7px;height: 22px;font-size: small;
}
#us_poz img{border:1px solid #696969;border-radius: 9px;
}
#us_poz figure {display:block;height: 52px;width: 52px;position: relative;overflow:hidden;text-align: center;
} 
#us_poz figcaption {display:block; width:50px;background:rgba(245, 124, 0, 0.8);border-radius: 0 0 7px 7px;box-shadow: 0 0 5px #40310A inset;color: #fff; font-size: 0.8em;font-weight: bold;font-size: 12px;height: 15px;left: 1px;position: absolute;top: 36px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );
}
</style>
<div id="joper">
<ul class="tabz">
<li class="t-0 active"> &#x271A; </li>
<li class="t-1"> &minus; </li>
</ul>
<div class="t-0"><table id="us_poz" cellspacing="5" style=""></table></div>
<div class="t-1"><table id="us_min" cellspacing="5" style=""></table></div>
</div>
<script type="text/javascript">
var lim = 25, //количество ячеек (персон) в таблице
ktd = 5; //количество ячеек в строке
</script>
<script type="text/javascript" src="https://forumstatic.ru/files/0017/d8/50/88008.js"></script>

Переключение списков нажатием на вкладки

Устанавливать на отдельной странице или в Объявление
Как видно, часто бывает что, и в списке негативных, и в списке позитивных одни и те же люди, которые просто очень чаще других пользуются системой оценок постов.  :hobo:

+6

486

Календарь событий

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

Календарь событий во ВКонтакте и Facebook
Facebook

http://s9.uploads.ru/fG29I.jpg

во ВКонтакте вы можете посмотреть календарь во вкладке Друзья в верхнем правом углу нажав кнопку http://s8.uploads.ru/Q2D7I.png
http://s9.uploads.ru/rBfSL.jpg

ВКонтакте как выглядит

http://sa.uploads.ru/rFXEB.gif

Сделать полноценный календарь на нашем сервисе не позволяет ограниченность API (увы, нет сортировки по возрасту, чтоб отсеять тех у кого дата рождения вообще не указана) , но тем не менее некое подобие вполне реально, выглядеть это будет так:

http://sa.uploads.ru/t/YljE6.jpg
http://s8.uploads.ru/t/OYFsG.jpg
http://sd.uploads.ru/t/jnW2g.jpg

Я сделал всего 2 опции:
1. список праздников
2. метод по которому выдаётся максимальное количество ваших пользователей, подбирается индивидуально под каждый форум. Если на форуме много активных пользователей, которые часто пользуются системой оценки поста (+ и -), то оптимальным будет метод - respect. Если просто активные пользователи, которые часто пишут, но не пользуются всякими там плюсиками, то оптимален метод - num_posts
Сразу предупреждаю, абсолютно все пользователи указавшие дату своего дня рождения в Календарь не попадут (ограниченность API)! Кстати, как и не попадут, те кто указал не полную дату. Отсутствие года гарантирует вам непопадание в Календарь.

http://s8.uploads.ru/SotUn.jpg

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

td[data-iso="01-01"]

где сначала идёт месяц, потом день
По такому же принципу составляется список праздничных дней, сначала месяц, потом день:

var prazdnik = [{dn: '01-01', celebrate: 'Новый год'},
{dn: '01-07', celebrate: 'Рождество Христово'},
{dn: '01-14', celebrate: 'Старый Новый год'},
{dn: '02-23', celebrate: 'День защитника Отечества'},
{dn: '03-08', celebrate: 'Международный женский день'},
{dn: '04-01', celebrate: 'День смеха (День дурака)'},
{dn: '05-01', celebrate: 'День трудящихся'},
{dn: '05-09', celebrate: 'День Победы'},
{dn: '06-12', celebrate: 'День России'},
{dn: '11-04', celebrate: 'День народного единства'},
{dn: '11-07', celebrate: 'День Октябрьской революции 1917 года'}]

Кстати, во всплывающей подсказке праздничного дня можно сделать изображение стикер. У кого возникнет такое желание, сначала закачайте эти стикеры куда-нибудь, потом пишите мне, сделаем правки в скрипте для вас.
Куда ставить код? Оптимально в описание любого форума: Администрирование -> Форумы -> Редактировать (описание любого форума)

Код:
<style type="text/css">
/* Таблица календаря */
.calendar {
  border: 0px;
  border-collapse: collapse;
  font-family: Arial;
  width: auto !important;
}
/* Заголовок */
.calendar th {
  text-align: center;
  height: 25px;
  background: #ebf0f5 !important;
  color: #8996a3 !important;
  border-bottom: 1px solid #ebf0f5 !important;
}
/* Заголовок праздника */
.calendar th.holiday {
  color: #FF0000 !important;
}
/* Ячейка дня */
.calendar td {
  border-left: 1px solid #ebf0f5 !important;
  border-right: 1px solid #ebf0f5 !important;
  border-bottom: 1px solid #ebf0f5 !important;
  color: rgb(44, 86, 122);
  position: relative;
  white-space: nowrap;
  width: 95px;
  height: 40px;
}
@media screen and (max-width: 640px) {
.calendar td {width: 65px;height:25px;}
#imn {width: 20px;height: 20px;}
.holiday .day_num {width: 12px !important; height: 11px !important;}
.day_num {font-size: 9.5px !important;}
#clndr {width: 16px;height: 16px;}
}
/* Блок с отображающейся датой (день)  */
.day_num {
    position: absolute;
    top: 2px;
    left: 6px;
    text-align: center;
    color: #99acbf;
    font-size: 12.5px;
}
/* Пустой день */
.calendar td.pust {
  background: transparent !important;
  border: none !important;
}
/* Выбранный день */
.calendar td.selected {
  outline: 2px solid #98b0cd;
}
/* Праздничный день */
.calendar td.holiday {
  background: #fafbfc !important;
}
/* Блок с отображающейся датой (праздничный день)  */
.calendar .holiday .day_num {
    cursor: pointer;
    color: #555;
    background: #FFE082;
    border-radius: 50%;
    border-color: #FF9800 !important;
    border: 1px solid;
    width: 18px;
    height: 17px;
}
/* Кнопки навигации */
.calendar td.navigation {
  text-align: center;
  border: 0px none !important;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.calendar td a {bottom: -7px;}
/* Наложение аватаров друг на друга (необходимо при большом количестве именинников в один день)  */
.calendar td a:nth-child(2) {left: -10px;}
.calendar td a:nth-child(3) {left: -20px;}
.calendar td a:nth-child(4) {left: -30px;}
.calendar td a:nth-child(5) {left: -40px;}
.calendar td a:nth-child(6) {left: -50px;}
.calendar td a:nth-child(7) {left: -60px;}
/* Всплывающий блок Календаря  */
 #calendar_table {
 display:none;
    position: fixed;
    top: 10%;
    background: #fff;
    padding: 15px;
    z-index: 9;
    margin: 0 auto !important;
    border-radius: 9px;
	-moz-box-shadow: 0px 0px 40px #444;
  -webkit-box-shadow: 0px 0px 40px #444;
  box-shadow: 0px 0px 40px #444;
}
/* Кнопка иконка календаря */
#clndr {position:relative;float:right;top: -15px;cursor: pointer;}
</style>

<div id="calendar_table"></div>
<!-- Календарь событий-->
<script type="text/javascript">
var prazdnik = [{dn: '01-01', celebrate: 'Новый год'},
{dn: '01-07', celebrate: 'Рождество Христово'},
{dn: '01-14', celebrate: 'Старый Новый год'},
{dn: '02-23', celebrate: 'День защитника Отечества'},
{dn: '03-08', celebrate: 'Международный женский день'},
{dn: '04-01', celebrate: 'День смеха (День дурака)'},
{dn: '05-01', celebrate: 'День трудящихся'},
{dn: '05-09', celebrate: 'День Победы'},
{dn: '06-12', celebrate: 'День России'},
{dn: '11-04', celebrate: 'День народного единства'},
{dn: '11-07', celebrate: 'День Октябрьской революции 1917 года'}],
metod = 'num_posts'; //num_posts или respect
</script>

<script type="text/javascript" src="https://forumstatic.ru/files/0017/d8/50/11373.js"></script>

Можно сделать отображение Календаря не на главной, а на отдельной странице.
Скрипт рекомендуется ставить на активные форумы, где количество зарегистрированных пользователей не меньше 100 ( а лучше от 1000). На малых форумах он мало информативен и будет выдавать ошибку в консоли, хотя она ни на что не влияет.

+6

487

Обновлён скрипт Разворачивание картинок в постах до полного размера.
Теперь должен нормально работать при установке в любом месте html-верх или html-низ.

+2

488

Новости из определенной темы

переделанный скрипт Ромыча

ставим в ХТМЛ низ

<script type="text/javascript">
$(function(){
$('#rr').after('<div class="container"><table id="bib" cellspacing="0" width=100%><tr><th scope="col" width=65%>--</th><th scope="col" width=25%>--</th><th scope="col" width=10%>Автор</th><th scope="col" width=2%>-</th></tr></table></div>');
$.get('export.php?type=rss&tid=868','',processXML);
function processXML(data){
$(data).find('item:lt(1)').each(function(){ 
var JAuthor=$(this).find('author').text().slice(14,-1);
var JTitle=$(this).find('title').text();
var JLink=$(this).find('link').text();
var JContent=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-5);
$('#bib').append('<tr><td style="font-size: 18px; font-family: Trebuchet MS; color: #101110;"><br>'+JContent+'<br><br></td><td style="text-align:left;"></td><td><b></b></td><td style="text-align:center"></td></tr>'); });
} });
</script>

красным - стиль сообщения
зеленым - РСС адрес нужной темы (внизу ссылка РСС )

создаем блок в нужном месте с id="rr", там будет показываться. или можно #pun-stats вписать в скрипт вместо #rr

таблица новости #bib - можно изменить для этого id стиль, поставить фон
--------------------
видео не показывается для новостей из темы. если вписать РСС определенного форума, показывается

Отредактировано tartar4 (Ср, 21 Фев 2018 20:15:03)

+1

489

Скрипт для красной строки/деления на абзацы.

Чем этот скрипт отличается от остальных.
1. Он подходит для старых форумов. Думаю, кроме меня найдутся те, кто соображал про красную строку уже сильно после того, как форум просуществовал какое-то время и понасочинял достаточно огромное кол-во контента. Существующие скрипты (во всяком случае, те, которые находил я) убивают изначальную иерархию тегов в сообщении и исправно корректно делят текст на <p></p>, позволяя вписать text-indent, но — таким образом они еще и убивают те отступы в тексте сообщений, которые действительно могут быть необходимы для логического деления и оформления тех же постов. Иными словами, установка скриптов для индента на старые форумы может привести к глобальной катастрофе, поскольку логически поделенные в рамках старой иерархии тегов посты становятся просто цельным полотном без первоначальных разделителей-строк-пробелов. Здесь эта проблема учтена.
2. Задаются разделы, на которые распространяется его действие. То есть можно указать только игровые/архивы, не затрагивая рабочие.

HTML-Верх

Код:
<script src="https://forumstatic.ru/files/0016/a4/af/82138.js"></script>

HTML-Низ

<script>
$(document).ready(function() {
var forumIndexes = [3,11,9,17,18]; // форумы, где нужен indent, указываем только ID-номер форума, последнее число без запятой
formatTextParagraphs(forumIndexes);
});
</script>

CSS, таким образом, у нас приобретает примерно такой вид разбивки с дополнительным классом вложенного <p>:

.punbb .post-content p {
    padding: 0 0 1em 0;
    }
.punbb .post-content p.formatted {
    padding: 0 0 0 0;
    text-indent:2.6em;
}

То есть дальше настраиваем отступы уже как удобно, сохраняя первоначальные.

Автор скрипта (с) добрый аноним. Был составлен по моей просьбе, человек разрешил выложить его в общий доступ, ибо вопрос действительно актуальный. Но сам автор предпочел остаться анонимом. ХЪ
Надеюсь, его установку и назначение я внятно пояснил.

P.S. Был обновлен-поправлен файл и заменен на другой.

Отредактировано Arakhen (Вт, 20 Мар 2018 22:22:05)

+1

490

последние сообщения из определенного форума - в описании этого форума

описание:

иногда нужно вывести несколько последних тем форума "наружу". Скрипт выводит несколько последних тем и з определенного форума в описание этого форума

вставлять в описание нужного форума

<div id="first"></div>

<script src="/export.php?type=js&fid=6&max=3" type="text/javascript"></script>
<script type="text/javascript">
var html='';
var ts = '';
var mo = '';
var hh = '';
var mm = '';
var i = 0;
for(i=0;i<content.length;i++) {
ts = new Date();
ts.setTime(1000*content[i][0]);
mo = ts.getMonth()+1;
if (mo<10) mo='0'+mo;
hh = ts.getHours();
mm = ts.getMinutes()+'';
if (mm<10) mm='0'+mm;
ts = ts.getDate()+'.'+mo+' '+hh+':'+mm;
html2="</tr></tbody></table></div></center>"
html1="<center><div  class=\"container\"><table cellspacing=\"0\" width=100% style='text-align:left;'><tbody class=\"hasicon2\">"
html+='<tr><td class=\"tcl\"><a href=\"'+content[i][2]+'\">'+content[i][3]+'</a></td></tr>';
}
$("#first").append(""+html1+html+html2)
</script>

▲ ▲ Темы с обновляющимся содержанием. Вы можете оставить свой ответ.

красным - id форума
зеленым- количество выводимых тем

Отредактировано tartar1 (Вт, 24 Апр 2018 20:10:48)

0

491

Фотогалерея с увеличением картинки на 16 превьюшек.
Устанавливать куда пожелаете. Можно в виде отдельной страницы.
Пример работы фотогалереи
Код:

Код:
<style>
#gallery {
  position: relative;
  padding-top: 50%;
  -moz-user-select: none; user-select: none;
}

#gallery img {
position: absolute;
top: 12.5%;
left: 12.5%;
max-width: 24.5%;
max-height: 24.5%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: zoom-in;
transition: .2s;
}
#gallery img:nth-child(4n-2) {left: 37.5%;}
#gallery img:nth-child(4n-1) {left: 62.5%;}
#gallery img:nth-child(4n) {left: 87.5%;}
#gallery img:nth-child(n+5) {top: 37.5%;}
#gallery img:nth-child(n+9) {top: 62.5%;}
#gallery img:nth-child(n+13) {top: 87.5%;} 

#gallery img:focus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  outline: none;
  pointer-events: none;
}

#gallery img:focus ~ div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  cursor: zoom-out;
}
</style>

<div id="gallery">
    <img src="https://image.ibb.co/h7311T/YDXJ0699_700_701_702_703_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/cSxTgT/YDXJ0795_6_7_8_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/ccZVvo/YDXJ0841_2_3_4_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/mn25T8/YDXJ1031_2_3_4_5_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/jTnHao/YDXJ0716_7_8_9_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/gzgzo8/YDXJ0732_3_4_5_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/hjH5T8/YDXJ0779_80_81_82_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/ccBAvo/YDXJ0803_4_5_6_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/iO87ao/YDXJ0880_1_2_3_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/cF5nao/YDXJ0911_2_3_4_5_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/ngkaT8/YDXJ0936_7_8_9_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/k9vLvo/YDXJ0944_5_6_7_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/muk9o8/YDXJ0951_2_3_4_5_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/jFzDFo/YDXJ0968_69_70_71_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/kmwh88/YDXJ1099_100_101_102_103_104_105_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
    <img src="https://image.ibb.co/meA9o8/YDXJ1117_18_19_20_21_tonemapped.jpg" alt="HDR. г.Балтийск (2016)" tabindex="0" />
  <div></div>
</div>

Отредактировано Balboa (Вс, 20 Май 2018 23:47:31)

+4

492

Таблица "Аккордион" в cообщении(без вставки HTML)

Скриншот:

http://s8.uploads.ru/xytDd.jpg

=> DEMO
    =============

Ccылка на Скрипт => Ссылка

+5

493

Частичное сворачивания длинных Закреплённых на страницах первопостов к теме
(кроме первой страницы топика)

http://s9.uploads.ru/jWQXz.jpg

В HTML верх:

<!-- Сворачиваем Первопост -->
<style id="hidFirstPost">.topicpost.firstpost{overflow:hidden; overflow-y:auto;
max-height:300px;height:300px;/*Красным максимальная высота свернутого первопоста*/
transition:  1s!important;}</style><script>if(document.URL.indexOf('&p=')==-1)$('#hidFirstPost').remove();
if($('#hidFirstPost').length)$().pun_mainReady(function(){var a = $('.topicpost.firstpost .post-content'),
H = $('.topicpost.firstpost .container').outerHeight()+$('.topicpost.firstpost h3').outerHeight()+0;
setHeight__ = function (th){$('<style>.topicpost.firstpost{max-height:none;height:'+H+'px}</style>').insertAfter($('#hidFirstPost'));$(th).remove();}
a.prepend('<button type="button" style="float:right" onclick="setHeight__(this)">Развернуть Пост</button>');});
</script>

+7

494

Фото из Instagram в постах v.1

для получения фото используем ссылки на пост такого типа

Код:
https://www.instagram.com/p/Bhmo8y0F5Dt/?taken-by=kimkardashian
https://www.instagram.com/p/Bj-lHEFlVKy/?taken-by=pavelvolyaofficial
https://www.instagram.com/p/BkA_-utns40/?taken-by=samburskaya
или такого
https://www.instagram.com/p/BjF0AnaF_7y/
ДЕМО

http://s3.uploads.ru/LvjQW.gif

в html-низ:

Код:
<!-- Работаем с изображением из Instagram -->
<script type="text/javascript">
$("#image-source-list").append('<img id="inst" src="https://forumstatic.ru/files/0017/d8/50/70594.png" title="Из Instagram" style="cursor:pointer;vertical-align:bottom;width:21px;">'),$("#inst").live("click",function(){$("#image-area #my-inst").length>0?$("#image-area #my-inst").remove():$("#image-area").append('<div id="my-inst"><img src="" style="cursor:pointer;vertical-align:bottom;width:46px;border:1px solid rgb(225,225,227);">&nbsp;<input id="i-img" type="url" pattern="https?://(.+){12,}" maxlength="1000" size="40" placeholder="http://Ссылка на пост в Instagram"></div>'),$("#i-img").live("paste",function(){var i=$(this);setTimeout(function(){var t=$(i).val().split(/\/p\/(.*?)\//)[1],e=$(i).prev("img");$.getJSON("https://www.instagram.com/p/"+t+"/?__a=1",function(t){var a=t.graphql.shortcode_media.display_url;$(e).attr("src",a),$(i).val(""),insert("[img]"+a+"[/img]")})},0)})}),$("#button-image").on("click",function(){$("#image-area #my-inst").length>0&&$("#image-area #my-inst").remove()});
</script>

Вариант с превью (ширина 640)

Код:
<!-- Работаем с изображением из Инстаграма (preview)-->
<script type="text/javascript">
$("#image-source-list").append('<img id="inst" src="https://forumstatic.ru/files/0017/d8/50/70594.png" title="из Instagram" style="cursor:pointer;vertical-align:bottom;width:21px;">'),$("#inst").live("click",function(){$("#image-area #my-inst").length>0?$("#image-area #my-inst").remove():$("#image-area").append('<div id="my-inst"><img src="" style="cursor:pointer;vertical-align:bottom;width:32px;border:1px solid rgb(225, 225, 227);">&nbsp;<input id="i-img" type="url" pattern="https?://(.+){12,}" maxlength="1000" size="40" placeholder="http://Ссылка на пост в Instagram"></div>'),$("#i-img").live("paste",function(){var i=$(this);setTimeout(function(){var t=$(i).val().split(/\/p\/(.*?)\//)[1],e=$(i).prev("img");$.getJSON("https://www.instagram.com/p/"+t+"/?__a=1",function(t){var a=t.graphql.shortcode_media.display_url,r=t.graphql.shortcode_media.display_resources[0].src;$(e).attr("src",a),$(i).val(""),insert("[url="+a+"][img]"+r+"[/img][/url]")})},0)})}),$("#button-image").on("click",function(){$("#image-area #my-inst").length>0&&$("#image-area #my-inst").remove()});
</script>

+15

495

Загрузчик на Imgur. Версия 2.

В копилку к скриптам с альтернативными загрузчиками на imgur.

Мой первый скрипт восприняли достаточно активно, было много обсуждений с предложениями.
В данной версии попытался учесть большинство замечаний, также активно обсуждали функционал с sshmmv.

Внешне скрипт теперь больше похож на загрузчик Uploads.
https://i.imgur.com/EhJNMtB.png

Добавил удаление файла с сервера.
Вставляется bb-код с учетом положения курсора в текстовом поле.

Код скрипта:

<script type="text/javascript" src="/files/0018/14/a0/71332.js"></script>

+12

496

Поскольку иногда бывает необходимость выделить обтеканием
не только картинку, но и какой-либо текст, - сваял такой код:

Универсальный тег обтекания на CSS
(для текста и картинок)

https://i.imgur.com/NAzk1Lw.png

Обновлено 25.01.2020

В HTML верх

<!-- Обтекание текста слева/справа --><style type="text/css">
.post-content p{clear:both}.post-content abbr[title^="float:"]{text-decoration:none;pointer-events:none;margin:.5em}
.post-content abbr[title="float:left"]{float:left}.post-content abbr[title="float:right"]{float:right}
</style>
<script type="text/javascript">
FORUM.set('editor.addition.tags.float_left', {name:'Обтекание слева',onclick:function(){bbcode('[abbr="float:left"]','[/abbr]');}});
FORUM.set('editor.addition.tags.float_right', {name:'Обтекание справа',onclick:function(){bbcode('[abbr="float:right"]','[/abbr]');}});
</script>

(Пример использования - в данном сообщении :))

+7

497

Dango написал(а):

К вопросу о перламутровых пуговицах:
А можно еще внедрить возможность перетаскивания?

По многочисленным просьбам пользователей сервиса,
в качестве альтернативы стандартному загрузчику изображений,
создан совмещенный вариант с загрузкой на несколько хостингов
и другим востребованным функционалом:

Перламутровые пуговицы - в комплекте :glasses:

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

В качестве основы для скрипта взят набросок от Romych.

https://i.imgur.com/ju15Cwl.png
https://i.imgur.com/hyZ8M64.png

Преимущества по сравнению с предыдущими версиями:
- Интеграция загрузки картинок на хорошо зарекомендовавшие себя хостинги Imgur.com и ImageBan.ru в стандартный интерфейс формы ответа, наряду с загрузкой от сервиса на собственный хостинг Uploads.ru;
- Возможность добавления файлов в очередь загрузки перетаскиванием в форму загрузчика;
- Мультизагрузка (т.е. загрузка нескольких изображений одновременно) на любой из трех поддерживаемых хостингов (в том числе при добавлении перетаскиванием);
- Возможность вставки изображений из постов Instagram с превью (шириной 320 пикселей) в форме вставки "Из интернета";
- Отсутствие страницы "Переход по внешней ссылке": при открытии полноразмерной картинки она отображается без дополнительных переходов (спасибо Admin :)).


ССЫЛКА >>>

+11

498

Дополнение к новому Загрузчику изображений:
Альбом загрузок в профиле (Imgur, ImageBan)
В стандартном интерфейсе

https://i.imgur.com/CcKK7KN.png

+6

499

По просьбе пользователя

Быстрое управление подписками на странице форума
https://i.imgur.com/NqGT2Qk.png

Скрипт дает возможность подписываться на темы и снимать подписку прямо на странице форума, в котором находятся нужные темы. Это позволяет более наглядно отследить, на какие темы в каждом из форумов подписан пользователь, особенно если подписок у него много.

В HTML верх

<!-- Быстрое управление подписками -->
<script type="text/javascript" src="https://forumstatic.ru/files/0015/c4/3f/62217.js"></script>

+7

500

Замена двойных кавычек на парные угловые скобки («») в постах

По просьбе не хокаге

При явном переносе на новую строку части строки в двойных кавычках не заменяется(при автоматическом переносе по ширине - меняется)
Тестируем, возможно проверил не все нюансы

http://s8.uploads.ru/fUJVs.jpg

В Начало HTML низ:

Код:
<script type="text/javascript">
(function(){function rep(str, p1,offset, s){
  return '>'+p1.replace(/"([^ "][^"]+?)"/gm,'«$1»')+'<';}
$('.post-content p').each(function(){
  $(this).html(('</>'+$(this).html()+'</>').replace(/>([^<>]+)</gm, rep));
});}());
</script>

+3


Вы здесь » Единый форум поддержки » Новые возможности форумов » Скрипты от пользователей 3