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

تذكير بمساهمة فاتح الموضوع :

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

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


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

الكود:

(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;
    };
  }
}());

اخي كونان لماذا لاتقوم بتجربته على منتدى من نسخة awesome قبل ان ترسله لي لأنه اذا قمت بتجربة كل كود ترسله سوف ناخذ الكثير من الوقت حتى نصل لنتيجة جيدة

المبدع الخبير كتب:اخي كونان لماذا لاتقوم بتجربته على منتدى من نسخة awesome قبل ان ترسله لي لأنه اذا قمت بتجربة كل كود ترسله سوف ناخذ الكثير من الوقت حتى نصل لنتيجة جيدة

اهلا 
والله انا لا اضع كود حتى اقوم بتجربته على منتدى تجريبي
ولكن منتداك مليان اكود جافا و css منها يضع قيود على بعض الوظائف

وكذلك انت تضعه في جميع الصفحات

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

الكود:

(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,.post-content 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 {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 كتب:

المبدع الخبير كتب:اخي كونان لماذا لاتقوم بتجربته على منتدى من نسخة awesome قبل ان ترسله لي لأنه اذا قمت بتجربة كل كود ترسله سوف ناخذ الكثير من الوقت حتى نصل لنتيجة جيدة

اهلا 
والله انا لا اضع كود حتى اقوم بتجربته على منتدى تجريبي
ولكن منتداك مليان اكود جافا و css منها يضع قيود على بعض الوظائف

وكذلك انت تضعه في جميع الصفحات

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

الكود:

(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,.post-content 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 {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;
    };
  }
}());

الكود مازال لايعمل بشكل صحيح خلاص اخي كونان اشكرك لم اعد اريد الكود

المبدع الخبير كتب:الكود مازال لايعمل بشكل صحيح خلاص اخي كونان اشكرك لم اعد اريد الكود

العفو اخي
واعتذر لك لاني لم استطع مساعدتك كما كنت تريد 

تم حل المشكلة & ينقل للأرشيف. يرجى مراجعة : قوانين منتدى الدعم