[Share] code topics_list_box có ảnh Thái Nguyên News - by huyvip83

  • huyvip83
    Chỉ dùng cho hàng punbb

    Link demo:
    Code:
    http://thainguyennews.forumvi.com/f69-35-thong-tin-xa-hoi

    Ảnh demo:



    - CÁCH LÀM:

    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://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 = '#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');
                                }
                            }
                        });
                    }
               }
            }

    thay hết code topics_list_box thành code mới bên dưới

    code:

    Code:
    <link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css" media="screen">

      
    <style>

     
       .pun table .tcl {
    overflow: hidden;
    text-align: left;
    width: 54%;
    }
      
    .pun .table .tc2, .pun .table .tc3 {
    text-align: center;
    width: 7%;
      }/*.pun .main table td.tc2, .pun .main table td.tc3 {
    background-color: #fff;
      }*/
      .lightboxOverlay {
      top: 0;
      left: 0;
      z-index: 999;
      background-color: black;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
      opacity: 0.8;
      display: none;
      position:fixed;
    }

      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      .pun table .tdtopics .status {
    margin-left: -60px;
    margin-top: -14px;
    }

      .pun tbody.statused td.tcl {
      padding-right: 10px !important;
    }
    img.hanckidesc {
      float: right !important;
    }
    img.hanckidesc {
    width: 50px !important;
    height: 46px !important;
    margin-top: -9px !important;
    padding: 1px !important;
    z-index: 10 !important;
    border: 1px solid #c4c4c4;
    }
    </style>
          <script type="text/javascript">
    $(document).ready(function() {
        $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
    });
    $(function () {
            $('input[name="description"]').change(function () {
                var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
            if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
                alert("Sorry, the allowed file extensions are: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
            }
        })
    })
          </script>



    <!-- 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">
     
     <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="tc3">{topics_list_box.row.topic.table_sticky.L_VIEWS}</th>
     <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
     </tr>
     </thead>
     <tbody class="statused">
     <!-- END table_sticky -->
     <tr>
                      
     <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
                              
                              
                              
                              
     <span class="status">
     <!-- BEGIN switch_description -->
                <br />
                &nbsp;<a rel="lightbox" href="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}" id="hanckidescpopup">

                                      <img class="hanckidesc" title="Kích để xem Kích thước thật" src="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}"/></a>
                <!-- END switch_description -->    
        
                              
                              </span>
                              
                              
                              
                            
                              
                              
                              
                              
     <!-- BEGIN single_selection -->
     <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
     <!-- END single_selection -->
     {topics_list_box.row.ICON}&nbsp;
                              
                              
                              
                              
                              
                              
     {topics_list_box.row.NEWEST_POST_IMG}
     {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
     {topics_list_box.row.TOPIC_TYPE}&nbsp;
     <h2 class="topic-title" style="
        margin-left: 30px;
    ">
                                      
                                        
                                      
                                      
                                      <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp;
     {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp;
     {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
     
                              
                              
     </td>
                
                      <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><b>Trả lời</b> : <span style="font-size:15px;">{topics_list_box.row.REPLIES}</span><br>
                        <b>Xem</b> : <span style="font-size:15px;">{topics_list_box.row.VIEWS}</span></td>
                              
                        <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->"><div class="avs"><span>{topics_list_box.row.LAST_POST_AUTHOR}</span> </div> <span style="font-size: 11px;color:#969696;">{topics_list_box.row.LAST_POST_TIME}</span>{topics_list_box.row.LAST_POST_IMG}</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 -->          

    <!-- Hiện mã ID bài viết -->    
         <script type="text/javascript">
            //<![CDATA[
            $(".tcl.tdtopics").append(function(){
              return "<p><strong>ID topic: " + $(this).find(".topictitle").attr("href").replace(/\/t(\d+)-.+/, "$1") + "</strong></p>";
            });
            //]]>
            </script>
    <!-- Hiện mã ID bài viết -->

  • Giựt
    Hóa ra bác dùng Win XP Smile


    --Chữ ký--
    Diễn đàn Kênh Game 360>> Smile
  • the_dav
    đáng ra code này phải dùng full vẻr chứ. thấy code ghi các vẻr kìa. thím này có tést hẳn hoi ko vậy

  • ShanFan



    --Chữ ký--
    Smile

    Hãy ghé qua đây >> http://4rdinhcao.forumvi.com/ để được hỗ trợ

    Smile Very Happy
  • Sponsored content

Thông tin tác giả
avatar
MEM LV3
Bài viết :
226
Points :
371
Like :
65
Punbb
Cẩn thận
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
36
Points :
40
Like :
2
Punbb
An toàn
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<