ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

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

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


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Всплывающие превью сообщений темы и профиля автора


Всплывающие превью сообщений темы и профиля автора

Сообщений 1 страница 2 из 2

1

Превью темы и профиля а-ля IPB и XenForo
При наведении на название топика отображает рейтинг темы, подписчиков, мини-профиль автора первого поста и начало первого поста топика.
При наведении на аватар автора последнего поста отображается подробный профиль автора последнего сообщения

Автор скрипта: Romych

Скрипт и описание
  • Курсор на теме/аватаре нужно удерживать 1.5 секунды, это сделано специально, чтоб не происходило ложного срабатывания при случайном коротком попадании курсора на объект.

  • Скрипт настроен так, что выдаёт из темы только первые 200 символов, этого должно быть достаточно, чтоб составить себе представление о теме и стоит её читать целиком. Причём такой способ предпросмотра темы на общий счётчик просмотров темы никак не влияет.

  • Внешнее оформление можно настроить под любой форум

СТИЛЬ
Для скрипта сделано два пресета стиля - светлый и черный:

Стиль ставим в html-верх (или свой стиль БЕЗ тегов style)

светлый:

Код:
    <!-- Превью темы и профиля -->
<style type="text/css">
.tooltipsy{
padding: 5px;
background-color: #f1f1f1;
border: 4px solid #5f95cc;
left: 50px;
max-width: 400px;
position: relative;
font-size: 14px;
margin-left:25px;
}
.tooltipsy:after{
content: '';
border: 11px solid transparent; border-top: 14px solid #5f95cc; 
position: absolute;
bottom: -26px;
left: 50px;
}
.tooltipsy .userInfo img, .tooltipsy .avatarTop img {
border-radius: 50%;
width: 52px;
height: 52px;
float: left;
margin: 0 5px 0 0;
}
.tooltipsy .userTitle h3,
.tooltipsy .userTitle h4 {margin: 0;}
.tooltipsy .userTitle h4 {font-weight: normal;font-style: italic;}
.tooltipsy .userBlurb p,
.tooltipsy .lastActivity p {margin: 0; word-spacing : 8px;}
.tooltipsy .topPreview, .tooltipsy .topicStart {
max-width: 400px;
overflow: hidden;
position: relative;
}
.tooltipsy .topPreview h2 {
margin: 0 !important;
font-size: 14px;
font-weight: normal;
}
.tooltipsy .topPreview h2 span {font-weight: bold;} 
.tooltipsy .topPreview .reit {color: #10c610;}
.tooltipsy .topPreview .subs {color: #c66510;}
.tooltipsy hr {
margin: 8px 5px;
border: none;
height: 1px;
background-color: #788593;
}
.tooltipsy .avatarTop {height: 52px;}
.tooltipsy .topicStart p {margin: 5px 0;}
</style>

черный:

Код:
<style>
.tipsy .userInfo img, .tipsy .avatarTop img {border-radius: 50%;width: 52px;height: 52px;float: left;margin: 0 5px 0 0;}
.tipsy .userTitle h3,.tipsy .userTitle h4 {margin: 0;}
.tipsy .userTitle h4 {font-weight: normal;font-style: italic;}
.tipsy .userBlurb p,.tipsy .lastActivity p {margin: 0; word-spacing : 8px;}
.tipsy .topPreview, .tipsy .topicStart {max-width: 400px;overflow: hidden;position: relative;}
.tipsy .topPreview h2 {margin: 0 !important;font-size: 14px;font-weight: normal;}
.tipsy .topPreview h2 span {font-weight: bold;} 
.tipsy .topPreview .reit {color: #10c610;}
.tipsy .topPreview .subs {color: #c66510;}
.tipsy hr {margin: 8px 5px;border: none;height: 1px;background-color: #788593;}
.tipsy .avatarTop {height: 52px;}
.tipsy .topicStart p {margin: 5px 0;}
</style>

СКРИПТ
есть отдельные версии для топика и минипрофиля, а также общий скрипт на сразу оба виджета.

превью топика отдельно:

Код:
<!-- Превью темы -->
<script type = "text/javascript" >
    $('.forum .tclcon > a').map(function () {	
    var self = $(this),topId = $(this).attr('href').split(/=/)[1],tool_stop;
    $(self).on('mouseenter touchstart',function(){
    	if($(self).hasClass('hastip')!=0){}else{
    	tool_stop=setTimeout(function(){
    $(self).attr('title');
    $(self).addClass('hastip').tooltipsy({
            content: function ($el, $tip) {
                $.when($.getJSON('/api.php?method=board.getSubscriptions&topic_id='+topId), $.getJSON('/api.php?method=post.get&topic_id='+topId+'&limit=1&fields=rating,username,avatar,message,posted')).done(function (j1, j2){
    $tip.html(function () {
    	var s = j1[0].response.length,r = j2[0].response[0].rating, n = j2[0].response[0].username, a = j2[0].response[0].avatar, m = j2[0].response[0].message, t = j2[0].response[0].posted,
    data='<div class="topPreview"><h2>Рейтинг темы: <span class="reit">+'+r+'</span> Подписчиков: <span class="subs">'+s+'</span></h2></div><hr>';
    t= new Date((t)*1e3).toLocaleString('ru-RU').split(/,/)[0];
    if (a==undefined){a='https://forumstatic.ru/files/0000/14/1c/20038.jpg';}
    data +='<div class="avatarTop"><img alt="'+a+'" src="'+a+'" width="64" height="64"><span class="datepost">'+t+' <br><strong>'+n+':</strong></span></div>';
    var sl = m.slice(0,200);if (sl.length < m.length) {sl += ' ... →';}
    data +='<div class="topicStart">'+sl+'</div>';
    return data;
    	});
    $('a[href*="/viewtopic.php?id='+topId+'"].hastip').data('tooltipsy').show();
                });
                return 'Fallback content';
            }
        });
    	}, 1e3);
    	}
    	}).on('mouseleave touchend', function() {
    $('.hastip').data('tooltipsy').hide();clearTimeout(tool_stop); 
    	});
    });
</script>

превью профиля отдельно:

Код:
<!-- Превью профиля -->
<script language="javascript">
$('em.user-avatar > a').map(function () {	
if ($(this).is('[href]')){
var self = $(this),usId = $(this).attr('href').split(/=/)[1],tool_stop;
$(self).on('mouseenter',function(){
	if($(self).hasClass('hastip')!=0){}else{
	tool_stop=setTimeout(function(){
$(self).attr('title');
$(self).addClass('hastip').tooltipsy({
        content: function ($el, $tip) {
            $.getJSON('/api.php?method=users.get&user_id='+usId+'&fields=username,group_title,avatar,registered,sex,age,num_posts,last_visit,respect_plus',function(j) {
$tip.html(function () {
var r = j.response.users[0].respect_plus, n = j.response.users[0].username, a = j.response.users[0].avatar, p = j.response.users[0].num_posts, t = j.response.users[0].last_visit, g = j.response.users[0].group_title, z = j.response.users[0].registered, s = j.response.users[0].sex, v = j.response.users[0].age,
data='<div class="member">';
t= new Date((t)*1e3).toLocaleString('ru-RU').replace(/,/gi, ' в ');
z= new Date((z)*1e3).toLocaleString('ru-RU').split(/,/)[0];
if (a==undefined){a='https://forumstatic.ru/files/0000/14/1c/20038.jpg';}
data+='<div class="userInfo"><img src="'+a+'" alt=""><div class="userTitle"><h3 class="username">'+n+'</h3><h4 class="usTitle">'+g+'</h4></div>';
data+='<hr><div class="userBlurb"><span>Пол: <strong>'+s+'</strong></span> <span>Возраст: <strong>'+v+'</strong></span><br><span class="userStats"><p>На форуме с: <strong>'+z+'</strong></p><p>Сообщения: <strong>'+p+'</strong></p><p>Уважение: <strong>'+r+'</strong></p></span></div><hr>';
data+='<span class="lastActivity"><p>Последняя активность: <strong>'+t+'</strong></p></span>';
data+='</div></div>';
return data;
	});
$('a[href*="/profile.php?id='+usId+'"].hastip').data('tooltipsy').show();
            });
            return 'Fallback content';
        }
    });
	}, 1e3);
	}
	}).on('mouseleave', function() {
$('a[href*="/profile.php?id='+usId+'"].hastip').data('tooltipsy').hide();clearTimeout(tool_stop); 
	});
}});
</script>

общий скрипт (превью профиля + превью темы)

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

Всплывающий текст последнего сообщения темы при наведении курсора
(на Главной, в каталоге форумов, в Активных темах)

При наведении курсора на ячейку с последним сообщением, всплывает окошко с превью поста.

Автор: Duka, Deff

скрипт

Разметка
Все в самый низ HTML-низ

Код:
    <div id="modal-m" class="m-message" style="top: 740px; display: none;left:50%;">
    	<div class="main-container">
        <span class="name-author"><strong></strong> написал(а):</span>
        <span class="p-messages"></span>
    	</div>
    </div>

Стиль(HTML-верх)

Код:
    <style type="text/css">
    #modal-m {width: 250px; height: 155px; background: #eee; box-shadow: 0 0 8px #777; opacity: 0.9; position: absolute; border-left: 10px solid #80c3f4; padding: 10px;margin: 30px auto 0 160px;}
    #modal-m span {display: block; font-family: verdana;}
    .name-author {width: 100%; height: 14px; margin-bottom: 15px; color: #05a1f0;}
    .p-messages {height: 120px; color: #555; max-height: 120px; overflow: hidden; margin-bottom: 10px;}
    .p-messages img {max-height: 60px;}</style>

Скрипт(HTML-низ)

Код:
    <script type="text/javascript">
    (function($){
        $(function(){
            var $punMain = $('#pun-main')
                ,$modal = $('#modal-m')
                ,postsCache = {};
            
            if (!$punMain.length) return;
     
            var popupContent = function(topicId) {
                if (typeof topicId == 'undefined') return;
                if (typeof postsCache[topicId] == 'undefined') return;
     
                var userName = postsCache[topicId]['author'].replace(/mybb@mybb.ru \((.*)\)/, "$1");
                var postContent = postsCache[topicId]['title'];
     
                $modal.find('.name-author strong:first').html(userName);
                $modal.find('.p-messages').html(postContent);
            };
            
            $('.category .tcr a, .forum .tcr a').hover(function(){
                var link = $(this).attr('href');
                if(document.URL.indexOf('/search.php?action=show_recent')!=-1||document.URL.indexOf('/search.php?action=show_new')!=-1)link = $(this).parents('tr:first').find('.tcl a:first').attr('href');
                var topicId = /\?id=(\d+)/.exec(link)[1];
     
                $modal.css('top', $(this).offset().top+25).show();
                $modal.find('.p-messages').html('<img src="http://q2.qsdb.ru/ajax-loader.gif" alt="Загружаю" />');
     
                if (typeof postsCache[topicId] == 'undefined') {
                    $.get('/export.php', {type: 'rss', tid: topicId}, function(data){
                        if (data) {
                            postsCache[topicId] = {
                                title:  $(data).find('channel').find('item:first').find('description').text(),
                                author: $(data).find('channel').find('item:first').find('author').text()
                            };
                            popupContent(topicId);
                        }
                    });
                } else popupContent(topicId);
            }, function(){
                $modal.hide();
            });
        });
    })(jQuery);
    </script>

Предосмотр содержания темы при наведении курсора
Отображение содержания сообщений топика на странице списка тем при наведении курсора на ссылку топика.

Автор: Romych

скрипт

в html-верх:

Код:
<style type="text/css">
#prosmotr { position: absolute;  z-index:1000;  filter: alpha(opacity=90); opacity: 0.9; 
font-size: 12px; background-color: black; color: white;
border: 2px solid #ccc; max-width:600px; margin:-7% 10%;
-moz-border-radius: 8px; border-radius: 8px; khtml-border-radius:8px; -webkit-border-radius:8px;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
table-layout: auto !important;}
#tema td {padding:1px !important; border: none !important;}
.visor img {max-width:50px  !important;}
.visor object, .visor embed {width:250px  !important; height:141px  !important}
</style>

в html-низ:

Код:
<!--Предосмотр темы v.2-->
<script type="text/javascript"> 
$('div#pun-viewforum div.tclcon a').hover(function(){
poisk=$(this).attr('href'); zapros=poisk.slice(poisk.indexOf("viewtopic.php?id=")+17);
$(this).append('<div id="prosmotr"><h1 align="center"><b>Последние 3 сообщения в этой теме</b></h1><table id="tema" cellspacing="0" width=100%></table></div>');
$.get('export.php?type=rss&tid='+zapros,'',prevTEMA);
function prevTEMA(data){
$(data).find('item:lt(3)').each(function(){ 
var TAuthor=$(this).find('author').text().slice(14,-1);var TPosted=$(this).find('pubDate').text().slice(4,-9);
var TContent=$(this).find('description').text();TContent = TContent.replace(/([\t|"|']+?)/gim, '').replace(/ /, '');
$('#tema').append('<tr><td><b>'+ TAuthor +'</b> написал(а):</td><td class="visor" width=50%>'+TContent+'</td><td style="text-align:center">'+TPosted+'</td></tr>'); 
}); } },
function(){ 
$(this).find('div#prosmotr').remove();
 });
</script>

Просмотр 10 Сообщений при наведении на тему в Форумах
Отображение содержания сообщений топика на странице списка тем при наведении курсора на ссылку топика.

Автор: Deff

скрипт

В HTML низ

Код:
<style type="text/css">
#prosmotr { position: absolute;  z-index:1000;  filter: alpha(opacity=90); opacity: 0.9; 
  background-color: #484855;
  border: 2px solid #ccc;
  text-shadow:#000 1px 1px 1px;
  width:580px;
 background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 8px; border-radius: 8px; khtml-border-radius:8px; -webkit-border-radius:8px;
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  table-layout: auto !important;}
#tema td {word-wrap:break-word;border-style: dotted none none dotted;padding:1px !important;}
#tema td[width="60%"]{
text-align:justify;
pading-right:22px!important;
color:#C9C9CE;
text-shadow:#000 1px 1px 1px;
  background-color: #000;
  font-size:11px;
}
</style>
<!--Предосмотр темы-->
<script type="text/javascript"> 
$('div#pun-viewforum div.tclcon a').hover(function(){
poisk=$(this).attr('href'); zapros=poisk.slice(poisk.indexOf("viewtopic.php?id=")+17);
$(this).append('<div id="prosmotr"><table id="tema" cellspacing="0" width=100%></table></div>');
$.get('export.php?type=rss&tid='+zapros,'',processTEMA);
function processTEMA(data){
$(data).find('item:lt(10)').each(function(){  
TAuthor=$(this).find('author').text().slice(14,-1); TLink=$(this).find('link').text();
TPosted=$(this).find('pubDate').text().slice(4,-5); TContent=$(this).find('description').text();
$('#tema').append('<tr><td width=17% style="color:#F3F3F3;"><b>'+ TAuthor +'</b></td><td width=60%><a href="'+TLink+'">Ссылка на пост </a>'+TContent+'</td><td style="color:RoyalBlue">'+TPosted+'</td></tr>'); 
}); } },
function(){ 
$('div#pun-viewforum div.tclcon a').find('div:last').remove();
 });
</script>

Отредактировано Герда (09.09.2020 23:58:19)

0

2

Добавлен новый скрипт:

Превью темы и профиля а-ля IPB и XenForo
При наведении на название топика отображает рейтинг темы, подписчиков, мини-профиль автора первого поста и начало первого поста топика.
При наведении на аватар автора последнего поста отображается подробный профиль автора последнего сообщения

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Скрипты и стили для форумов МуBB.ru » Всплывающие превью сообщений темы и профиля автора