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.


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;
}

Pretty cool! Good job!

JS has been updated to remove the post options and like & dislike buttons.

Love it, @mSyx thank you for sharing us