Your Roll

Рейтинг ролевых ресурсов. Каталог ролок. Полезные инструменты для администраторов ролевых игр.


Вы не подключены. Войдите или зарегистрируйтесь

Предыдущая тема Следующая тема Перейти вниз  Сообщение [Страница 1 из 1]

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Сей модуль создаёт кнопку с выпадающей менюшкой в формах ответа, с помощью которой можно вставить в сообщение крупный смайл-стикер, а выглядит это вот так:



А вот пример смайлика - они довольно большие и с прозрачным фоном, что позволяет им вписываться в любые дизайны и радовать пользователей)

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

Для начала добавьте этот код в каскадную таблицу стилей CSS:

Код:
.sceditor-stickers {
    height: 300px;
    overflow: auto;
    width: 200px;
}
.sceditor-stickers img {
    cursor: pointer;
    margin: 2px;
    padding: 3px;
}
.sceditor-stickers {
    text-align: center;
}
.sceditor-stickers img:hover {
    background: none repeat scroll 0 0 #eee;
}
.sceditor-button-stickers div {
    background: none repeat scroll 0 0 transparent !important;
}
.sceditor-button-stickers {
    background-image: url("http://i39.servimg.com/u/f39/16/50/61/52/grin10.png") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

А теперь создайте новый скрипт.
Название: Стикеры
Показывать: На всех страницах

Код:
$(function () {$(function () {if ($.sceditor) {

var str = '<div style="text-align: center; font-weight: bold; margin: 0px 0px 10px;">Большие смайлы</div>';
var smilies = {
  'http://i.imgur.com/u4jAfnW.png': 'http://i.imgur.com/XYm5Se7.png',
  'http://i.imgur.com/obdvWb3.png': 'http://i.imgur.com/5IpeTpr.png',
  'http://i.imgur.com/HuiYuPA.png': 'http://i.imgur.com/RgM3MBb.png',
  'http://i.imgur.com/3GPF3Sk.png': 'http://i.imgur.com/KRkhJRq.png',
  'http://i.imgur.com/b4xuSys.png': 'http://i.imgur.com/SfvZwrf.png',
  'http://i.imgur.com/szU0rSA.png': 'http://i.imgur.com/NYKxWka.png',
  'http://i.imgur.com/BW1XrJC.png': 'http://i.imgur.com/utS2NWH.png',
  'http://i.imgur.com/0gCFEul.png': 'http://i.imgur.com/JssmBIX.png',
  'http://i.imgur.com/EptB7Wb.png': 'http://i.imgur.com/IWxIgVx.png',
  'http://i.imgur.com/sasY7co.png': 'http://i.imgur.com/5vHMxcu.png',
  'http://i.imgur.com/x9VXLxq.png': 'http://i.imgur.com/7yF5ZVT.png',
  'http://i.imgur.com/vdvqrx1.png': 'http://i.imgur.com/ZI84bzX.png',
  'http://i.imgur.com/J6bZQVv.png': 'http://i.imgur.com/QvUb3Zt.png',
  'http://i.imgur.com/KxuJd6W.png': 'http://i.imgur.com/kIW89Br.png',
  'http://i.imgur.com/ZDgqJzN.png': 'http://i.imgur.com/Mhodcfg.png',
  'http://i.imgur.com/EZGCjpQ.png': 'http://i.imgur.com/gYKb0W2.png',
  'http://i.imgur.com/k2Hg2Ql.png': 'http://i.imgur.com/EZmaU9v.png',
  'http://i.imgur.com/BIHm6qM.png': 'http://i.imgur.com/PRTRTj8.png',
  'http://i.imgur.com/WmVJXtu.png': 'http://i.imgur.com/JUbuF85.png',
  'http://i.imgur.com/CDtqv9C.png': 'http://i.imgur.com/zOy4tP5.png',
  'http://i.imgur.com/FYKnFns.png': 'http://i.imgur.com/KIDVt4C.png',
  'http://i.imgur.com/Epti7TM.png': 'http://i.imgur.com/UprScTH.png',
  'http://i.imgur.com/Kbyuj6Y.png': 'http://i.imgur.com/Gz495lA.png',
  'http://i.imgur.com/vSB0oNq.png': 'http://i.imgur.com/7ByyMPC.png',
  'http://i.imgur.com/Bg8zfX9.png': 'http://i.imgur.com/6lurOMb.png',
  'http://i.imgur.com/9YDxoqR.png': 'http://i.imgur.com/6weWMxs.png',
  'http://i.imgur.com/ZELFHKM.png': 'http://i.imgur.com/e1DoXl1.png',
  'http://i.imgur.com/z8znMsl.png': 'http://i.imgur.com/1dj0fJ4.png',
  'http://i.imgur.com/o4qKTwp.png': 'http://i.imgur.com/VXkPgwH.png',
  'http://i.imgur.com/tEyETdD.png': 'http://i.imgur.com/gphEKQe.png',
  'http://i.imgur.com/BeCHokZ.png': 'http://i.imgur.com/xmlQBiJ.png',
  'http://i.imgur.com/4qOv9Tq.png': 'http://i.imgur.com/uk2maW2.png',
  'http://i.imgur.com/3MmiJWr.png': 'http://i.imgur.com/NzXoVj7.png',
  'http://i.imgur.com/XDrja4v.png': 'http://i.imgur.com/fiip7mj.png',
  'http://i.imgur.com/6hMHEOC.png': 'http://i.imgur.com/L3ggguC.png',
  'http://i.imgur.com/HB9vkvW.png': 'http://i.imgur.com/CmZEiCr.png',
  'http://i.imgur.com/AdxoAAK.png': 'http://i.imgur.com/lKHK73u.png',
  'http://i.imgur.com/QJOx6eR.png': 'http://i.imgur.com/pUV10jC.png',
  'http://i.imgur.com/KrWWSf6.png': 'http://i.imgur.com/qets3iz.png',
  'http://i.imgur.com/JxcECjL.png': 'http://i.imgur.com/kpvdDhB.png'
};
for (var q in smilies) {
  str += '<img src="'+ q +'" fullsrc="'+ smilies[q] +'" />';
}
var q = $('<a class="sceditor-button sceditor-button-stickers" unselectable="on" title="Стикеры"><div>Стикеры</div></a>').prependTo($('.sceditor-toolbar .sceditor-group:last'));
q.click(function () {
  if ($('.sceditor-stickers').length == 0) {
    $('#text_editor_textarea').sceditor('instance').createDropDown(q, 'stickers', str + '<br/><span style="opacity: 0.35; font-size: 9px;">Стикеры YOLKS by BadBlood, модуль от your.roll.tv</span>', true);
    $('.sceditor-stickers').on('click','img', function () {
      $('#text_editor_textarea').sceditor('instance').insert('[img]'+ $(this).attr('fullsrc') +'[/img]');
    });
    return false;
  }
});

}});});

Как добавить свои стикеры
Вы уже могли заметить, что стикеры в скрипте обозначаются такими вот строками:
Код:
'http://i.imgur.com/KrWWSf6.png': 'http://i.imgur.com/qets3iz.png'
Первая ссылка - это миниатюра размером 35х35 пикселей, а вторая - полноразмерное изображение. Вставляйте новые строки в скрипт, не забывая разделять строки запятыми.

В целом, всё :) Будут вопросы - задавайте)


______________________________

Не ищи логики там, где она скрывается. Потому что её там нет. (с)

Посмотреть профиль

Предыдущая тема Следующая тема Вернуться к началу  Сообщение [Страница 1 из 1]

Права доступа к этому форуму:
Вы не можете отвечать на сообщения