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

2 مشترك

صفحة 1 من اصل 2 1, 2  الصفحة التالية

اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 21:26

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

هذا الكود يقوم باعادة تحجيم الصور
الكود:
(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;
    };
  }
}());


عدل سابقا من قبل المبدع الخبير في الثلاثاء 22 أكتوبر 2024 - 21:58 عدل 1 مرات
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الإثنين 21 أكتوبر 2024 - 21:40

اهلا
جرب هذا
الكود:
(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 - 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
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 21:43

كونان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;
    };
  }
}());
اهلا اخي كونان الكود خرب المواضيع صارت تظهر في الجنب اليمين وتخرج من مكان الموضوع Sad
مشكله في كود اعادة تحجيم الصور Pirate20
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الإثنين 21 أكتوبر 2024 - 21:45

اعتذر Embarassed
رجع الكود السابق

وضع قالب مواضيع منتداك
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

ابوعلي البلقاوي يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 21:51

تفضل اخي كونان هذا الكود من تصميمك مع بعض التعديلات
الكود طويل لهذا سأقوم بارساله على مرتين
النصف الاول
الكود:
<!-- 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 -->
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 21:51

النصف الثاني
الكود:
                                    <!-- 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>
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الإثنين 21 أكتوبر 2024 - 22:05

اهلا جرب الجافا التالي مكان السابق
الكود:
(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;
    };
  }
}());
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:11

كونان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;
    };
  }
}());
الكتابة اصبحت مظبوطة لكن مازال لايظهر فوق الصور بشكل صحيح
مشكله في كود اعادة تحجيم الصور Pirate21
ملاحظة هذا كود ايموجي صورة العضو الذي قمت بتعديله منذ قليل قد تكون المشكله ان الكود لاينتهي بصيغة صورة ؟ كPNG والخ؟ لكن كيف كود التصغير والتكبير يعمل ويظهر عند وجودها ولكن لايتم جعلها فوق الصورة ؟
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:12

لكن لا في حتى صور png اخرى لاتظهر فوقهم Like a Star @ heaven
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الإثنين 21 أكتوبر 2024 - 22:15

اهلا جرب التالي مكان السابق
الكود:
(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;
    };
  }
}());
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

المبدع الخبير يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:19

كونان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;
    };
  }
}());
مازال لايظهر اعلى الصور
وايضا لاحظت انه عندما اضغط تكبير الصورة الكود يرجع يخرب الكتابه فيه
مشكله في كود اعادة تحجيم الصور Pirate22
ملاحظة اخرى الآن في الكود الاخير حتى الخلفية البيضاء التي تظهر فيها تكبير وتصغير الصورة اختفت ! I love you
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:28

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

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

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:30

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

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:33

هذا كود توسيط المساهمات الذي استخدمه قد تكون المشكله فيه
الكود:
.content{
    text-align: center;
}
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

المبدع الخبير يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الإثنين 21 أكتوبر 2024 - 22:34

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

جرب التالي
الكود:
.fa_img_resizer {
    width: auto !important;
}
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

المبدع الخبير يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:36

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

جرب التالي
الكود:
.fa_img_resizer {
    width: auto !important;
}
اصبحت الكتابة تظهر في اليسار
مشكله في كود اعادة تحجيم الصور Pirate23
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الإثنين 21 أكتوبر 2024 - 22:37

اضف التالي الى الcss
الكود:
.fa_img_resizer {
    text-align: center !important;
}
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

المبدع الخبير يعجبه هذا الموضوع

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:40

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

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 22:50

بالاضافة ان الكود غير ملائم مع نسخة الجوال
قبل الضغط على تكبير الصورة تظهر الصورة كبيرة
مشكله في كود اعادة تحجيم الصور Pirate24
وبعد الضغط على تكبير الصورة تظهر الصورة بحجم جيد
مشكله في كود اعادة تحجيم الصور Pirate25
معلش اخي كونان تعبتك معايا استحملني clown alien :تحية مع الشكر:
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الإثنين 21 أكتوبر 2024 - 23:15

اهلا
جرب الجفا التالي
الكود:
(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
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الإثنين 21 أكتوبر 2024 - 23:28

كونان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;
    };
  }
}());
لم يتغير شيء بالعكس اختفت الخلفية البيضاء التي تظهر خلف تكبير والعرض بحجم كامل وتحميل الصورة
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الثلاثاء 22 أكتوبر 2024 - 17:40

قبل التعديل الجافا

عندك كود مثل التالي في ال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;
}
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الثلاثاء 22 أكتوبر 2024 - 20:34

كونان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;
}
قمت بفعل ذلك ومازال لايعمل وكما قلت الخلفية البيضاء الخاصة بتكبير الصورة وتصغيرها اختفت اصلا في اخر كود قمت بارساله ومازالت مشكلة حجم الصور في نسخة الهاتف
المبدع الخبير
المبدع الخبير
 
 

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف كونان2000 الثلاثاء 22 أكتوبر 2024 - 20:49

جرب الجافا مكان السابق
الكود:
(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, img[src*="https://"]', // 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) {
          const imgWidth = a[i].naturalWidth || a[i].width;
          const imgHeight = a[i].naturalHeight || a[i].height;

          if (imgWidth > fa_img_resizer.max_width || imgHeight > 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="' + 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,.emotiuser_icon { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { width: fit-content !important;border: solid 1px #bbbbbb; background: #dddddd;font-size: 16px;line-height: normal;}'+
      '.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
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1771
معدل النشاط : 3681
السُمعة : 332

https://anime.forumperso.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف المبدع الخبير الثلاثاء 22 أكتوبر 2024 - 20:53

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

ذكر
عدد المساهمات : 210
معدل النشاط : 1635
السُمعة : 1

https://pirates-revo.forummo.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

صفحة 1 من اصل 2 1, 2  الصفحة التالية

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى