The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Simple First Thread Post Preview

2 posters

Go down

Simple First Thread Post Preview Empty Simple First Thread Post Preview

Post by mSyx September 14th 2021, 4:03 pm

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

Simple First Thread Post Preview FUihHwz

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 21st 2021, 2:08 pm; edited 2 times in total
mSyx
mSyx
Forumember

Male Posts : 155
Reputation : 46
Language : French & English
Location : France

View user profile https://help.forumotion.com/

SLGray, SarkZKalie and TonnyKamper like this post

Back to top Go down

Simple First Thread Post Preview Empty Re: Simple First Thread Post Preview

Post by Guest September 14th 2021, 5:45 pm

Pretty cool! Good job!
avatar
Guest
Guest


Back to top Go down

Simple First Thread Post Preview Empty Re: Simple First Thread Post Preview

Post by mSyx October 21st 2021, 2:09 pm

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

Male Posts : 155
Reputation : 46
Language : French & English
Location : France

View user profile https://help.forumotion.com/

TonnyKamper likes this post

Back to top Go down

Simple First Thread Post Preview Empty Re: Simple First Thread Post Preview

Post by SarkZKalie October 25th 2021, 9:21 am

Love it, @mSyx thank you for sharing us farao


Simple First Thread Post Preview Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1332
Reputation : 214
Language : English

View user profile https://rotavn.forumotion.com/

TonnyKamper and mSyx like this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum