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 Wed 1 Jul - 13: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://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 Wed 1 Jul - 18:22

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 : 51512
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 Thu 2 Jul - 12:53

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

@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 Mon 6 Jul - 19:40

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 : 51512
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 Tue 7 Jul - 2: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
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 Tue 7 Jul - 10:10

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 : 51512
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 Wed 15 Jul - 11: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
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 Thu 14 Jan - 20: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?


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 : 51512
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 Thu 14 Jan - 20: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.


Application: Topic Thumbnail Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6921
Reputation : 795
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

Post by SLGray Thu 14 Jan - 21:00

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 : 51512
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 Thu 14 Jan - 21:01

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


Application: Topic Thumbnail Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6921
Reputation : 795
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Application: Topic Thumbnail Empty Re: Application: Topic Thumbnail

Post by mc nabulsy Tue 19 Apr - 2:19

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

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 Thu 20 Oct - 13:55

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 Sat 22 Oct - 10: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
YoshiGM
Active Poster

Male Posts : 1502
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 Thu 23 Feb - 0:04

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 : 51512
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