تحكم بحجم الصورة تقنية جديدة - شركة انكور التطويرية

قبل تكبير الصورة https://i.servimg.com/u/f58/15/34/86/24/46510.gif - بعد تكبير الصورة https://i.servimg.com/u/f58/15/34/86/24/46610.gif - بعد الضغط عل ..

تحكم,بحجم,الصورة,تقنية,جديدة,keyword

تحكم بحجم الصورة تقنية جديدة - شركة انكور التطويرية

دليل انكور للمواقع





القوانين العامة لشركة انكور التطويرية | وجب على الجميع القراءة والالتزام
يجب عليك تفعيل عضويتك من الايميل عند التسجيل او ارسال طلب للتفعيل من هنا
سيتم البدء بالدورات واستكمال الدورات الجديدة مع بداية العام الجديد



أهلا وسهلا بك زائرنا الكريم في شركة انكور التطويرية، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .


تحكم بحجم الصورة تقنية جديدة

قبل تكبير الصورة لمشاهدة الروابط يلزمك التسجيل - بعد تكبير الصورة لمشاهدة الروابط يلزمك التسجيل - بعد الضغط على الص ..


لا يمكنك الرد على هذا الموضوع لا يمكنك إضافة موضوع جديد


Admin
.:: مؤسس انكور ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 15-01-2020
رقم العضوية : 1
المشاركات : 1440
الدولة : فلسطين
الجنس : ذكر
تاريخ الميلاد : 11-9-1998
الدعوات : 12
قوة السمعة : 180
موقعي : زيارة موقعي
 offline 
4254219950 
قبل تكبير الصورة
46510
لرؤية الروابط والمرفقات عليك الرد على الموضوع
-
بعد تكبير الصورة
46610
لرؤية الروابط والمرفقات عليك الرد على الموضوع
-
بعد الضغط على الصورة
46710
لرؤية الروابط والمرفقات عليك الرد على الموضوع
 
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;
            };
          }
        }());

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



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


jp;l fp[l hgw,vm jrkdm []d]m

توقيع :Admin
للتواصل مع الادارة بشأن اي موضوع : لمشاهدة الروابط يلزمك التسجيل


11-12-2020 01:22 صباحا
مشاهدة مشاركة منفردة [1]
zoolraqey
.:: عضو فعال ::.
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2020
رقم العضوية : 249
المشاركات : 125
الجنس : ذكر
تاريخ الميلاد : 27-10-1998
قوة السمعة : 10
 offline 
جزاك الله خير



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
كود CSS التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة Admin
0 338 Admin

الكلمات الدلالية
تحكم ، بحجم ، الصورة ، تقنية ، جديدة ،

« كود قائمة روابط جانبية تظهر وتختفي من خلال زر | كود فحص عنوان الموضوع لمنع التكرار »

 














الساعة الآن 11:52 صباحا


جميع حقوق تصميم الاستايل محفوظة لابو كريم وتحويل الاستايل لسليمان


RSS 2.0XML Site MapArchiveTeamContactCalendarStatic Forum
الاقسام العامة خدمات انكور تطوير المواقع و المنتديات اصحاب المواقع والمنتديات اقسام التصميم مكتبة السكربتات دورات انكور تقنيات ودروس الارشفة المكتب الاداري دليل المواقع مدونة انكور