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

2 مشترك

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

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

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

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

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

المشكله هي ان الكود يظهر بشكل خاطئ يعني لايظهر فوق الصورة في بعض الاحيان وحجمه يظهر صغيراً بحيث الكتابة تكون متقسمة بشكل غبي
صور لتوضيح المشاكل
مشكلة الكتابة تكون مقسمة بشكل غبي في الصور الصغيرة (واصلا لماذا الكود يظهر في الصور الصغيرة؟)
مشكله في كود اعادة تحجيم الصور - صفحة 2 Pirate18
مشكلة ان الكود لايظهر فوق الصور بشكل صحيح
مشكله في كود اعادة تحجيم الصور - صفحة 2 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 مرات
المبدع الخبير
المبدع الخبير
 
 

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

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

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


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

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

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

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

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

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

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

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

المبدع الخبير كتب:اخي كونان لماذا لاتقوم بتجربته على منتدى من نسخة awesome قبل ان ترسله لي لأنه اذا قمت بتجربة كل كود ترسله سوف ناخذ الكثير من الوقت حتى نصل لنتيجة جيدة Like a Star @ heaven
اهلا 
والله انا لا اضع كود حتى اقوم بتجربته على منتدى تجريبي
ولكن منتداك مليان اكود جافا و 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
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1721
معدل النشاط : 3551
السُمعة : 303

https://anime.forumperso.com/

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

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

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

كونان2000 كتب:
المبدع الخبير كتب:اخي كونان لماذا لاتقوم بتجربته على منتدى من نسخة awesome قبل ان ترسله لي لأنه اذا قمت بتجربة كل كود ترسله سوف ناخذ الكثير من الوقت حتى نصل لنتيجة جيدة Like a Star @ heaven
اهلا 
والله انا لا اضع كود حتى اقوم بتجربته على منتدى تجريبي
ولكن منتداك مليان اكود جافا و 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;
    };
  }
}());
الكود مازال لايعمل بشكل صحيح خلاص اخي كونان اشكرك لم اعد اريد الكود clown tongue
المبدع الخبير
المبدع الخبير
 
 

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

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

كونان2000 يعجبه هذا الموضوع

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

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

مُساهمة من طرف كونان2000 الأربعاء 23 أكتوبر 2024 - 8:03

المبدع الخبير كتب:الكود مازال لايعمل بشكل صحيح خلاص اخي كونان اشكرك لم اعد اريد الكود clown tongue
العفو اخي
واعتذر لك لاني لم استطع مساعدتك كما كنت تريد  cyclops

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

ذكر
عدد المساهمات : 1721
معدل النشاط : 3551
السُمعة : 303

https://anime.forumperso.com/

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

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

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

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

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

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