Your Roll

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


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

На страницу : 1, 2  Следующий

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

Космо

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


Такие лайки есть и на этом сайте - можете потыкать)

Чем полезны именно такие лайки?
Они асинхронны, т.е. не перегружают страницу. Благодаря этому пользователь может "полайкать" сразу несколько сообщений за раз - это удобно, и не надо ждать, пока форум не перенаправит юзера обратно.

Плюс они выглядят гораздо симпотичней :)

Готовимся
Подберём картинку для лайков размером ровно в 32х32 пикселей.

Некоторые модели (можете взять эти, а можете свою загрузить):


Копируем ссылку на изображение в блокнот - она нам не раз понадобится!

Для forum2x2
Для начала убедимся, что у нас движок punBB и мы можем редактировать шаблон.

Теперь давайте зайдём в админпанель - оформление - шаблоны - общие настройки. Редактируем шаблон viewtopic_body.

Ищем такое:
Код:
<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->

<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->

<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
<!-- END switch_bar -->

<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
<!-- END switch_no_bar -->

<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->
Удаляем всё это дело. Мы поставим немного другой код в другом месте.

Ищем следующую строку:
Код:
<!-- BEGIN switch_signature -->
Перед ней вставляем этот код:
Код:
<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" title="Нравится!"><img src="ССЫЛКА" /></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-br">
<span class="votehid">{postrow.displayed.switch_vote_active.L_VOTE_TITLE}</span>
<span class="voteshow"></span>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<span class="voteshow">0</span>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->
Заменяем "ССЫЛКА" на ссылку на иконку, которую мы выбрали.

Сохраняем, публикуем шаблон.

Если у вас на форуме включены блоги, надо будет провести похожую процедуру в шаблоне viewcomments_body.

Вырезаем ненужные стандартные коды голосования за пост, как в первом случае (там этих блоков два!).

Вставляем новый код, как делали в первом случае. Плюс к этому после фрагмента:
Код:
<p> {comment.displayed.EDITED_MESSAGE}
</p>
надо будет вставить:
Код:
<!-- BEGIN switch_vote_active -->
<div class="vote">
<!-- BEGIN switch_vote -->
<a href="{comment.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" title="Подарить любовь :3"><img src="ССЫЛКА" /></a>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-br">
<span class="votehid">{comment.displayed.switch_vote_active.L_VOTE_TITLE}</span>
<span class="voteshow"></span>
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<span class="voteshow">0</span>
<!-- END switch_no_bar -->
</div>
<!-- END switch_vote_active -->

Сохраняем, публикуем  :yes:

Далее заходим в админпанель - оформление - цвета - каскадная таблица стилей CSS. Добавим в конец:
Код:
.voteshow {
font-size: 24px;
position: relative;
top: -6px;
left: 6px;
}
.votehid {
display: none;
}
.vote {
float: left;
width: auto;
}
.vote-br {
    display: inline;
}

Последний этап - установим скрипты. Заходим в админпанель - модули - управление цветами яваскрипт (в самом низу). Создаём скрипт. Называем "Лайки". Показывать - только в темах.
В содержимое вставляем:
Код:
copyrightnotice = 'Скрипт от your.roll.tv . Распространение и использование разрешено только с прикреплением этой строки.';
$(document).ready(function() {
  $('.vote').each(function() {
    if ($(this).find('.votehid').length > 0) {
     $(this).find('.voteshow').html(/[0-9]+/.exec($(this).find('.votehid').html().replace('Рейтинг сообщения: 100% (',''))[0]);
    }
   if ($(this).find('a').length > 0){
      $(this).find('a').click(function() {
        $.get($(this).attr('href'));
        $(this).find('img').css('opacity','0.5');
        $(this).next()[0].innerHTML = Number($(this).next()[0].innerHTML) + 1;
        return false;
      });
    } else {
      $(this).find('.vote-br').prepend('<img style="opacity: 0.5;" src="ССЫЛКА" />');
    }
  });
});
Тут также надо будет заменить ССЫЛКА на ссыль к картинке.

Сохраняем. Готово!  :clap:

Для myBB
В админке - настройки - Система отношений указываем точь в точь такие настройки:


Далее в админке - настройки - Основные в HTML верх или HTML низ пишем:
Вариант с кнопкой и надписью "Нравится!:

Код:
<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).appendTo(jQuery(this).closest('.container').find('.post-content')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').after('<span class="likeme">Нравится!</span>');
  }).click(function () {
    if (! this.plused) {
     $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
      $(this).next().html('+' + (Number($(this).next().html()) + 1));
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-content').append('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.likeme {
  font-size: 18px;
  position: relative;
  top: 6px;
  margin-left: 8px;
  vertical-align: top;
}
.rateme {
  float: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: black;
  padding: 3px 5px;
  border-radius: 5px;
  opacity: 0.5;
  cursor: default;
}
</style>
Вариант просто с кнопкой:

Код:
<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).appendTo(jQuery(this).closest('.container').find('.post-content')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').attr('title','Нравится!');
  }).click(function () {
    if (! this.plused) {
     $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
      $(this).next().html('+' + (Number($(this).next().html()) + 1));
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-content').append('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.rateme {
  float: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: black;
  padding: 3px 5px;
  border-radius: 5px;
  opacity: 0.5;
  cursor: default;
}
</style>

Ссылку
Код:
http://i80.servimg.com/u/f80/16/50/61/52/heart11.png
заменяем на ссылку на изображение-кнопку.

Сохраняем. Всё :)

Проверьте, всё ли работает; если ВДРУГ возникли проблемы - пишите здесь, поможем!



Последний раз редактировалось: Космо (03.04.14 9:28), всего редактировалось 4 раз(а)


______________________________

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

Посмотреть профиль
А на MyBB такую штуку нельзя сделать? Уж больно интересная и удобная.

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Я посмотрю, можно ли на мубб запилить. Но не сегодня - у нас уже 10 часов вечера х_х


______________________________

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

Посмотреть профиль
Космо, да ладно? У нас тоже 10 вечера! Вы где живёте?

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Камели пишет:Космо, да ладно? У нас тоже 10 вечера! Вы где живёте?

О____________________О Вот это поворот! Впервые в инете совпали часовые пояса! Камчатка, город Петропавловск-Камчатский)

з.ы. давай на "ты") не люблю "выкать" :)

[edit]

Можешь включить для пиар-входа обычные плюсы-минусы на своей ролке?



Последний раз редактировалось: Космо (10.05.13 22:39), всего редактировалось 1 раз(а)


______________________________

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

Посмотреть профиль
Космо, давай. Зашибись! Земляки. Я на Камчатке, рядом с П-К. Усть-Большерецк.

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

Космо

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


______________________________

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

Посмотреть профиль
Космо, всмысле?

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Чтобы пользователь Piar мог репутацию плюсовать, или там "спасибо" щёлкать, что-то такое :) вроде на myBB есть такая ф-ия.

Поле "репутация" у тебя включено, но вот что-то никаких ссылочек-кнопочек я не вижу о_о

пойду-ка я всё же запилю тестовик на мубб...


______________________________

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

Посмотреть профиль
Космо, ааа. Я просто ему запрещала менять репутацию пользователям. Сейчас исправлю.

Посмотреть профиль
Космо, вроде всё.

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Та-а-акс, я так понял, кнопка для добавления балла к репутации тут:


В техническом плане всё дёргается точно таким же способом, как и в forumotion, просто надо будет расписать побольше скриптов :) сделаем)


______________________________

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

Посмотреть профиль
Космо, именно тут.

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Кстати, у тебя там скрипт не закрыт один:


______________________________

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

Посмотреть профиль
О, а я и не замечала. Спасибо.

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Тыкс, в целом, у меня готово.

Можешь в админке - настройки - система отношений включить рейтинг поста?


______________________________

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

Посмотреть профиль
Включила.

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
В целом, готово. Не удалось только сделать проверку, лайкали ли уже сообщение (но тут уж я ничего не поделаю, двиг не позволяет). А так работает отлично.

Чтобы все лайки засчитывались, надо будет цену поста, суточный лимит и накрутку поставить на ноль. Иначе будет выглядеть в теме, что участник дал лайк, но потом может и оказаться, что лайк не сработал.

Тип оценок - только плюсы.

Выглядит немного подругому:



Вот это вот вставляем в админку - настройки - основные - HTML верх или HTML низ (разницы нет):
Код:
<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).prependTo(jQuery(this).closest('.container').find('.post-sig')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').after('<span class="likeme">Нравится!</span>');
  }).click(function () {
    if (! this.plused) {
      $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-sig').prepend('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.likeme {
  font-size: 18px;
  position: relative;
  top: -6px;
  margin-left: 8px;
}
.rateme {
  float: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: black;
  padding: 3px 5px;
  border-radius: 5px;
  opacity: 0.5;
  cursor: default;
}
</style>

Вот в этой куче фигни:
$(this).prependTo(jQuery(this).closest('.container').find('.post-sig')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').after('<span class="likeme">Нравится!</span>');
Указываем своё изображение. Но мне нравится печенька :3

Всё :)


______________________________

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

Посмотреть профиль
Космо, Спасибо!! Всё работает! А я же могу убрать слово "нравиться!"? Уж больно громоздкое.

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Да, можешь :)
Но тогда надо будет написать подсказку у картинки, иначе можно не догадаться, что это за печенька. Код немного меняется:
Код:
<script type="text/javascript">
var copyrightnotice = 'Ajax-лайки для myBB. Скрипт от Your Roll your.roll.tv . Распространение и использование разрешено только с прикреплением этого копирайта.';
$(document).ready(function() {
  $('.post-author .pa-respect a[href*="/relation"]').each(function() {
    $(this).prependTo(jQuery(this).closest('.container').find('.post-sig')).find('img').attr('src','http://i80.servimg.com/u/f80/16/50/61/52/heart11.png').attr('title','Поставить отметку "Нравится!"');
  }).click(function () {
    if (! this.plused) {
      $.get($(this).attr('href'));
      this.plused = true;
      $(this).css('opacity','0.5');
    }
    return false;
  });
  $('.post-rating .container').each(function() {
    $(this).closest('.post-box').find('.post-sig').prepend('<span class="rateme" title="Количество лайков">' + $(this).text() + '</span>');
    $(this).remove();
  });
});
</script>
<style>
.rateme {
  float: right;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: black;
  padding: 3px 5px;
  border-radius: 5px;
  opacity: 0.5;
  cursor: default;
}
</style>


______________________________

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

Посмотреть профиль
Космо, ну вот, теперь другое дело :)
И еще, а убирать поставленные лайки можно? (Это я уже с ВК сравнила, вдруг, можно).

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Не-а, не получится :no:


______________________________

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

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

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

Космо

avatar
Я сквозь ткань миров проходящий странник, Я СКВОЗНЯЯЯЯЯК!!! ХДД
Можно приделать и увеличение количества лайков, как на форумошн. Дописать скрипты?


______________________________

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

Посмотреть профиль
Космо, ну, можно.

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

Спонсируемый контент


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

На страницу : 1, 2  Следующий

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