أرشيف انكور
موضوع بعنوان :تحكم بحجم الصورة تقنية جديدة
الكاتب :Admin


4254219950 
قبل تكبير الصورة
46510
https://i.servimg.com/u/f58/15/34/86/24/46510.gif
-
بعد تكبير الصورة
46610
https://i.servimg.com/u/f58/15/34/86/24/46610.gif
-
بعد الضغط على الصورة
46710
https://i.servimg.com/u/f58/15/34/86/24/46710.gif
 
3434259910 
 
توجه الى لوحة الادارة --> عناصر اضافية -->  HTML و JAVAs c r i p t --> إدارة أكواد Javas c r i p t
واضف الكود التالي
العنوان :- التحكم بحجم الصور
المكان :- جميع الصفحات
  
(function() {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t544-image-resizer#8305';
         
          window.fa_img_resizer = {
            max_width : 400, // maximum image width (400px)
            max_height : 250, // maximum image height (250px)
         
            selector : '.postbody > div:not(.user):not(.postprofile) 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].alt && (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;
            };
          }
        }());

 
يرجى ذكر المصدر عند النقل
شركة انكور التطويرية
بالتوفيق للجميع
والسلام ختام