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.

Image in topic list for the topics

View previous topic View next topic Go down

Image in topic list for the topics

Post by Luffy on May 12th 2014, 11:10 am

Well hello..
I found this thread
http://help.forumotion.com/t130893-how-can-i-add-some-infos-about-last-post-in-the-board-index
and i want to add this image to my forum. I have punBB and by trying the codes nothing happened! If someone can help me i would appreciate it a lot! Thanks

Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Ikerepc on May 12th 2014, 4:34 pm

Can you can copy here exactly code what you use and write what you want please?

Ikerepc
Active Poster

Male Posts : 1114
Reputation : 152
Language : Croatian, HTML, CSS, jQuery, JavaScript, PHP, SQL, Bascom, Python, C, FBD & LAD for PLC and more... Little English :D
Location : Around electronics and progmamming ;)

http://help.forumotion.com

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 12th 2014, 8:06 pm

Hello,
I tried that and nothing happened. That's why i opened a topic! Smile






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Ikerepc on May 12th 2014, 8:44 pm

That topic have lot of links and posts, I can spent hours to find that.

Please write exactly that code you using.

Ikerepc
Active Poster

Male Posts : 1114
Reputation : 152
Language : Croatian, HTML, CSS, jQuery, JavaScript, PHP, SQL, Bascom, Python, C, FBD & LAD for PLC and more... Little English :D
Location : Around electronics and progmamming ;)

http://help.forumotion.com

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 12th 2014, 8:48 pm

The codes that you have to use for this are these:
CSS:
Code:
.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;
}

Javascript:
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: 1px solid #d5d5d5;">' +
                    '<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');
                    }
                }
            });
        }
  }
}







Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Ikerepc on May 12th 2014, 10:30 pm

Try to tag it "in all pages".

Ikerepc
Active Poster

Male Posts : 1114
Reputation : 152
Language : Croatian, HTML, CSS, jQuery, JavaScript, PHP, SQL, Bascom, Python, C, FBD & LAD for PLC and more... Little English :D
Location : Around electronics and progmamming ;)

http://help.forumotion.com

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 13th 2014, 11:21 am

Tagging it in all pages won't it show in the homepage as well? I only want it in the topics.






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Pizza Boi on May 13th 2014, 11:25 am

Hi Very Happy

Try it out in a test forum and see if you should make modifications for the bottom part of the code Smile .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 13th 2014, 11:34 am

I tried it. But nothing worked. I don't know why! The other time (about 4 months ago) i used this worked fine but know i don't know why it doesn't. Sad






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Pizza Boi on May 13th 2014, 11:36 am

Hi Very Happy

Try contacting JScript in his forum, I'm still confused on how he wrote it since his style isn't something I can easily comprehend x_x". Sorry if I can't help much.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 13th 2014, 2:50 pm

This is why i opened this topic my friend. So other can see it and help me out. I will wait for this as long as it takes.

I think its my template topic list box that makes the problem because i changed it!
Please help me... Sad






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by SLGray on May 13th 2014, 10:27 pm

Well then set your templates to default and see if it works.


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


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 13th 2014, 10:54 pm

It works with the default templates.
But i cannot set it to the default ones. I made so many changes. Can someone help me with the template?
I am using this:
Code:
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
         var all_checked = true;
         for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
         }
         }
         document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
         for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
         }
         }
      }
      </script>
   <!-- END multi_selection -->

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
                          <th class="tcr"><div class="perigrafititlonmesa">Πληροφορίες</div></th>
         </tr>
      </thead>
      <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div>

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /   >
      <!-- END multi_selection -->
      <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
                       
                          <th class="tcr">Πληροφορίες</th>
         </tr>
      </thead>
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <div class="t2">
                                  <div class="eikonidiakleidklp"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></div>
            
{topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a> {topics_list_box.row.GOTO_PAGE_NEW}
                                  <br />  (συγγραφέας {topics_list_box.row.TOPIC_AUTHOR})
                             </div>




            <!-- BEGIN switch_description -->
            <br />
            &nbsp;{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            <!-- END switch_description -->
         </td>
               
         
         <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                  <center><div class="pliroforiesmesa">
                    Η τελευταία απάντηση δημοσιεύτηκε από <br />
                    {topics_list_box.row.LAST_POST_AUTHOR} <br />
                    {topics_list_box.row.LAST_POST_TIME}<br />
 
    <span class="sta2" style=" padding-left: 6px; ">{topics_list_box.row.REPLIES} Απαντήσεις</span> |
 
  <span class="sta1" style=" padding-right: 6px; ">{topics_list_box.row.VIEWS} Αναγνώσεις</span>


                          </div></center>
                  </td>
         <!-- BEGIN multi_selection -->
         <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
         <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
   <div class="main-foot clearfix">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
   </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Pizza Boi on May 14th 2014, 1:50 am

Hi Very Happy

Sorry, but I'm just checking on phone at the moment. Try comparing the Javascript code JScript has and your current template. Also, make sure you got the default one as well because you should find the missing selectors or variables in your current template and re-implement them by copying it from the default one.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

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

http://redlustempire.forumtl.com/

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 14th 2014, 11:38 am

I tried modifying the default template and make it as i have it now on a test forum but as soon as i merge the 2 columns with the topics and views of topic it disappears the image.. Sad






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 15th 2014, 6:06 pm

BUMP






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 19th 2014, 9:05 pm

Bump






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Re: Image in topic list for the topics

Post by Luffy on May 22nd 2014, 1:25 am

BUMP






Luffy
Manager
Manager

Male Posts : 4238
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

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