Сейчас мы сделаем что-то вроде этого:
Такие лайки есть и на этом сайте - можете потыкать)
Чем полезны именно такие лайки?
Они асинхронны, т.е. не перегружают страницу. Благодаря этому пользователь может "полайкать" сразу несколько сообщений за раз - это удобно, и не надо ждать, пока форум не перенаправит юзера обратно.
Плюс они выглядят гораздо симпотичней
Готовимся
Подберём картинку для лайков размером ровно в 32х32 пикселей.
Некоторые модели (можете взять эти, а можете свою загрузить):
Копируем ссылку на изображение в блокнот - она нам не раз понадобится!
Для forum2x2
Для начала убедимся, что у нас движок punBB и мы можем редактировать шаблон.
Теперь давайте зайдём в админпанель - оформление - шаблоны - общие настройки. Редактируем шаблон viewtopic_body.
Ищем такое:
Ищем следующую строку:
Сохраняем, публикуем шаблон.
Если у вас на форуме включены блоги, надо будет провести похожую процедуру в шаблоне viewcomments_body.
Вырезаем ненужные стандартные коды голосования за пост, как в первом случае (там этих блоков два!).
Вставляем новый код, как делали в первом случае. Плюс к этому после фрагмента:
Сохраняем, публикуем
Далее заходим в админпанель - оформление - цвета - каскадная таблица стилей CSS. Добавим в конец:
Последний этап - установим скрипты. Заходим в админпанель - модули - управление цветами яваскрипт (в самом низу). Создаём скрипт. Называем "Лайки". Показывать - только в темах.
В содержимое вставляем:
Сохраняем. Готово!
Для myBB
В админке - настройки - Система отношений указываем точь в точь такие настройки:
Далее в админке - настройки - Основные в HTML верх или HTML низ пишем:
Ссылку
Сохраняем. Всё
Проверьте, всё ли работает; если ВДРУГ возникли проблемы - пишите здесь, поможем!
Такие лайки есть и на этом сайте - можете потыкать)
Чем полезны именно такие лайки?
Они асинхронны, т.е. не перегружают страницу. Благодаря этому пользователь может "полайкать" сразу несколько сообщений за раз - это удобно, и не надо ждать, пока форум не перенаправит юзера обратно.
Плюс они выглядят гораздо симпотичней
Готовимся
Подберём картинку для лайков размером ровно в 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 -->
Сохраняем, публикуем
Далее заходим в админпанель - оформление - цвета - каскадная таблица стилей 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="ССЫЛКА" />');
}
});
});
Сохраняем. Готово!
Для 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 раз(а)