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 Wed 1 Jul - 22:25

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

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on Thu 2 Jul - 3:22

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.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Pizza Boi on Thu 2 Jul - 21:53

Hi Very Happy

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

Regards,
Pizza Boi

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 Thu 2 Jul - 22:36

@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

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on Tue 7 Jul - 4:40

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.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by JScript on Tue 7 Jul - 11:46

@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

JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on Tue 7 Jul - 19:10

Thanks for the information.


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


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Zzbaivong on Wed 15 Jul - 20:20

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));

Zzbaivong
Forumember

Posts : 95
Reputation : 46
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on Fri 15 Jan - 4:35

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.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Luffy on Fri 15 Jan - 4:57

@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.






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Application: Topic Thumbnail

Post by SLGray on Fri 15 Jan - 5:00

Thanks @Luffy .


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


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Application: Topic Thumbnail

Post by Luffy on Fri 15 Jan - 5:01

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






Luffy
Manager
Manager

Male Posts : 4239
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Application: Topic Thumbnail

Post by mc nabulsy on Tue 19 Apr - 11:19

it's not work perfectly on my forum
phpbb2
there's some problemes :\

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 Tue 6 Sep - 20:05

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

Herry Sudrajat
Forumember

Male Posts : 52
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 Thu 20 Oct - 22:55

where is @JScript?

Ch@lo Valdez
Forumember

Male Posts : 100
Reputation : 31
Language : spanish

Back to top Go down

Re: Application: Topic Thumbnail

Post by YoshiGM on Sat 22 Oct - 19:48

@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

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

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