Pré-visualizar no forum

Qual é minha questão:
Olá! Daemon, você pode fornecer esse sistema de pré visualizar?

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Primeiro crie um novo JS com investimento nos sub-fóruns  adicione:

Código:

$(document).ready(function(){
$('td.tcl').each(function(){
var loop=$(this);
loop.append('
<div class="getTopic"><p class="exibePost"></p>
<div class="getPost"><span class="last1"><span class="getAvat"></span><p class="nick"><span class="getNick"></span>fez o primeiro post</p><p class="getResposta"></p></span><span class="last2"><span class="getAvat"></span><p class="nick"><span class="getNick"></span>fez o último post</p><p class="getResposta"></p></span><br/><a class="purl">Ir para este tópico</a></div><!--getPost--></div><!--getTopic-->')
});
$('.getPost').hide();
$('.exibePost').click(function(){
$('.getPost').fadeOut(100);
$(this).parent().find('div').stop().fadeToggle('slow');
var url=$(this).parentsUntil('.topictitle').find('a.topictitle').attr('href');
$('.purl').attr('href',''+url);
$.get(url,function(data){
var post1=$('div.post-entry:first',data).html();
var nick1=$('h4.username:first',data).html();
var avat1=$('.user-ident .user-basic-info a:first',data).html();
$('.last1 .getResposta').html(post1);
$('.last1 .getNick').html(nick1);
$('.last1 .getAvat').html(avat1);
$('.getPost .head').css('display','none').remove()
});
$.get(url,function(data){
var post2=$('div.post-entry:last',data).html();
var nick2=$('h4.username:last',data).html();
var avat2=$('.user-ident .user-basic-info a:last',data).html();
$('.last2 .getResposta').html(post2);
$('.last2 .getNick').html(nick2);
$('.last2 .getAvat').html(avat2);
$('.getPost .head').css('display','none').remove()
})
})
});

Depois adicione ao seu css:

Código:

/*getTopic*/
.getTopic {
display: inline-block;
height: auto;
position: relative;
text-align: center;
width: 100%;
}
.exibePost {
cursor: pointer;
display: inline-block;
height: 16px;
margin-bottom: 3px;
width: 16px;
}
.getPost {
background: #FFF;
text-align: left;
}
.getTopic .last1, .getTopic .last2 {
display: table;
text-align: left;
width: 100%;
}
.getAvat img {
float: left;
margin: 5px;
height: 50px;
width: 50px;
padding: 1px;
border: 1px solid #D5D5D5;
background: white;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.getAvat img:hover {
border-color: #A1A1A1;
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}
.getTopic .last1 p.nick, .getTopic .last2 p.nick {
border-bottom: 1px solid #F3F3F3;
}
.getTopic .last1 p, .getTopic .last2 p {
padding: 3px;
}
.getResposta {
max-height: 240px;
overflow: auto;
}
.getResposta .vote, .getResposta div.ddvote {
display: none;
}
tr:hover .exibePost{
background:url(http://i81.servimg.com/u/f81/17/45/75/97/icon_e10.png) no-repeat top;
opacity:.2;
}
tr .exibePost:hover {opacity:1!important}
.getPost .purl{
background: #3A4752 url(http://i78.servimg.com/u/f78/17/96/03/52/primar12.png ) repeat-x top;
border: 1px solid #3A4752;
border-width: 1px 1px 0 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,0,0,0.2);
color: #fff!important;
text-shadow: 0 -1px 0 #191919;
font: 300 12px/1.3 Helvetica, Arial, sans-serif;
line-height: 30px;
height: 30px;
padding: 0 10px;
text-align: center;
min-width: 125px;
display: inline-block;
cursor: pointer;
}
.getPost a.purl:active {
position: relative;
top: 1px;
}
.getNick {
padding-right: 3px;
}
.exibeClose {
background: url('http://i.imgur.com/4rnqPgR.png') no-repeat bottom;
}

Até mais!

Valeu Daemon!

[sucesso=Tópico Resolvido; e Bloqueado][/sucesso]Movido para: Arquivo - Pedido de código