الرئيسيةالرئيسية  أحدث الصورأحدث الصور  التسجيلالتسجيل  دخول  





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

 

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

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

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

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

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

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



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

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





    تركيب الكود

    لوحة الادارة - عناصر اضافية -    إدارة أكواد 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
     تم الترجمة والتنسيق من قبلي !


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

    avatar
    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.
    تحويل وتطوير وليد رمضان مؤسس شبكة أحلى موضوع