How can I move thumbnail box and how can I make it load faster?

Go down

Solved How can I move thumbnail box and how can I make it load faster?

Post by Van-Helsing on Thu Mar 06, 2014 5:03 am

Hi dear all,
Using this topic http://help.forumotion.com/t130893-how-can-i-add-some-infos-about-last-post-in-the-board-index I want to move this box like this picture http://prntscr.com/2ychhy the post preview icon to move before the topic title. Furthermore it has delays on loading the picture. I am using this JavaScript

Spoiler:

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 sHtml =
                '<a class="bim_thumbPreview">' +
                    '<div style="padding: 1px; border: none;">' +
                        '<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 = '.postbody:first div:eq(0) img';
        } else if(phpBB3.length) {
            oTarget = phpBB3;
            sFound = 'dd.dterm';
            sInsert = 'div.topic-title-container';
            sOverflow = 'inherit';
            sGetIMG = '.postbody:first .content img';
        } else if(punbb.length) {
            oTarget = punbb;
            sFound = '.tcl.tdtopics';
            sInsert = 'span.status';
            sGetIMG = '.entry-content:first img';
        } else if(invision.length) {
            oTarget = invision;
            sInsert = sCommon;
            sGetIMG = '.post-entry:first img';
        };

        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');
                        }
                    }
                });
            }
       }
    }
Could you help me please to move this icon box http://prntscr.com/2ychhy ?

Best Regards,
Dark-Avenger


Last edited by Dark-Avenger on Sun Mar 09, 2014 8:27 pm; edited 2 times in total
avatar
Van-Helsing
Hyperactive

Male Posts : 2411
Reputation : 112
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I move thumbnail box and how can I make it load faster?

Post by JScript on Thu Mar 06, 2014 9:02 pm

My friend, I think you did not understand why the images are loaded with this "delay" and if it were not so it, there would be multiple requests at the same time and it would appear the "Request Limit" and your forum is already at the limit of that happen!

I hope you understand,

JS
avatar
JScript
Forumember

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

http://jscript.forumeiros.com/

Back to top Go down

Solved Re: How can I move thumbnail box and how can I make it load faster?

Post by Van-Helsing on Sat Mar 08, 2014 5:12 pm

Bump
avatar
Van-Helsing
Hyperactive

Male Posts : 2411
Reputation : 112
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I move thumbnail box and how can I make it load faster?

Post by Van-Helsing on Sun Mar 09, 2014 8:26 pm

Thank you very much JS its solved.
avatar
Van-Helsing
Hyperactive

Male Posts : 2411
Reputation : 112
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: How can I move thumbnail box and how can I make it load faster?

Post by Ange Tuteur on Sun Mar 09, 2014 8:33 pm

Topic solved and archived
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


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