Add a preview button for topics Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

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.
The forum of the forums
2 posters

    Add a preview button for topics

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    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.
    Code:
    $(function(){
      var isPunbb = '';
      if ($('.pun').length) var isPunbb = 'class="pun"';
      $('a.topictitle').after('&nbsp;<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.
    Code:
    #topicPreview-container { background:#F00 !important; }

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



    This tutorial was written by Ange Tuteur.
    • Back to top
    skouliki
    skouliki
    skouliki
    Manager
    Manager


    Female Posts : 15167
    Reputation : 1696
    Language : English,Greek
    Location : Greece
    • Post n°2

    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

    • Back to top