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.

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

View previous topic View next topic Go down

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

Post by Van-Helsing on March 6th 2014, 12:03 pm

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 March 10th 2014, 2:27 am; edited 2 times in total

Van-Helsing
Hyperactive

Male Posts : 2197
Reputation : 82
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 March 7th 2014, 4:02 am

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

JScript
Forumember

Male Posts : 741
Reputation : 167
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 March 9th 2014, 12:12 am

Bump

Van-Helsing
Hyperactive

Male Posts : 2197
Reputation : 82
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 March 10th 2014, 2:26 am

Thank you very much JS its solved.

Van-Helsing
Hyperactive

Male Posts : 2197
Reputation : 82
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 March 10th 2014, 2:33 am

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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