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.

Add a preview button for topics

2 posters

Go down

Tutorial Add a preview button for topics

Post by Ange Tuteur July 7th 2014, 7:10 am

Add a preview button for topics

With this tutorial you will be able to add a preview button to the titles of your topics for your Forumotion forum, as in the example below.

Add a preview button for topics Captur41

Exclamation Attention : This will work for all forum versions, so long as you haven't made any heavy modifications to the template topics_list_box !

Adding the JavaScript

Go to Administration Panel > Modules > JavaScript codes management and create a new JavaScript.

Title: Topic Preview
Placement: In the sub-forums
Paste the following code and submit.
  var isPunbb = '';
  if ($('.pun').length) var isPunbb = 'class="pun"';
  $('a.topictitle').after('&nbsp;<img id="topicPreview" src="" title="Preview topic" alt="Preview" style="cursor:pointer;"/>');
  $('img#topicPreview').click(function() {
    $('body').append('<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:url(;cursor:pointer;z-index:10;"></div><div id="topicPreview-container" '+isPunbb+' style="width:auto;top:20%;left:15%;right:15%;padding:4px;position:fixed;z-index:50;background:#EEE;border:1px solid #CCC;border-radius:5px;"><div id="topicPreviewing" style="max-height:400px;overflow-y:auto;"><center><span class="topicPreview-loading" style="font-weight:bold;font-size:18px;">Loading...</span></center></div></div>');
    $('#topicPreviewing').load($(this).siblings('a.topictitle').attr('href')+' .post:eq(0)');
    $('#preview-filter').click(function(){$('#preview-filter, #topicPreview-container').remove()});

When finished, save the script and you should now be able to preview topics on your forum. thumright

Modification of the style

#topicPreview is the button which triggers the popup, you can give this a background, border..

#preview-filter is the overlay which displays when you click the button. The overlay is a small transparent image.

#topicPreview-container is the container which holds the loaded content. This is the ID which gives the popup its gray background. The default background-color can be overridden by using !important.
#topicPreview-container { background:#F00 !important; }

.topicPreview-loading can be used to style the loading texts i.e. give it a different color, font..
.topicPreview-loading { font-family:papyrus, sans-serif }

Ange Tuteur
Ange Tuteur

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

Back to top Go down

Tutorial Re: Add a preview button for topics

Post by skouliki February 13th 2020, 8:35 am

This code was updated to fit in with the new HTTPS address

updated 13.02.2020 by skouliki

Female Posts : 15210
Reputation : 1700
Language : English,Greek
Location : Greece

Back to top Go down

Back to top

- Similar topics

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