Add a preview button for topics

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

Ange Tuteur: Forumaster; Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

Post n°1

Add a preview button for topics

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.

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.

Code:: $(function(){ var isPunbb = ''; if ($('.pun').length) var isPunbb = 'class="pun"'; $('a.topictitle').after(' <img id="topicPreview" src="https://i56.servimg.com/u/f56/18/45/41/65/new_wi10.gif" 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(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);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.