The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Application: Topic Thumbnail

View previous topic View next topic Go down

Application: Topic Thumbnail

Post by JScript on July 1st 2015, 10:25 pm

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://illiweb.com/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
avatar
JScript
Forumember

Male Posts : 741
Reputation : 172
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on July 2nd 2015, 3:22 am

I can say this will work on an Invision forum.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40226
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Pizza Boi on July 2nd 2015, 9:53 pm

Hi Very Happy

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

Regards,
Pizza Boi
avatar
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by JScript on July 2nd 2015, 10:36 pm

@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
avatar
JScript
Forumember

Male Posts : 741
Reputation : 172
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on July 7th 2015, 4:40 am

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40226
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by JScript on July 7th 2015, 11:46 am

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
avatar
JScript
Forumember

Male Posts : 741
Reputation : 172
Language : PT-BR, EN
Location : Brazil

http://jscript.forumeiros.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on July 7th 2015, 7:10 pm

Thanks for the information.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40226
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Zzbaivong on July 15th 2015, 8:20 pm

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));
avatar
Zzbaivong
Forumember

Posts : 100
Reputation : 48
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on January 15th 2016, 4:35 am

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?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40226
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Luffy on January 15th 2016, 4:57 am

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.





avatar
Luffy
Manager
Manager

Male Posts : 4790
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on January 15th 2016, 5:00 am

Thanks @Luffy .


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40226
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Luffy on January 15th 2016, 5:01 am

SLGray wrote:Thanks @Luffy .
No problem! ^_^





avatar
Luffy
Manager
Manager

Male Posts : 4790
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by mc nabulsy on April 19th 2016, 11:19 am

it's not work perfectly on my forum
phpbb2
there's some problemes :\
avatar
mc nabulsy
New Member

Posts : 6
Reputation : 1
Language : arabic

http://inkor.ibda3.info

Back to top Go down

Re: Application: Topic Thumbnail

Post by Herry Sudrajat on September 6th 2016, 8:05 pm

thanks @JScript Good
btw, how to displaying more than one image? bye
avatar
Herry Sudrajat
Forumember

Male Posts : 57
Reputation : 48
Language : Indonesian, English
Location : ID

http://www.dkvdaily.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Ch@lo Valdez on October 20th 2016, 10:55 pm

where is @JScript?
avatar
Ch@lo Valdez
Forumember

Male Posts : 131
Reputation : 45
Language : spanish

Back to top Go down

Re: Application: Topic Thumbnail

Post by YoshiGM on October 22nd 2016, 7:48 pm

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
avatar
YoshiGM
Forumember

Male Posts : 659
Reputation : 91
Language : Spanish, English & Italian (16%)
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on February 23rd 2017, 8:04 am

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40226
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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