الرئيسيةالرئيسية  اليوميةاليومية  س .و .جس .و .ج  بحـثبحـث  المجموعاتالمجموعات  التسجيلالتسجيل  دخول  



قالب viewtopic_body ملائم لجميع الاستايلات من برمجة وتطوير احلى موضوع
ازرار اضافية في المحرر لأدراج ملاحظات وتحذيرات والمزيد حصرياً على منتديات احلى موضوع
تكاثر البلبل في القفص من الالف الى الياء
استايل ترايدنت الحالي الاحترافي 2016 مجانا للجميع
استايل هيلبرنت لاحلى منتدى كامل بالتومبيلات
تحميل ستيل الابداع العربى مجانا بروابط جديدة
حصرياً التعديل على قوالب علبة الدردشة تومبيلات وهي مخفية في منتداك
أضافة زر حذف الرابط في الصندوق الماسي لأحلى منتدى
استايل حفر الباطن تومبيلات متعدد الالوان
الخميس يوليو 27, 2017 11:04 pm
الأحد يوليو 23, 2017 11:41 pm
الإثنين يوليو 17, 2017 1:49 pm
السبت يوليو 08, 2017 4:12 am
السبت يوليو 08, 2017 4:12 am
السبت أبريل 01, 2017 1:33 pm
الجمعة ديسمبر 23, 2016 12:12 pm
الجمعة ديسمبر 23, 2016 12:10 pm
الجمعة نوفمبر 04, 2016 8:06 pm
محمود السيد
ahmed halim
ADEL
ahmed halim
ahmed halim
عبدالله الوكيل
Mc Nabulsy
Mc Nabulsy
shvr hgrg,f



منتديات احلى موضوع :: تطوير منتديات احلى منتدى :: تقنيات احلى منتدىشاطر | 

 

 مصغر الصور المحدث في المساهمات

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
رسالة
مُساهمةموضوع: مصغر الصور المحدث في المساهمات    الأربعاء أغسطس 17, 2016 8:15 pm

avatar
Scorpion
الاشراف العام
المشاركات : 28
نقاط : 54
تاريخ التسجيل : 17/08/2016
الإجابات المقدمة: 1
الأربعاء أغسطس 17, 2016 8:15 pm
المشاركة 1
نشاط Scorpion
  • قوة السمعة :
  • الإعجاب:
    مُساهمةموضوع: مصغر الصور المحدث في المساهمات
    مصغر الصور المحدث في المساهمات
    الكود يقوم بتصغير الصور في المساهمات بشكل جديد ومحدث وبشكل تقنية css

    ومميزات السكريبت الجديد

    1 - زر تصغير الصورة اذا كانت كبيرة
    2 - زر تكبير الصورة اذا كانت مصغره

    3 - زر مشاهدة الصورة بالجحم الأصلي وليس بنافذة جديدة منبثقة ::جديد::
     4- زر تحميل الصورة ::جديد::



    مثال للسكريبت







    تركيب الكود

    لوحة الادارة - عناصر اضافية -    إدارة أكواد Javascript 
    اضف هذا الكود وليكن في جميع الصفحات


    الكود:
    (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> Show full size',
            enlarge : '<i class="fa fa-search-plus"></i> Enlarge image',
            reduce : '<i class="fa fa-search-minus"></i> Reduce image',
          download : '<i class="fa fa-download"></i> Download image',
          tooltip : 'Click to view full image'
        },
     
        // 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 -  + '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;
        };
      }
    }());



    السكريبت انتج بواسطة Ange Tuteur
     تم الترجمة والتنسيق من قبلي !


    الرجوع الى أعلى الصفحة اذهب الى الأسفل
    مُساهمةموضوع: رد: مصغر الصور المحدث في المساهمات    الثلاثاء أغسطس 30, 2016 11:19 am

    alzagri
    عضو جديد
    المشاركات : 38
    نقاط : 42
    تاريخ التسجيل : 15/08/2016
    الإجابات المقدمة: 1
    الثلاثاء أغسطس 30, 2016 11:19 am
    المشاركة 2
    نشاط alzagri
  • قوة السمعة :
  • الإعجاب:
    مُساهمةموضوع: رد: مصغر الصور المحدث في المساهمات
    ماشاءالله

    احترررررررررررررررافي

    الرجوع الى أعلى الصفحة اذهب الى الأسفل
     
    مصغر الصور المحدث في المساهمات
    استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
    صفحة 1 من اصل 1

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

    الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 20:53.
    المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
    فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
    التعليقات المنشورة لا تعبر عن رأي منتدى احلى موضوع ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

    •  
    •  
    •  
    •  
    جميع الحقوق محفوظة AHLAMAWDO 2015
    • 00966920020037
    • 00966138648289
    • 2051033691
    Powered by AHLMAWDO.COM® Version 3.8.7 .Copyright ©2000 - 2016, Jelsoft Enterprises Ltd
    SEO by vBSEO ©2011, Crawlability, Inc.
    تحويل وتطوير وليد رمضان مؤسس شبكة أحلى موضوع