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.

Application: Topic Thumbnail

+5
TheCrow
Zzbaivong
Pizza Boi
SLGray
JScript
9 posters

Go down

Application: Topic Thumbnail Empty Application: Topic Thumbnail

Post by JScript 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://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:
Application: Topic Thumbnail Captur11

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

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

http://jscript.forumeiros.com/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

I can say this will work on an Invision forum.


Application: Topic Thumbnail Slgray10

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

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

Post by Pizza Boi 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
Pizza Boi
Pizza Boi
Hyperactive

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

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

@Pizza Boi
See:
Application: Topic Thumbnail Captur19

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

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

http://jscript.forumeiros.com/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

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


Application: Topic Thumbnail Slgray10

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

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

Post by JScript 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
JScript
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

Thanks for the information.


Application: Topic Thumbnail Slgray10

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

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

Posts : 101
Reputation : 51
Language : JavaScript ^^

http://devs.forumvi.com

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

Post by SLGray 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?


Application: Topic Thumbnail Slgray10

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

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

Post by TheCrow 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.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6896
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

Thanks @Luffy .


Application: Topic Thumbnail Slgray10

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

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

Post by TheCrow January 15th 2016, 5:01 am

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

Male Posts : 6896
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

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

Male Posts : 38
Reputation : 3
Language : Arabic
Location : Palestine

https://iinkor.com

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

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

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

http://www.dkvdaily.com/

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

where is @JScript?
Ch@lo Valdez
Ch@lo Valdez
Forumember

Male Posts : 138
Reputation : 50
Language : spanish

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

Post by YoshiGM 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
YoshiGM
YoshiGM
Active Poster

Male Posts : 1488
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

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

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


Application: Topic Thumbnail Slgray10

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

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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