Application: Topic Thumbnail

How about having in the topic list a preview of the first image posted on each?

In your ACP: Modules -> HTML&JAVASCRIPT -> JavaScript codes management -> [Create a new JavaScript]
Title *: <- Whatever you want
Placement : <- In the sub-forums
Javascript Code * : <- Select, copy and paste the code below in this field:

Code:


/***
 * Application: Topic Thumbnail
 * Description: This application can displays thumbnails of topics.
 * Version: 1.03032014-jq1.9.1 - Udyat (Argumentum parvam)
 * Made and Optimizations by JScript - 2014/03/03
 * View more in: http://ajuda.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
jQuery(function () {
    var sCSS =
        '<style>' +
        '.bim_mainThumb {' +
            'opacity: 1;' +
            'visibility: visible;' +
            'max-width: none;' +
            'max-height: none;' +
            'width: 100%;' +
            'height: auto;' +
            'display: block;' +
            'image-rendering: auto' +
        '}' +
        '.bim_thumbPreview {' +
            'float: right;' +
            'position: relative;' +
            'z-index: 0;' +
        '}' +
        '.bim_img_container {' +
            'height: 70px;' +
            'width: 70px;' +
        '}' +
        '.bim_thumbPreview span {' +
            'box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);' +
            'margin-left: 84px;' +
            'margin-top: -68px;' +
            'position: absolute;' +
            'visibility: hidden;' +
            'z-index: 100;' +
        '}' +
        '.bim_thumbPreview:hover span {' +
            'visibility: visible;' +
        '}' +
        '.bim_thumbPreview span img {' +
            'border: 3px solid #000000;' +
            'max-width: 300px;' +
        '}' +
        '</style>';
    document.head.insertAdjacentHTML('beforeEnd', sCSS);

    var sHtml =
            '<a class="bim_thumbPreview">' +
                '<div style="padding: 1px; border: 1px solid #d5d5d5;">' +
                    '<div class="thumbIMG">' +
                        '<div class="bim_img_container" style="overflow: hidden; background-image: none;">' +
                            '<img src="http://2img.net/i/fa/empty.gif" class="bim_mainThumb">' +
                        '</div>' +
                    '</div>' +
                '</div>' +
                '<span class="previewIMG"><img src="http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg"></span>' +
            '</a>';
   
    var oTarget = 0,
        sFound = 'td:eq(2)',
        sInsert = '',
        sCommon = 'a.topictitle',
        sOverflow = 'auto',
        sGetIMG = '';
       
    /* Forum versions! */
    var phpBB2 = jQuery('.three-col td:eq(1) > table.forumline:last tbody tr:not(":empty")');
    var phpBB3 = jQuery('.topiclist.topics.bg_none li:not(":empty")');
    var punbb = jQuery('.statused tr:not(":empty")');
    var invision = jQuery('.borderwrap table.ipbtable tbody tr:not(":empty")');
   
    if (phpBB2.length) {
        oTarget = phpBB2;
        sInsert = 'div.topictitle';
        sGetIMG = '#page-body .post:first .postbody img:first';
    } else if(phpBB3.length) {
        oTarget = phpBB3;
        sFound = 'dd.dterm';
        sInsert = 'div.topic-title-container';
        sOverflow = 'inherit';
        sGetIMG = '#main-content .post:first .content img:first';
    } else if(punbb.length) {
        oTarget = punbb;
        sFound = '.tcl.tdtopics';
        sInsert = 'span.status';
        sGetIMG = '.main-content.topic .entry-content:first img:first';
    } else if(invision.length) {
        oTarget = invision;
        sInsert = sCommon;
        sGetIMG = '.borderwrap .post-entry:first img:first';
    };

    oTarget.each(function( index ) {
        var oFound = jQuery(this).find(sFound);
        if (oFound.length) {
            var oInsert = oFound.find(sInsert);
            var sUrl = oFound.find(sCommon).attr('href');
            var ID = 'Udyat_' + index;

            oFound.attr('id', ID);
            oFound.css('overflow', sOverflow);
            jQuery(sHtml).insertAfter(oInsert);

            /***
            * Only show the image if is visible in browser window (view port)!!!
            * Made and Optimizations by JScript at www.punbb.forumeiros.com
            */
            var elem = document.getElementById( ID );       
            if (isInViewPort(elem)) {
                jQuery.get(sUrl, function(data) {
                    var oImg = jQuery(sGetIMG, data);
                    var sImg = '';

                    if (oImg !== undefined) {
                        sImg = oImg.attr('src');
                        if (sImg !== undefined) {
                            oFound.find('.bim_img_container img').attr('src', sImg);
                            oFound.find('.previewIMG img').attr('src', sImg);
                        } else {
                            oFound.find('.bim_img_container img').attr('src', 'http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg');
                        }
                    }
                });
            } else {
                /* Fire event for 'scroll' to show the image... */
                jQuery(window).on('scroll.' + sUrl, showImage(sUrl, elem, oFound, sGetIMG));
            }
        }
    });
});
/* Function to check if an element is visible in view port */
function isInViewPort(elem) {
   var rect = elem.getBoundingClientRect();

   return (
   rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
   rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ );
}
/* Start function to show the image... */
function showImage(event, elem, oBject, sString) {
   return function() {
        /* Chech if the element is visible in view port! */
      if (isInViewPort(elem)) {
            /* If visible, stop event!!! */
         jQuery(window).off('scroll.' + event);
            jQuery.get(event, function(data) {
                var oImg = jQuery(sString, data);
                var sImg = '';

                if (oImg !== undefined) {
                    sImg = oImg.attr('src');
                    if (sImg !== undefined) {
                        oBject.find('.bim_img_container img').attr('src', sImg);
                        oBject.find('.previewIMG img').attr('src', sImg);
                    } else {
                        oBject.find('.bim_img_container img').attr('src', 'http://i55.servimg.com/u/f55/18/17/62/92/no_ima10.jpg');
                    }
                }
            });
        }
   }
}


Result:


This code was made more than a year, so forgive any errors, bugs and feel free to edit it!

In the next version I'll do the preview of the first topic in the form of an image.

JS

I can say this will work on an Invision forum.

Hi

It does not work on punBB. Is there a necessary prerequisite code for this?

Regards,
Pizza Boi

@Pizza Boi
See:


The only requirement of all my code is that the forum use the default skin or hosted on http://www.hitskin.com/ !

Third-party skins that do not follow the standard HTML and the official structure of Forumotion usually have problems with all codes, not only with my code.

JS

Does it take time for the images to appear after the page has loaded completely?

SLGray wrote:Does it take time for the images to appear after the page has loaded completely?

This code use a simple fire event for 'scroll' to show the image and an function to check if an element is visible in 'view port'!

JS

Thanks for the information.

1 page = 25 (average) topics or more.
1 visitor = 26 requests
10 visitors = 260 requests
=> Request Limits.
Now, your forum will have the loading speed is very slow, worse, it cannot be accessed.

You can use description input (less is used) to use as image url.
Edit topics_list_box template:

Code:

<span class="topic-desc"><!-- BEGIN switch_description -->{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}<!-- END switch_description --></span>

And add script:

Code:

(function() {
   function topicthumbnail(se, imgUrl) {
      $(se).replaceWith('<div style="background-image:url(' + imgUrl + ');" class="topicthumbnail"></div>');
   }
   $('.topic-desc').each(function() {
      var _this = this,
         textSrc = $(this).text(),
         dfUrl = 'http://i78.servimg.com/u/f78/17/70/81/78/inet-n10.jpg';
      if (!/^https?:\/\/(?:[\w\-]+\.)+\w{2,6}(?:\/[^\/#?]+)+\.(?:jpg|gif|png|jpeg)$/i.test(textSrc)) {
         topicthumbnail(_this, dfUrl);
         return;
      }
      $('<img>', {
         src: textSrc
      }).load(function() {
         topicthumbnail(_this, textSrc);
      }).error(function() {
         topicthumbnail(_this, dfUrl);
      });
   });
}(jQuery));

Is there a way to remove the no image option? I mean if there is no image in the post, could there be no image at all?

SLGray wrote:Is there a way to remove the no image option? I mean if there is no image in the post, could there be no image at all?

@SLGray if you don't want the default image to show up then you should leave this field in your code empty:

Code: dfUrl = 'http://i78.servimg.com/u/f78/17/70/81/78/inet-n10.jpg';

change to

Code: dfUrl = ' ';

This is Zzbaivong code.

Thanks @Luffy .

SLGray wrote:Thanks @Luffy .

No problem! ^_^

thanks @JScript
btw, how to displaying more than one image?

where is @JScript?

Ch@lo Valdez wrote:where is @JScript?

I have understood that he had a serious illness and some family problems and could not continue on the Staff

This will no longer be supported by JScript: https://help.forumotion.com/t151137-in-memory-of-jscript-joao-carlos.