Simple First Thread Post Preview
2 posters
Page 1 of 1
Simple First Thread Post Preview
Hey there,
It's been a while. Here's a quick and simple way to get a preview of a thread in the thread list by showing the thread first message.
![Simple First Thread Post Preview CNrpAUn](https://i.imgur.com/CNrpAUn.png)
![Simple First Thread Post Preview FUihHwz](https://i.imgur.com/fUihHwz.png)
PHPBB2 ONLY FOR NOW.
JavaScript:
Check In the sub-forums.
In the topics_list_box template, find:
Replace this part with:
And right before the following part:
Insert:
Basic CSS:
It's been a while. Here's a quick and simple way to get a preview of a thread in the thread list by showing the thread first message.
![Simple First Thread Post Preview CNrpAUn](https://i.imgur.com/CNrpAUn.png)
![Simple First Thread Post Preview FUihHwz](https://i.imgur.com/fUihHwz.png)
PHPBB2 ONLY FOR NOW.
JavaScript:
Check In the sub-forums.
- Code:
$(function() {
$('.topic_preview_button').on('click', function(){
var $thread = $(this).parent().find('a.topictitle').attr('href');
$('.topic_preview').load($thread + ' tr.post:eq(0)', function() {
$('.topic_preview td.post-options').remove();
$('.topic_preview .fa_like_div').remove();
$('.topic_preview').fadeIn('150'); });
});
$(document).mouseup(function(e) {
var $container = $('.topic_preview');
if (!$container.is(e.target) && $container.has(e.target).length === 0) {
$container.fadeOut('150');
}
});
});
In the topics_list_box template, find:
- Code:
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
Replace this part with:
- Code:
<h2 class="topic-title">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
<div class="topic_preview_button">Preview</div>
</h2>
And right before the following part:
- Code:
<!-- END topics_list_box -->
Insert:
- Code:
<div class="topic_preview"></div>
Basic CSS:
- Code:
.topic_preview_button {
display: inline-block;
text-transform: uppercase;
margin-left: 1%;
color: #0072ff;
cursor: pointer;
font-size: .95em;
}
.topic_preview {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #efefef;
padding: 2%;
box-sizing: border-box;
box-shadow: 0 0 0 150vw #30303070;
}
Last edited by mSyx on October 22nd 2021, 1:53 am; edited 2 times in total
SLGray, SarkZKalie and TonnyKamper like this post
Re: Simple First Thread Post Preview
JS has been updated to remove the post options and like & dislike buttons.
TonnyKamper likes this post
TonnyKamper and mSyx like this post
![-](https://2img.net/i/empty.gif)
» thread preview when you hover the mouse over the thread title , can we do it ?
» Link image preview meta tag for each thread
» Preview the forum threads list in a thread
» Can't see post formatting when I edit a post or preview.
» Reply, preview, delete, quote, create new post, edit, without change the page (ajax)
» Link image preview meta tag for each thread
» Preview the forum threads list in a thread
» Can't see post formatting when I edit a post or preview.
» Reply, preview, delete, quote, create new post, edit, without change the page (ajax)
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum