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

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

Hi dear all,
Using this topic https://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://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 = '.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

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