مشكله في كود اعادة تحجيم الصور

المشكله هي ان الكود يظهر بشكل خاطئ يعني لايظهر فوق الصورة في بعض الاحيان وحجمه يظهر صغيراً بحيث الكتابة تكون متقسمة بشكل غبي
صور لتوضيح المشاكل
مشكلة الكتابة تكون مقسمة بشكل غبي في الصور الصغيرة (واصلا لماذا الكود يظهر في الصور الصغيرة؟)

مشكلة ان الكود لايظهر فوق الصور بشكل صحيح


هذا الكود يقوم باعادة تحجيم الصور

الكود:

(function() {
  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)
 
    selector : '.post-content > div:not(.user):not(.postprofile):not(.post-signature) img, .mod_news img, .message-text img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></i> العرض بحجم كامل',
        enlarge : '<i class="fa fa-search-plus"></i> تكبير الصورة',
        reduce : '<i class="fa fa-search-minus"></i> تصغير الصورة',
      download : '<i class="fa fa-download"></i> تحميل الصورة',
      tooltip : 'إضغط للعرض بالحجم الكامل'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );
 
  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);
 
  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());

كونان2000 كتب:اهلا
جرب هذا

الكود:

(function() {
  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)
 
    selector : '.post-content > div:not(.user):not(.postprofile):not(.post-signature) img, .mod_news img,.post-content > div:not(img.emotiuser_icon.fa_img_reduced), .message-text img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></i> العرض بحجم كامل',
        enlarge : '<i class="fa fa-search-plus"></i> تكبير الصورة',
        reduce : '<i class="fa fa-search-minus"></i> تصغير الصورة',
      download : '<i class="fa fa-download"></i> تحميل الصورة',
      tooltip : 'إضغط للعرض بالحجم الكامل'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width -  + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );
 
  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);
 
  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());

اهلا اخي كونان الكود خرب المواضيع صارت تظهر في الجنب اليمين وتخرج من مكان الموضوع

تفضل اخي كونان هذا الكود من تصميمك مع بعض التعديلات
الكود طويل لهذا سأقوم بارساله على مرتين
النصف الاول

الكود:

<!-- code license by pirates-revo.com -->
  <script type="text/javascript">
var CopyrightNotice='The last Topics category for forumotion. Copyright :copyright: ';
$(function () {
    $.ajax({
        url: "/feed/?f={FORUM_ID}",
        success: function (a) {
  $(".post-content:first").after('<center><br /> <div align="center" class="postbody"> الموضوع الأصلي : <a href="topic-t{TOPIC_ID}.htm">{TOPIC_TITLE}
      </a>  //
      المصدر: <a href="/">ثورة القراصنة</a>
</div><div class="clear"></div><div class="clear"></div><div class="clear_both"></div><div style="width:90%;background:#eee;border:1px solid #ddd;padding:4px;margin-top:5px; font-size: 13px; font-family: Tahoma;font-weight: bold;"><br /><div id="cungchuyenmuc" style="font-weight: bold;padding:10px 20px;background:#fff;border:1px solid #ddd;"><div class="title">اخر مواضيع القسم</div><br /></div></div></center>');
            12 < $(a).find("title").length ? so = 12 : so = $(a).find("title").length;
            for (i = 2; i < so; i++) $('<a href="' + $(a).find("link:eq(" + i + ")").text() + '">' + $(a).find("title:eq(" + i + ")").text() + "</a><br/>").appendTo("#cungchuyenmuc")
        }
    })
});
</script>
<!-- code license by pirates-revo.com -->

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
  //<![CDATA[
  var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function(id)
    {
        try
        {
            var regId = parseInt(id, 10);
            if( isNaN(regId) ) { regId = 0; }

            if( regId > 0)
            {
                $('.post--' + id).parent().toggle(0, function()
                {
                    if( $(this).is(":visible") )
                    {
                        $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                    }
                    else
                    {
                        $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                    }
                });
            }
        }
        catch(e) { }

        return false;
    };
    //]]>
</script>
<script type="text/javascript">
  //<![CDATA[
(function() {
  window.faMentionAvatar = {
    // position modifies the position of the avatar
    // 0 = before mention
    // 1 = after mention
    position : 0,
    cacheTime : 1*60*60*1000, // amount of time the avatar is cached ( 1 hour )
 
    mentions : null, // mention node list
    index : -1, // current index in the mentions array
 
    // checks if the mention is valid and then gets the avatar
    getter : function() {
      var mention = faMentionAvatar.mentions[++faMentionAvatar.index],
          storage = window.localStorage,
          id;
 
      if (mention) {
        id = mention.href.replace(/.*?\/u/, '');
 
        if (storage && storage['mentionAvatar_' + id] && storage['mentionAvatar_' + id + '_exp'] > +new Date - faMentionAvatar.cacheTime) {
          var avatar = document.createElement('IMG');
          avatar.className += ' mention-ava';
          avatar.src = storage['mentionAvatar_' + id];
          faMentionAvatar.position ? mention.appendChild(avatar) : mention.insertBefore(avatar, mention.firstChild);
          faMentionAvatar.getter();
        } else {
          $.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
            var avatar = $('.tooltip-content > img', d)[0];
       
            if (avatar) {
              faMentionAvatar.position ? mention.appendChild(avatar) : mention.insertBefore(avatar, mention.firstChild);
     
              if (storage) {
                storage['mentionAvatar_' + id] = avatar.src;
                storage['mentionAvatar_' + id + '_exp'] = +new Date;
              }
            }
            faMentionAvatar.getter();
          });
        }
      }
    }
  };
 
  // write the stylesheet into the HEAD section
  document.write('<style type="text/css">
                .fa_like_div img { height:25px; width:25px; vertical-align:middle; border-radius:10px; background:#d7c8c8; margin:1px 3px; padding:1px; }

                </style>');
 
  // statements that need execution when the document is ready
  $(function() {
    faMentionAvatar.mentions = $('.fa_like_div [href*="/u"]');
    faMentionAvatar.getter();
  });
}());
//]]>
</script>

<style type="text/css">
.ShareScreen {
    background: none repeat scroll 0px 0px #FFF;
    border: 1px solid #E8E8E8;
    border-radius: 5px;
    font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
    font-size: 0.75em;
    font-weight: lighter;
    padding: 8px;
    margin-top: 10px;
    overflow: hidden;
    min-height: 10px;
}
.ShareScreen .IconShare {
    float: right;
    font-size: 36px;
    width: 50px;
    height: 46px;
    margin-left: 10px;
    border-radius: 5px;
    background: none repeat scroll 0% 0% #5E7081;
    color: #FFF;
    text-align: center;
    padding-top: 9px;}
.ShareScreen .ShareList {
    float: right;
    margin-left: 10px;}
#logged_out_reply {
    text-align: center;}
.content-block, .panel, .module {
    color: #333;
    background: #EEE;
    border: 1px solid #CCC;
    margin: 15px 0;}
.lor_maintitle, .lor_subtitle {
    color: #000;
    font-size: 36px;
    font-weight: normal;
    margin: 20px 3px 6px 3px;}
.lor_maindesc, .lor_subdesc {
    color: #999;
    font-size: 14px;
    margin: 3px;}
.lor_panel {
    background: #FFF;
    border: 1px solid #DDD;
    display: inline-block;
    margin: 1%;
    padding: 1%;
    width: 45%;}
@media (min-width: 0px) and (max-width: 768px) {
    .lor_panel {
        display: block;
        width: 90%;
        margin: 6px auto;}
    .lor_maintitle {
        font-size: 24px; }}
</style>
<main id="topic">
    <div class="topic-header">
        <h1><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></h1>
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow" title="{T_POST_NEW_TOPIC}" {S_POST_NEW_TOPIC} class="btn btn-default mobile-hidden">
            <i class="material-icons">{I_POST_NEW_TOPIC}</i>
            <span>{L_POST_NEW_TOPIC}</span>
        </a>
        <!-- END switch_user_authpost -->
        <!-- BEGIN switch_user_authreply -->
        <a href="{U_POST_REPLY_TOPIC}" title="{T_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} class="btn btn-default">
            <i class="material-icons">{I_POST_REPLY_TOPIC}</i>
            <span>{L_POST_REPLY_TOPIC}</span>
        </a>
        <!-- END switch_user_authreply -->
        {POSTERS_LIST}
        <div id="breadcrumbs" class="breadcrumbs-topic">
            <a href="{U_INDEX}"><i class="material-icons">home</i> <span>{L_INDEX}</span></a>
            {NAV_CAT_DESC}
        </div>
        <!-- BEGIN topicpagination -->
        <div class="pagination">
            {PAGINATION}
        </div>
        <!-- END topicpagination -->
    </div>

    <div class="topic-actions">
        <div class="topic-actions-buttons">
            <!-- BEGIN switch_plus_menu -->
            <div class="plus-menu-wrap">
                <script type="text/javascript">//<![CDATA[
                    var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
                    var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
                    var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
                    var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
                    var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
                    insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
                    //]]>
                </script>
            </div>
            <!-- END switch_plus_menu -->

            <!-- BEGIN switch_twitter_btn -->
            <span>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
            <!-- END switch_twitter_btn -->

            <!-- BEGIN switch_fb_likebtn -->
            <script>(function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s); js.id = id;
                    js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));</script>
            <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
            <!-- END switch_fb_likebtn -->

            <!-- BEGIN switch_plus_menu -->
        <div id="addthis-toolbar">
            <div class="btn-floating-left" tabindex="100">
                    {L_SHARE}
            </div>
            <div class="addthis-toolbar-btn" style="position:absolute; z-index:1000; display: none; background-color: #fff;">
                    {switch_plus_menu.SOCIAL_BUTTONS}
            </div>
        </div>

            {switch_plus_menu.JS_SOCIAL_BUTTONS}
            <!-- END switch_plus_menu -->
        </div>
    </div>
  <!-- BEGIN switch_isconnect -->
  <div class="quick-nav-topics">
      <a href="{U_VIEW_OLDER_TOPIC}" title="{L_VIEW_PREVIOUS_TOPIC}"><i class="material-icons">chevron_left</i><span>{L_PREVIOUS}</span></a>
      <a href="{U_VIEW_NEWER_TOPIC}" title="{L_VIEW_NEXT_TOPIC}" style="float: right;"><span>{L_NEXT}</span><i class="material-icons">chevron_right</i></a>
  </div>
  <!-- END switch_isconnect -->


{POLL_DISPLAY}
<!-- code license by pirates-revo.com -->
<div class="post-COUNT">
<div class="smbox">
  <a target="_blank" href="https://twitter.com/intent/tweet?url=https://pirates-revo.forummo.com/t{TOPIC_ID}-topic">
    <span class="liker hint--left" aria-label="إرسال إلى منصة X">
      <img src="https://forum.kooora.com/logos/x.png" style="height:38px; width:38px; border: 1px solid gray;">
    </span>
  </a>
  <span class="liker hint--left" aria-label="إرسال إلى منصة فيسبوك">
    <a target="_blank" href="https://www.facebook.com/sharer.php?u=https://pirates-revo.forummo.com/t{TOPIC_ID}-topic">
    <img src="https://forum.kooora.com/logos/fb.png" style="height:38px; width:38px; border: 1px solid gray;">
    </a>
  </span>
  <span class="liker hint--left" aria-label="إرسال إلى واتس آب">
    <a target="_blank" href="https://api.whatsapp.com/send?text=https://pirates-revo.forummo.com/t{TOPIC_ID}-topic">
      <img src="https://forum.kooora.com/logos/wa.png" style="height:38px; width:38px; border: 1px solid gray;">
    </a>
  </span>
  <span class="liker hint--left" aria-label="إرسال إلى تلغرام">
    <a target="_blank" href="https://t.me/share/url?url=https://pirates-revo.forummo.com/t{TOPIC_ID}-topic">
      <img src="https://forum.kooora.com/logos/tg.png" style="height:38px; width:38px; border: 1px solid gray;">
    </a>
  </span>
</div></div>
<!-- code license by pirates-revo.com -->

<div class="post-COUNT">
 <script>document.write('<style type="text/css">.post-COUNT { text-align: center; border: solid #00000040 1px; margin: 10px; padding: 5px; border-radius: 10px; background: #fff;}.qonan2000 { position: relative; display: inline-block;} .qonan2000-content { display: none; position: absolute; background-color: #f9f9f9; width: 140px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 999999;} .close-btn-h1 { position: absolute; right: 0; top: 10px; cursor: pointer; line-height: 0; font-size: 30px;  font-weight: bold; color: red;} button.qonan2000-btn-h1 { border: solid #00000040 1px; margin-right: 13px; padding: 5px;}.conan20000-post,.konan2000-content,.konann2000-content, .conan2000-post{ cursor: pointer; padding: 7px;} .conan20000,.konan2000,.konann2000,.conan2000 { border: solid 1px #0000006b; background: white; margin: 4px; display: inline-block;} div#konan2000-Default,div#konann2000-Default,div#conan2000-Default,div#conan20000-Default { cursor: pointer; background: #0000; border: solid 1px #0000004a; width: 100%; margin: 0;} .conan2000:hover, .conan20000:hover,.konan2000:hover,.konan2000:hover { background: #0000003d !important;} blockquote,blockquote font, .quote_content font,dl.codebox {color: initial;} </style>');</script>
 
<!-- لون المساهمات -->                 
<div class="qonan2000">             
<button class="qonan2000-btn-h1">لون المساهمات</button><div class="qonan2000-content"><span class="close-btn-h1">×</span><div class="konan2000-content-color">
    <div class="ko0nan2000" style="background: #2a013a;color: #ffffff;width: 100%;margin-bottom: 11px;">النص</div>         
    <div class="konan2000" data-color="#F44336"><div class="konan2000-content" style="background:#F44336"></div></div>
    <div class="konan2000" data-color="#FF9800"><div class="konan2000-content" style="background:#FF9800"></div></div>
    <div class="konan2000" data-color="#FFEB3B"><div class="konan2000-content" style="background:#FFEB3B"></div></div>
    <div class="konan2000" data-color="#4CAF50"><div class="konan2000-content" style="background:#4CAF50"></div></div><br />
    <div class="konan2000" data-color="#00BCD4"><div class="konan2000-content" style="background:#00BCD4"></div></div>
    <div class="konan2000" data-color="#2196F3"><div class="konan2000-content" style="background:#2196F3"></div></div>
    <div class="konan2000" data-color="#9C27B0"><div class="konan2000-content" style="background:#9C27B0"></div></div>
    <div class="konan2000" data-color="#E91E63"><div class="konan2000-content" style="background:#E91E63"></div></div><br />
    <div class="konan2000" data-color="#FFFFFF"><div class="konan2000-content" style="background:#FFFFFF"></div></div>
    <div class="konan2000" data-color="#9E9E9E"><div class="konan2000-content" style="background:#9E9E9E"></div></div>
    <div class="konan2000" data-color="#000000"><div class="konan2000-content" style="background:#000000"></div></div>
    <div class="konan2000" data-color="#5D4037"><div class="konan2000-content" style="background:#5D4037"></div></div><br />
    <div class="konan2000" data-color="#0000" style="background: #0000;border: solid 1px #0000;cursor: pointer;">لون شفاف</div><br />
    <div class="konan2000" id="konan2000-Default">الألوان الافتراضية</div>
</div></div></div>         
 
<!-- خلفية المساهمات -->               
<div class="qonan2000">
<button class="qonan2000-btn-h1">خلفية المساهمات</button><div class="qonan2000-content"><span class="close-btn-h1">×</span><div class="conan2000-post-color">
    <div class="ko0nan2000" style="background: #003e5c;color: #ffffff;width: 100%;margin-bottom: 11px;">الخلفية</div>       
    <div class="conan2000" data-color="#F44336"><div class="conan2000-post" style="background:#F44336"></div></div>
    <div class="conan2000" data-color="#FF9800"><div class="conan2000-post" style="background:#FF9800"></div></div>
    <div class="conan2000" data-color="#FFEB3B"><div class="conan2000-post" style="background:#FFEB3B"></div></div>
    <div class="conan2000" data-color="#4CAF50"><div class="conan2000-post" style="background:#4CAF50"></div></div><br />
    <div class="conan2000" data-color="#00BCD4"><div class="conan2000-post" style="background:#00BCD4"></div></div>
    <div class="conan2000" data-color="#2196F3"><div class="conan2000-post" style="background:#2196F3"></div></div>
    <div class="conan2000" data-color="#9C27B0"><div class="conan2000-post" style="background:#9C27B0"></div></div>
    <div class="conan2000" data-color="#E91E63"><div class="conan2000-post" style="background:#E91E63"></div></div><br />
    <div class="conan2000" data-color="#FFFFFF"><div class="conan2000-post" style="background:#FFFFFF"></div></div>
    <div class="conan2000" data-color="#9E9E9E"><div class="conan2000-post" style="background:#9E9E9E"></div></div>
    <div class="conan2000" data-color="#000000"><div class="conan2000-post" style="background:#000000"></div></div>
    <div class="conan2000" data-color="#5D4037"><div class="conan2000-post" style="background:#5D4037"></div></div><br />
    <div class="conan2000" data-color="#0000" style="background: #0000;border: solid 1px #0000;cursor: pointer;">لون شفاف</div><br />
    <div class="conan2000" id="conan2000-Default">الألوان الافتراضية</div>
</div></div></div>
                 
<!-- لون النص الاكواد-الاقتباس -->               
<div class="qonan2000">             
<button class="qonan2000-btn-h1">لون النص الاكواد-الاقتباس</button><div class="qonan2000-content"><span class="close-btn-h1">×</span><div class="konann2000-content-color">
    <div class="ko0nann2000" style="background: #2a013a;color: #ffffff;width: 100%;margin-bottom: 11px;">النص</div>         
    <div class="konann2000" data-color="#F44336"><div class="konann2000-content" style="background:#F44336"></div></div>
    <div class="konann2000" data-color="#FF9800"><div class="konann2000-content" style="background:#FF9800"></div></div>
    <div class="konann2000" data-color="#FFEB3B"><div class="konann2000-content" style="background:#FFEB3B"></div></div>
    <div class="konann2000" data-color="#4CAF50"><div class="konann2000-content" style="background:#4CAF50"></div></div><br />
    <div class="konann2000" data-color="#00BCD4"><div class="konann2000-content" style="background:#00BCD4"></div></div>
    <div class="konann2000" data-color="#2196F3"><div class="konann2000-content" style="background:#2196F3"></div></div>
    <div class="konann2000" data-color="#9C27B0"><div class="konann2000-content" style="background:#9C27B0"></div></div>
    <div class="konann2000" data-color="#E91E63"><div class="konann2000-content" style="background:#E91E63"></div></div><br />
    <div class="konann2000" data-color="#FFFFFF"><div class="konann2000-content" style="background:#FFFFFF"></div></div>
    <div class="konann2000" data-color="#9E9E9E"><div class="konann2000-content" style="background:#9E9E9E"></div></div>
    <div class="konann2000" data-color="#000000"><div class="konann2000-content" style="background:#000000"></div></div>
    <div class="konann2000" data-color="#5D4037"><div class="konann2000-content" style="background:#5D4037"></div></div><br />
    <div class="konann2000" data-color="#0000" style="background: #0000;border: solid 1px #0000;cursor: pointer;">لون شفاف</div><br />
    <div class="konann2000" id="konann2000-Default">الألوان الافتراضية</div>
</div></div></div>
                 
<!-- خلفية الاكواد-الاقتباس -->               
<div class="qonan2000">
<button class="qonan2000-btn-h1">خلفية الاكواد-الاقتباس</button><div class="qonan2000-content"><span class="close-btn-h1">×</span><div class="conan20000-post-color">
    <div class="ko0nan2000" style="background: #003e5c;color: #ffffff;width: 100%;margin-bottom: 11px;">الخلفية</div>       
    <div class="conan20000" data-color="#F44336"><div class="conan20000-post" style="background:#F44336"></div></div>
    <div class="conan20000" data-color="#FF9800"><div class="conan20000-post" style="background:#FF9800"></div></div>
    <div class="conan20000" data-color="#FFEB3B"><div class="conan20000-post" style="background:#FFEB3B"></div></div>
    <div class="conan20000" data-color="#4CAF50"><div class="conan20000-post" style="background:#4CAF50"></div></div><br />
    <div class="conan20000" data-color="#00BCD4"><div class="conan20000-post" style="background:#00BCD4"></div></div>
    <div class="conan20000" data-color="#2196F3"><div class="conan20000-post" style="background:#2196F3"></div></div>
    <div class="conan20000" data-color="#9C27B0"><div class="conan20000-post" style="background:#9C27B0"></div></div>
    <div class="conan20000" data-color="#E91E63"><div class="conan20000-post" style="background:#E91E63"></div></div><br />
    <div class="conan20000" data-color="#FFFFFF"><div class="conan20000-post" style="background:#FFFFFF"></div></div>
    <div class="conan20000" data-color="#9E9E9E"><div class="conan20000-post" style="background:#9E9E9E"></div></div>
    <div class="conan20000" data-color="#000000"><div class="conan20000-post" style="background:#000000"></div></div>
    <div class="conan20000" data-color="#5D4037"><div class="conan20000-post" style="background:#5D4037"></div></div><br />
    <div class="conan20000" data-color="#0000" style="background: #0000;border: solid 1px #0000;cursor: pointer;">لون شفاف</div><br />
    <div class="conan20000" id="conan20000-Default">الألوان الافتراضية</div>
</div></div></div>                 
</div>

    <!-- BEGIN postrow -->
    <!-- BEGIN hidden -->
    <div class="post-wrap {postrow.hidden.ROW_CLASS} post-hidden">
        <div class="block">
            <div class="block-content">
                <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
                <div class="block-footer" style="display: none;">
                    <!-- END hidden -->
                 

                    <!-- BEGIN displayed -->
                    <div id="post-{postrow.U_POST_ID}" class="post-wrap {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}">
                        <div id="{postrow.U_POST_ID}" class="post-header">
                            <h2>
                                <i class="material-icons">description</i>
                                {postrow.displayed.ICON}
                        <span class="post-heading-wrap">
                          <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>
                          <span class="post-date">{postrow.displayed.POST_DATE_NEW}</span>
                        </span>
                    </h2>
                    <div class="mobile-hide post-buttons">
                        <ul>
                          <li class="btn-thank">
                                        {postrow.displayed.THANK_IMG}
                                    </li>
                                    <li class="btn-quote-multi">
                                        {postrow.displayed.MULTIQUOTE_IMG}
                                    </li>
                                    <li class="btn-quote">
                                        {postrow.displayed.QUOTE_IMG}
                                    </li>
                                    <li class="btn-edit">
                                        {postrow.displayed.EDIT_IMG}
                                    </li>
                                    <li class="btn-delete">
                                        {postrow.displayed.DELETE_IMG}
                                    </li>
                                    <li class="btn-ip">
                                        {postrow.displayed.IP_IMG}
                                    </li>
                                    <li class="btn-report">
                                        {postrow.displayed.REPORT_IMG_NEW}
                                    </li>
                                </ul>
                            </div>
                            <div class="mobile-show dropdown post-buttons-mobile">
                                <i class="material-icons">more_horiz</i>
                                <ul class="dropdown-box">
                                    <li class="btn-thank">
                                        {postrow.displayed.THANK_IMG}
                                    </li>
                                    <li class="btn-quote-multi">
                                        {postrow.displayed.MULTIQUOTE_IMG}
                                    </li>
                                    <li class="btn-quote">
                                        {postrow.displayed.QUOTE_IMG}
                                    </li>
                                    <li class="btn-edit">
                                        {postrow.displayed.EDIT_IMG}
                                    </li>
                                    <li class="btn-delete">
                                        {postrow.displayed.DELETE_IMG}
                                    </li>
                                    <li class="btn-ip">
                                        {postrow.displayed.IP_IMG}
                                    </li>
                                    <li class="btn-report">
                                        {postrow.displayed.REPORT_IMG_NEW}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="post-body">
                            <div class="post">
                                <div class="post-content">
                                    <div class="content">{postrow.displayed.MESSAGE}</div>



                                    <!-- BEGIN switch_attachments -->
                                    <div class="attachbox">
                              <b>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</b>
                                        <dl class="attachments">
                                            <!-- BEGIN switch_post_attachments -->
                                            <dt>
                                                <!-- BEGIN switch_dl_att -->
                                                <a class="postlink btn btn-flat" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}"><i class="material-icons">attach_file</i>{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                                <!-- END switch_dl_att -->
                                                <!-- BEGIN switch_no_dl_att -->
                                    <div class="postlink btn btn-flat" style="cursor: not-allowed"><i class="material-icons">attach_file</i>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT}</div> {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                                <!-- END switch_no_dl_att -->
                                            </dt>
                                            <dd>
                                                <!-- BEGIN switch_no_comment -->
                                                <p>
                                                    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}
                                    </p>
                                    <!-- END switch_no_comment -->

النصف الثاني

الكود:

                                    <!-- BEGIN switch_no_dl_att -->
                                    <p><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></p>
                                    <!-- END switch_no_dl_att -->
                                    <p>(<span class="ltr">{postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}</span>) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</p>
                                </dd>
                                <!-- END switch_post_attachments -->
                              </dl>
                          </div>
                          <!-- END switch_attachments -->
                          <!-- BEGIN switch_signature -->
                          <div class="post-signature" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                          <!-- END switch_signature -->
                        </div>

                        <div class="post-footer<!-- BEGIN switch_likes_active --> likes-active<!-- END switch_likes_active --><!-- BEGIN switch_vote_active --> vote-active<!-- END switch_vote_active -->">
                          <!-- BEGIN switch_likes_active -->
                          <div class="fa_like_div">
                              <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
                                <span class="rep-cat">
                                    <i class="material-icons">thumb_up</i>
                                    {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
                                </span>
                                <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>
                              </button>
                              <!-- BEGIN switch_dislike_button -->
                              <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
                                <span class="rep-cat">
                                    <i class="material-icons">thumb_down</i>
                                    {postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
                                </span>
                                <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>
                              </button>
                              <!-- END switch_dislike_button -->
                                        <!-- BEGIN switch_like_list -->
                                        {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
                                        <!-- END switch_like_list -->
                                        <!-- BEGIN switch_dislike_list -->
                                        {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
                                        <!-- END switch_dislike_list -->
                          </div>
                          <!-- END switch_likes_active -->
                          <!-- BEGIN switch_vote_active -->
                          <div class="vote">
                              <!-- BEGIN switch_vote -->
                              <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="vote-up">
                                <i class="material-icons">add_circle_outline</i>
                              </a>
                              <!-- END switch_vote -->

                              <!-- BEGIN switch_vote -->
                              <a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="vote-down">
                                <i class="material-icons">remove_circle_outline</i>
                              </a>
                              <!-- END switch_vote -->

                                        <!-- BEGIN switch_bar -->
                                        <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                                            <div class="vote-bar-desc">
                                                {postrow.displayed.switch_vote_active.L_VOTE_TITLE}
                                            </div>

                                            <div class="vote-bars">
                                                <!-- BEGIN switch_vote_plus -->
                                                <div class="vote-bar-plus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                                                <!-- END switch_vote_plus -->

                                                <!-- BEGIN switch_vote_minus -->
                                                <div class="vote-bar-minus" style="width:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                                                <!-- END switch_vote_minus -->
                                            </div>
                                        </div>
                                        <!-- END switch_bar -->

                              <!-- BEGIN switch_no_bar -->
                              <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-bar-empty"></div>
                              <!-- END switch_no_bar -->
                          </div>
                          <!-- END switch_vote_active -->
                        </div>
                    </div>
                    <aside class="post-aside">
                        <div class="post-author-status"></div>
                        <div class="post-author">
                    <span class="post-author-name">
                        {postrow.displayed.POSTER_NAME}
                    </span>
                                    <span class="post-author-title">
                        {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                    </span>
                                </div>

                        <div class="post-author-avatar">
                                    <div class="avatar-big">
                                        {postrow.displayed.POSTER_AVATAR}
                                    </div>
                                </div>
                   
                                <dl class="post-author-details">
                                    <!-- BEGIN profile_field -->
                                    <dt>{postrow.displayed.profile_field.LABEL}</dt>
                                    <dd>{postrow.displayed.profile_field.CONTENT}</dd>
                                    <!-- END profile_field -->
                                </dl>
                                <div class="post-author-rpg">
                                    {postrow.displayed.POSTER_RPG}
                                </div>
                      <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">
                  <div class="ooكونان2000oo">الجوائز والأوسمة</div>
                  {postrow.displayed.AWARDS}
                  <br />
       
          </div>
          <div class="award_more"></div>
                        <br>
                                <div class="post-author-contact dropdown">
                                    <i class="material-icons">keyboard_arrow_down</i>
                                    <div class="dropdown-box">
                                        {postrow.displayed.PROFILE_IMG}
                                        {postrow.displayed.PM_IMG}
                                        {postrow.displayed.EMAIL_IMG}
                                        <!-- BEGIN contact_field -->
                                        {postrow.displayed.contact_field.CONTENT}
                                        <!-- END contact_field -->
                                    </div>
                                </div>
                            </aside>
                        </div>
                    </div>
                    <!-- END displayed -->

                    <!-- BEGIN hidden -->
                </div>
            </div>
        </div>
    </div>
    <!-- END hidden -->
    <!-- END postrow -->
     
   <!-- BEGIN promot_trafic -->
   <div class="block block-ptrafic" id="ptrafic_close" style="display: none;">
      <div class="block-header">
         <a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');">
            <i class="material-icons">add_circle</i>
         </a>
         <span>{PROMOT_TRAFIC_TITLE}</span>
      </div>
   </div>
   <div class="block block-ptrafic" id="ptrafic_open" style="display:'';">
      <div class="block-header">
         <a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');">
            <i class="material-icons">remove_circle</i>
         </a>
         <span>{PROMOT_TRAFIC_TITLE}</span>
      </div>
      <div class="block-content ptrafic">
         <!-- BEGIN link -->
         <a href="{promot_trafic.link.U_HREF}" title="{promot_trafic.link.TITLE}" >
            <i class="material-icons">chat_bubble</i>
                {promot_trafic.link.TITLE}
         </a><br />
         <!-- END link -->
      </div>
   </div>
   <!-- END promot_trafic -->
     
    <!-- BEGIN switch_forum_rules -->
    <div class="block" id="forum_rules">
        <div class="block-header">
            {L_FORUM_RULES}
        </div>
        <div class="block-content">
            <table class="postbody">
                <tr>
                    <!-- BEGIN switch_forum_rule_image -->
                    <td class="logo">
                        <img src="{RULE_IMG_URL}" alt="" />
                    </td>
                    <!-- END switch_forum_rule_image -->
                    <td class="rules content">
                        {RULE_MSG}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!-- END switch_forum_rules -->

    {INLINE_MESSAGE}

    {QUICK_REPLY_FORM}
 
 
  <script>
//<![CDATA[
        (function() {
            $(function() {
                if ($.sceditor && !$('#quick_reply').length) {
                    $('#smiley-box,#smileyContainer').remove();
                    $.sceditor.command.set('scSmileys', {
                        dropDown: function(editor, caller) {
                            if ($('.sceditor-scSmileys').length) {
                                var smileysCont = $('.sceditor-scSmileys');
                                if (smileysCont.css('display') === 'none') {
                                    editor.closeDropDown();
                                    smileysCont.css('display', '');
                                    $('.sceditor-scSmileys').css({
                                        "margin-top": caller.outerHeight(),
                                        "top": caller.offset().top,
                                        "left": caller.offset().left
                                    });
                                } else {
                                    editor.closeDropDown();
                                    smileysCont.css('display', 'none');
                                }
                            } else {
                                var content = $('<iframe id="quickEmojInternal" class="row1" name="smilies" width="220" scrolling="auto" height="250" frameborder="0" allowtransparency="true" src="/smilies?mode=smilies_frame" style="border: none;visibility: hidden">').load(function() {
                                    $(this).css("visibility", "visible")
                                });
                                $('<div class="sceditor-dropdown sceditor-scSmileys" style="margin-top:' + caller.outerHeight() + 'px;top:' + caller.offset().top + 'px;left:' + caller.offset().left + 'px;">').append(content).appendTo($('body')).click(function(e) {
                                    e.stopPropagation()
                                })
                            }
                        },
                        exec: function(caller) {
                            $.sceditor.command.get('scSmileys').dropDown(this, caller)
                        },
                        txtExec: function(caller) {
                            $.sceditor.command.get('scSmileys').dropDown(this, caller)
                        },
                        tooltip: 'الأبتسامات'
                    });
                    toolbar = toolbar.substr(0, toolbar.lastIndexOf("|")) + "|scSmileys" + toolbar.substr(toolbar.lastIndexOf("|"));
                    $(function() {
                        $(function() {
                            $('body,.sceditor-button:not(.sceditor-button-scSmileys)').click(function() {
                                if ($('.sceditor-scSmileys').css('display') !== 'none') $('.sceditor-scSmileys').css('display', 'none')
                            })
                        })
                    });
                }
            })
        }()); //]]>
</script>
  <link rel="stylesheet" href="https://illiweb.com/rs3/22/frm/SCEditor/src/themes/fa.rtl.default.min.css" type="text/css" media="all">
      <style type="text/css">
            .sceditor-button-flash div      { background-position: 0 -628px; }
            .sceditor-button-servimg div    { background-position: 0 -644px; }
            .sceditor-button-dailymotion div{ background-position: 0 -660px; }
            .sceditor-button-faspoiler div  { background-position: 0 -676px; }
            .sceditor-button-fahide div    { background-position: 0 -692px; }
            .sceditor-button-fascroll div  { background-position: 0 -708px; }
            .sceditor-button-faupdown div  { background-position: 0 -724px; }
            .sceditor-button-farand div    { background-position: 0 -756px; }
            .sceditor-button-faroll div    { background-position: 0 -772px; }
            .sceditor-button-more div      { background-position: 0 -788px; }
            .sceditor-button-emoticon div  { background-position: 0 -804px; }
            .sceditor-button-headers div    { background-position: 0 -820px; }
            .sceditor-button-twemojifa div    { background: url("https://2img.net/i/fa/icon_twemoji.png") !important; }
            .sceditor-twemojifa{width:220px;height:250px;overflow-y:auto;}.sceditor-twemojifa img{cursor:pointer;padding:3px;}.sceditor-twemojifa img:hover{opacity:.7;}
            .sceditor-button-mention div    { background: url("https://2img.net/i//fa/icon_at.png") !important; }
            #sceditor-mention-div        { max-height: 200px; overflow: auto; }
            .sceditor-mention-user        { padding: 0 3px; border-radius: 3px; height: 25px; line-height: 25px; margin: 0 0 8px 0; background-color: #fbfbfb; border: 1px solid #f3f3f3; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
            .sceditor-mention-user img      { height: 23px; margin: 0 4px; vertical-align: top; width: 23px; border-radius: 5px; background-color: #f5f5f5; border: 1px solid #ececec; overflow: hidden; object-fit:cover; }
            .sceditor-mention-user:hover    { background:#3793ff22;color: #000;cursor:pointer; }
            .sceditor-button-giphy div      { background-image: url("https://2img.net/i//fa/icon_gif.png") }
            .quick-reply-textarea-wrap #quick-reply-avatar { right: 15px; top: 50px; z-index: 10; }
        </style>
      <script type="text/javascript" src="https://illiweb.com/rs3/22/frm/jquery/cookie/jquery.cookie.js"></script>
      <script type="text/javascript" src="https://illiweb.com/rs3/22/frm/SCEditor/src/jquery.sceditor.js"></script>
      <script type="text/javascript" src="https://illiweb.com/rs3/22/frm/SCEditor/src/plugins/bbcode.js"></script>
      <script type="text/javascript" src="https://illiweb.com/rs3/22/frm/SCEditor/src/sceditor-commands.js"></script>
      <script type="text/javascript" src="https://illiweb.com/rs3/22/frm/SCEditor/src/sceditor-commands-bbcode.js"></script>
      <script type="text/javascript" src="https://illiweb.com/rs3/22/frm/SCEditor/src/sceditor-custom-bbcode.js"></script>
      <script type="text/javascript" charset="UTF-8">
                (function ($) {
                    'use strict';
             


                    $.sceditor.locale["ar"] = {
                        "Bold"                      : "خط عريض",
                        "Italic"                    : "خط مائل",
                        "Underline"                  : "خط في الأسفل",
                        "Strikethrough"              : "خط في المنتصف",

                        "Align left"                : "انحياز الى اليسار",
                        "Center"                    : "توسيط",
                        "Align right"                : "انحياز الى اليمين",
                        "Justify"                    : "ملأ السطر",

                        "Bullet list"                : "قائمة نُقطية",
                        "Numbered list"              : "قائمة رقمية",
                        "Insert a horizontal rule"  : "إدراج سطر أُفقي",

                        "Insert a Quote"            : "إدراج اقتباس",
                        "Code"                      : "إدراج أكواد برمجة",
                        "Spoiler"                    : "إخفاء الرد",
                        "Hidden"                    : "إخفاء مُقترن بالمساهمات",
                        "Insert a table"            : "إدراج جدول",

                        "Host an image"              : "رفع الصور",
                        "Insert an image"            : "إدراج صورة",
                        "Insert a GIF"              : "اختر ملف GIF",
                        "Insert an email"            : "إضافة بريد الكتروني",
                        "Insert a link"              : "إدراج رابط",
                        "Unlink"                    : "حذف الوصلة",
                        "Insert a YouTube video"    : "إدراج رابط فيديو من موقع Youtube",
                        "Insert a Dailymotion Video" : "إدخال رابط فيديو من موقع Dailymotion",
                        "Flash"                      : "إدراج رابط ملف فلاشي",

                        "Format Headers"            : "تنسيق العناوين",
                        "Font Size"                  : "حجم خط الكتابة",
                        "Font Color"                : "لون خط الكتابة",
                        "Font Name"                  : "نوع خط الكتابة",
                        "Remove Formatting"          : "إزالة تنسيق النص",
                 
                        "Mention a user"            : "وسم عضو",

                        "Subscript"                  : "حرف دليلي تحت السطر",
                        "Superscript"                : "حرف دليلي فوق السطر",

                        "Horizontal scrolling"      : "استعراض افقي",
                        "Vertical scrolling"        : "استعراض عمودي",
                        "Random"                    : "عشوائي",
                        "Dices roll"                : "رمي النرد (لعب الأدوار)",

                        "Insert an emoticon"        : "الوجوه الضاحكة",
                        "Insert current date"        : "تاريخ اليوم",
                        "Insert current time"        : "التوقيت الحالي",
                        "Paste Text"                : "إدراج نص بدون تنسيقه الأصلي",
                        "Switch Editor Mode"        : "تغيير نمط نافذة الإرسال",

                        "color_dark_red"    : "احمر قاتم",
                        "color_red"        : "احمر",
                        "color_orange"      : "برتقالي",
                        "color_brown"      : "بني",
                        "color_yellow"      : "اصفر",
                        "color_green"      : "اخضر",
                        "color_olive"      : "زيتوني",
                        "color_cyan"        : "ازرق سماوي",
                        "color_blue"        : "ازرق",
                        "color_dark_blue"  : "ازرق قاتم",
                        "color_indigo"      : "نيلي",
                        "color_violet"      : "بنفسجي",
                        "color_grey"        : "رمادي",
                        "color_white"      : "ابيض",
                        "color_black"      : "اسود",

                        "More"                      : "إظهار / إخفاء المزيد من الأزرار",
                        "Search"                                    : "بحـث",
                        "Insert"                                    : "إدراج",
                        "URL:"                                      : "رابط",
                        "Invalid YouTube video"                    : "يوجد هناك خطئ في الفيديو",
                        "Author (optional)"                        : "الكاتب (حقل غير إجباري)",
                        "Title (optional)"                          : "العنوان (حقل غير إجباري)",
                        "Cols:"                                    : "أعمدة",
                        "Rows:"                                    : "خطوط",
                        "Width (optional):"                        : "عرض (حقل اختياري)",
                        "Height (optional):"                        : "ارتفاع (حقل اختياري)",
                        "Description (optional):"                  : "وصف (حقل اختياري)",
                        "Paste your text inside the following box:" : "قم بلصق النص المنسوخ أسفله لحذف تنسيقه الأصلي",
                        "Border"                                    : "إطار",

                        "dateFormat": "month.day.year"
                    };
                })(jQuery);
</script>
      <script type="text/javascript">

            var plugins = '';
            var palette = 1;
            var illiweb = 'https://illiweb.com/';
            var locale = 'ar';
            var height = '450';
            var plugin = 'bbcode';
            var toolbar = 'bold,italic,underline,strike|left,center,right,justify|bulletlist,orderedlist,horizontalrule|quote,code,faspoiler,fahide,table|servimg,image,link,youtube,dailymotion|headers,size,color,Font Color,font,removeformat|more|subscript,superscript|fascroll,faupdown,farand|mention,emoticon,twemojifa,date,time,pastetext,source';
            var cssFile = 'https://illiweb.com/rs3/22/frm/SCEditor/minified/jquery.sceditor.default.min.css';
            var isRtl = 1;
            var dice = new Array();
            var bSourceMode = true;
            var quick_reply = '';
        </script>
  <script type="text/javascript" src="https://illiweb.com/rs3/22/frm/SCEditor/src/instance-sceditor.js"></script>
 
 
 
 
 
 
    <div class="topic-actions bottom">
        <div class="topic-actions-buttons">
            <!-- BEGIN switch_user_logged_in -->
            <!-- BEGIN watchtopic -->
            {S_WATCH_TOPIC}
            <!-- END watchtopic -->
            <!-- END switch_user_logged_in -->
        </div>
    </div>


<!-- BEGIN switch_user_logged_out -->
<div id="logged_out_reply" class="content-block">
  <h2 class="lor_maintitle">للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل</h2>
  <p class="lor_maindesc">يجب ان تعرف نفسك بتسجيل الدخول او بالاشتراك معنا للمشاركة</p>

  <div class="lor_row">
    <div class="lor_panel">
      <h3 class="lor_subtitle">التسجيل</h3>
      <p class="lor_subdesc">انضم الينا لن يستغرق منك الا ثوانى معدودة!</p>
      <br/>
      <a href="/register" class="button1">أنشئ حساب جديد</a>
    </div>

    <div class="lor_panel">
      <h3 class="lor_subtitle">تسجيل الدخول</h3>
      <p class="lor_subdesc">ليس لديك عضويه ؟ بضع ثوانى فقط لتسجيل حساب</p>
      <br/>
      <a href="/login" class="button1">تسجيل الدخول</a>
    </div>
  </div>
</div>
<!-- END switch_user_logged_out -->

    <!-- BEGIN topicpagination -->
    <div class="pagination">
        {PAGINATION}
    </div>
    <!-- END topicpagination -->

    {JUMPBOX}

    <!-- BEGIN viewtopic_bottom -->
    <form class="quickmod" method="get" action="{S_FORM_MOD_ACTION}">
        <input type="hidden" name="t" value="{TOPIC_ID}" />
        <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
        <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
        <label>
            <span>{L_MOD_TOOLS}:</span>
            <div class="quickmod-wrap">
                {S_SELECT_MOD}
                <input type="submit" value="{L_GO}" />
            </div>
        </label>
    </form>

    <div class="topic-admin">{S_TOPIC_ADMIN}</div>
    <!-- END viewtopic_bottom -->
 
 
 
 
 
 
 
 
 
<style>       
.ooكونان2000oo {
    background-color: #607d8b;
    border-radius: 3px 3px 0 0;
    color: #FFF;
    text-align: center;
    font-weight: 900;
      width: 100%; 
}
.dd_award {
    max-height: 150px;
width: 100%;
}
 .dd_award.left {
  margin-top: 11px;
    border: solid 1px #009688;
    padding: 0;
    background: white;
}
.dd_award + .award_more {
    background: white;
    width: 100%;
} 
 .post table, .post tr {
    width: 100% !important;
    border: none;
}   
 </style>

          <style type="text/css">
 
a.sceditor-button.sceditor-button-maxi {
    display: none;
}
 
          .tborder {
          background: #cccccc;
          width: 100%;
 
          /*border: 2px solid #666666;*/
        }
 
        .thead {
          background:  #efefef url(http://hitskin.com/themes/15/24/25/i_back_title.png) top left repeat-x;
          color: #ffffff;
        }
 
        .thead a:link {
          color: #ffffff;
          text-decoration: none;
        }
 
        .thead a:visited {
          color: #ffffff;
          text-decoration: none;
        }
 
        .thead a:hover, .thead a:active {
          color: #ffffff;
          text-decoration: underline;
        }
 
              .trow1 {
        background: #F5F5F5;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        }
 
        .trow2 {
        background: #F6F6F6;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        }
 
        -->
        </style>


<div class="ShareScreen">
<!-- social bookmarking links -->
<div class="IconShare">
<div class="fa fa-share-alt"></div>
</div>
<div class="ShareRight">العلامات المرجعية</div>
<div class="ShareList">
<ul style="list-style-type:none; margin:0px; padding:0px"><li class="smallfont" style="width:25%; min-width:160px; float:right; margin-top:6px">
   
      <a rel="nofollow" href="http://del.icio.us/post?url=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark"><img src="https://i.imgur.com/S7M4Jrg.png" border="0" alt="إرسال الموضوع إلى del.icio.us" class="inlineimg" title="إرسال الموضوع إلى del.icio.us"></a>
   
   <a rel="nofollow" href="http://del.icio.us/post?url=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark" style="text-decoration:none">del.icio.us</a>
</li><li class="smallfont" style="width:25%; min-width:160px; float:right; margin-top:6px">
   
      <a rel="nofollow" href="http://digg.com/submit?phrase=2&url=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark"><img src="https://i.imgur.com/2qD8a8V.png" border="0" alt="إرسال الموضوع إلى Digg" class="inlineimg" title="إرسال الموضوع إلى Digg"></a>
   
   <a rel="nofollow" href="http://digg.com/submit?phrase=2&url=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark" style="text-decoration:none">Digg</a>
</li><li class="smallfont" style="width:25%; min-width:160px; float:right; margin-top:6px">
   
      <a rel="nofollow" href="http://www.stumbleupon.com/submit?url=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark"><img src="https://i.imgur.com/8mPotnI.png" border="0" alt="إرسال الموضوع إلى StumbleUpon" class="inlineimg" title="إرسال الموضوع إلى StumbleUpon"></a>
   
   <a rel="nofollow" href="http://www.stumbleupon.com/submit?url=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark" style="text-decoration:none">StumbleUpon</a>
</li><li class="smallfont" style="width:25%; min-width:160px; float:right; margin-top:6px">
   
      <a rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark"><img src="https://i.imgur.com/Ft7i5Aa.png" border="0" alt="إرسال الموضوع إلى Google" class="inlineimg" title="إرسال الموضوع إلى Google"></a>
   
   <a rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark" style="text-decoration:none">Google</a>
</li><li class="smallfont" style="width:25%; min-width:160px; float:right; margin-top:6px">
   
      <a rel="nofollow" href="https://twitter.com/home?status=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark"><img src="https://i.imgur.com/FUQJCZV.png" border="0" alt="إرسال الموضوع إلى Twitter" class="inlineimg" title="إرسال الموضوع إلى Twitter"></a>
   
   <a rel="nofollow" href="https://twitter.com/home?status=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark" style="text-decoration:none">Twitter</a>
</li><li class="smallfont" style="width:25%; min-width:160px; float:right; margin-top:6px">
   
      <a rel="nofollow" href="https://www.facebook.com/sharer.php?u=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark"><img src="https://i.imgur.com/HgQHKD6.png" border="0" alt="إرسال الموضوع إلى Facebook" class="inlineimg" title="إرسال الموضوع إلى Facebook"></a>
   
   <a rel="nofollow" href="https://www.facebook.com/sharer.php?u=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark" style="text-decoration:none">Facebook</a>
</li><li class="smallfont" style="width:25%; min-width:160px; float:right; margin-top:6px">
   
      <a rel="nofollow" href="https://www.reddit.com/submit?url=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark"><img src="https://i.imgur.com/SF9SSZd.png" border="0" alt="إرسال الموضوع إلى Reddit" class="inlineimg" title="إرسال الموضوع إلى Reddit"></a>
   
   <a rel="nofollow" href="https://www.reddit.com/submit?url=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark" style="text-decoration:none">Reddit</a>
</li><li class="smallfont" style="width:25%; min-width:160px; float:right; margin-top:6px">
<a href="http://technorati.com/faves?add=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark"><img src="https://i.imgur.com/hSLLzs3.png" border="0" alt="إرسال الموضوع إلى Technorati" class="inlineimg" title="إرسال الموضوع إلى Technorati"></a>
<a href="http://technorati.com/faves?add=https://syria.forummo.com/topic-t{TOPIC_ID}.htm" target="socialbookmark" style="text-decoration:none">Technorati</a>
</li>
</ul></div></div>
<!-- social bookmarking links -->
 
  <!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
 

    <!-- BEGIN show_permissions -->
    <div class="block">
        <div class="block-header">
        <i class="material-icons">privacy_tip</i> {L_TABS_PERMISSIONS}
        </div>
        <div class="block-content">
            {S_AUTH_LIST}
        </div>
    </div>
    <!-- END show_permissions -->

    <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}" rel="nofollow" {S_POST_REPLY_TOPIC} class="btn-fixed" title="{L_POST_REPLY_TOPIC}">
        <i class="material-icons">{I_POST_REPLY_TOPIC}</i>
      <span class="btn-fixed-txt">{L_POST_REPLY_TOPIC}</span>
  </a>
    <!-- END switch_user_authreply -->
</main>

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        $('.post-author-contact').each(function () {
            $(this).find('a:nth-child(5n)').each(function () {
                $(this).after('<br />');
            });
        });
    });
    //]]>
</script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/railscasts.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
    $(document).ready(function() {
        $('pre, code').each(function(i, block) {
            hljs.highlightBlock(block);
        });

        $('.post-author-contact').on('click', function() {
            if ($(this).parents('.post-body').css('flex-direction') == 'row') {
                $(this).children('.dropdown-box').css({
                    'left': 'auto',
                    'right': '0'
                });
            } else {
                $(this).children('.dropdown-box').css({
                    'left': '0',
                    'right': 'auto'
                });
            }
        });
    });
</script>

كونان2000 كتب:اهلا جرب الجافا التالي مكان السابق

الكود:

(function() {
  window.fa_img_resizer = {
    max_width: 400, // maximum image width (400px)
    max_height: 250, // maximum image height (250px)

    selector: '.post-content > div:not(.user):not(.postprofile):not(.post-signature) img, .mod_news img, .message-text img', // where images should be resized

    options: {
      bar: true, // resized image options bar
      toggler: true, // Enlarge / Reduce Image
      full_size: true, // Show full size
      download: true, // Download image link
      lightbox: true // lightbox effect
    },

    // texts
    lang: {
      full_size: '<i class="fa fa-external-link"></i> العرض بحجم كامل',
      enlarge: '<i class="fa fa-search-plus"></i> تكبير الصورة',
      reduce: '<i class="fa fa-search-minus"></i> تصغير الصورة',
      download: '<i class="fa fa-download"></i> تحميل الصورة',
      tooltip: 'إضغط للعرض بالحجم الكامل'
    },

    // resize all images inside the "resizeIn" elements
    resize: function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';

          // make the image a "link" if it's not wrapped with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;

            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }

          // create the resize bar
          if (fa_img_resizer.options.bar) {
            const resizerDiv = document.createElement('div'); // إنشاء عنصر جديد

            resizerDiv.className = 'fa_img_resizer';
            resizerDiv.style.width = fa_img_resizer.max_width + 'px'; // تطبيق العرض الأقصى على شريط الخيارات
            resizerDiv.innerHTML =
              (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '') +
              (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '') +
              (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '');

            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentElement('beforebegin', resizerDiv);
          }
        }
      }
    },

    // toggle between enlarged and reduced image sizes
    toggle: function(that) {
      var img = that.parentNode.nextSibling;

      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }

      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }

      that.parentNode.style.width = img.width - 8 + 'px';
    },

    // lightbox effect
    lightbox: function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];

      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;

      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';

      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },

    // kill the lightbox
    kill_lightbox: function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');

      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };

  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );

  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);

  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());

الكتابة اصبحت مظبوطة لكن مازال لايظهر فوق الصور بشكل صحيح

ملاحظة هذا كود ايموجي صورة العضو الذي قمت بتعديله منذ قليل قد تكون المشكله ان الكود لاينتهي بصيغة صورة ؟ كPNG والخ؟ لكن كيف كود التصغير والتكبير يعمل ويظهر عند وجودها ولكن لايتم جعلها فوق الصورة ؟

لكن لا في حتى صور png اخرى لاتظهر فوقهم

كونان2000 كتب:اهلا جرب التالي مكان السابق

الكود:

(function() {
  window.fa_img_resizer = {
    max_width: 400, // maximum image width (400px)
    max_height: 250, // maximum image height (250px)

    selector: '.post-content > div:not(.user):not(.postprofile):not(.post-signature) img, .mod_news img, .message-text img', // where images should be resized

    options: {
      bar: true, // resized image options bar
      toggler: true, // Enlarge / Reduce Image
      full_size: true, // Show full size
      download: true, // Download image link
      lightbox: true // lightbox effect
    },

    // texts
    lang: {
      full_size: '<i class="fa fa-external-link"></i> العرض بحجم كامل',
      enlarge: '<i class="fa fa-search-plus"></i> تكبير الصورة',
      reduce: '<i class="fa fa-search-minus"></i> تصغير الصورة',
      download: '<i class="fa fa-download"></i> تحميل الصورة',
      tooltip: 'إضغط للعرض بالحجم الكامل'
    },

    // resize all images inside the "resizeIn" elements
    resize: function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';

          // make the image a "link" if it's not wrapped with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;

            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }

          // create the resize bar
          if (fa_img_resizer.options.bar) {
            const resizerDiv = document.createElement('div'); // إنشاء عنصر جديد

            resizerDiv.className = 'fa_img_resizer';
            resizerDiv.style.width = fa_img_resizer.max_width + 'px'; // تطبيق العرض الأقصى على شريط الخيارات
            resizerDiv.innerHTML =
              (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '') +
              (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '') +
              (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '');

            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentElement('beforebegin', resizerDiv);
          }
        }
      }
    },

    // toggle between enlarged and reduced image sizes
    toggle: function(that) {
      var img = that.parentNode.nextSibling;

      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }

      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }

      that.parentNode.style.width = img.width - 8 + 'px';
    },

    // lightbox effect
    lightbox: function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];

      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;

      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';

      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },

    // kill the lightbox
    kill_lightbox: function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');

      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };

  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { style="display: flex;font-size: 16px;line-height: normal;flex-direction: column;align-items: center; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );

  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);

  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());

مازال لايظهر اعلى الصور
وايضا لاحظت انه عندما اضغط تكبير الصورة الكود يرجع يخرب الكتابه فيه

ملاحظة اخرى الآن في الكود الاخير حتى الخلفية البيضاء التي تظهر فيها تكبير وتصغير الصورة اختفت !

لاحظت ان تكبير وتصغير الصورة تصبح في المنتصف اذا قمت بوضع كود

الكود:

[center][/center]

اثناء انشاء الموضوع او الرد

قد تكون المشكله في css انها توسط الكتابات والصور في المواضيع فقط ولاتقوم بتوسيط كود تحجيم الصور

هذا كود توسيط المساهمات الذي استخدمه قد تكون المشكله فيه

الكود:

.content{
    text-align: center;
}

كونان2000 كتب:نعم هذا بسبب توسيط المساهمات من الcss

جرب التالي

الكود:

.fa_img_resizer {
    width: auto !important;
}

اصبحت الكتابة تظهر في اليسار

تم الحل لكن لماذا الكود يظهر في الصور الصغيرة ولايقوم بتكبيرها ولاتصغيرها ؟
انظر هنا اخي كونان
هل يمكنك جعل الكود يكبر الصور الصغيرة ويصغر الصور الكبيرة؟

بالاضافة ان الكود غير ملائم مع نسخة الجوال
قبل الضغط على تكبير الصورة تظهر الصورة كبيرة

وبعد الضغط على تكبير الصورة تظهر الصورة بحجم جيد

معلش اخي كونان تعبتك معايا استحملني

كونان2000 كتب:اهلا
جرب الجفا التالي

الكود:

(function() {
  window.fa_img_resizer = {
    max_width: 400, // maximum image width (400px)
    max_height: 250, // maximum image height (250px)

    selector: '.post-content > div:not(.user):not(.postprofile):not(.post-signature) img, .mod_news img, .message-text img', // where images should be resized

    options: {
      bar: true, // resized image options bar
      toggler: true, // Enlarge / Reduce Image
      full_size: true, // Show full size
      download: true, // Download image link
      lightbox: true // lightbox effect
    },

    // texts
    lang: {
      full_size: '<i class="fa fa-external-link"></i> العرض بحجم كامل',
      enlarge: '<i class="fa fa-search-plus"></i> تكبير الصورة',
      reduce: '<i class="fa fa-search-minus"></i> تصغير الصورة',
      download: '<i class="fa fa-download"></i> تحميل الصورة',
      tooltip: 'إضغط للعرض بالحجم الكامل'
    },

    // resize all images inside the "resizeIn" elements
    resize: function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';

          // make the image a "link" if it's not wrapped with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;

            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }

          // create the resize bar
          if (fa_img_resizer.options.bar) {
            const resizerDiv = document.createElement('div'); // إنشاء عنصر جديد

            resizerDiv.className = 'fa_img_resizer';
            resizerDiv.style.width = fa_img_resizer.max_width + 'px'; // تطبيق العرض الأقصى على شريط الخيارات
            resizerDiv.innerHTML =
              (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '') +
              (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '') +
              (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '');

            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentElement('beforebegin', resizerDiv);
          }
        }
      }
    },

    // toggle between enlarged and reduced image sizes
    toggle: function(that) {
      var img = that.parentNode.nextSibling;

      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }

      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }

      that.parentNode.style.width = img.width - 8 + 'px';
    },

    // lightbox effect
    lightbox: function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];

      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;

      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';

      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },

    // kill the lightbox
    kill_lightbox: function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');

      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };

  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { style="display: flex;font-size: 16px;line-height: normal;flex-direction: column;align-items: center; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100% !important; max-width:100% !important; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );

  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);

  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());

لم يتغير شيء بالعكس اختفت الخلفية البيضاء التي تظهر خلف تكبير والعرض بحجم كامل وتحميل الصورة

كونان2000 كتب:قبل التعديل الجافا

عندك كود مثل التالي في الcss

الكود:

.emotiuser_icon {
    width: 45px !important;
    height: 45px !important;
    vertical-align: middle;
    margin: 3px;
}

لازم تغيره للتالي

الكود:

.emotiuser_icon {
    width: 45px;
    height: 45px;
    vertical-align: middle;
    margin: 3px;
}

قمت بفعل ذلك ومازال لايعمل وكما قلت الخلفية البيضاء الخاصة بتكبير الصورة وتصغيرها اختفت اصلا في اخر كود قمت بارساله ومازالت مشكلة حجم الصور في نسخة الهاتف

لقد اصبح الكود متوافقاً مع نسخة الجوال لكنه ايضا يظهر في كل مكان كما ترى اخي كونان :)