Đưa Skin mới vào diễn đàn sử dụng ! Nếu quá trình sử dụng diễn đàn xảy ra lỗi, xin vui lòng liên hệ Admin để báo lỗi ! Cảm ơn !

You are not connected. Please login or register

[Javascript] Image Resizer

  • Please log in to post a topic
  • huyhoang1997

    huyhoang1997

    Group: Moderagerator

    Hiện đang:
    Bài viết : 670
    Points : 896
    Birthday : 14/06/1997
    Thanks : 64
    Đến từ : Ninh Thuận

    Moderagerator
    Xem lý lịch thành viên

    Moderagerator
    Bài viết thứ :1

    Đăng vào:on 28/6/2016, 14:54

    Moderagerator

    Demo:


    Hướng dẫn:

    1. Tạo 1 trang javascript mới 
    - Title: Image Resizer
    - Placement: In all the pages
    - Codes:
    Code:
    (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), 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;
        };
      }
    }());
    Nguồn: FMDesign

    #1 - Posted on 28/6/2016, 14:54
    Xem lý lịch thành viên

    Đang kiểm tra dữ liệu...

    Bạn phải điền đầy đủ thông tin đăng ký.

    Số ký tự phải từ 3 trở lên
    Hãy chọn tài khoản khác
    Có thể dùng tài khoản này
    Không sử dụng địa chỉ này
    E-mail sẽ được kiểm sau
    Số ký tự phải từ 3 trở lên
    Trùng tên đăng nhập
    Chưa đúng
    Chính xác

    Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | www.sosblogs.com
    YOUR BANNER HERE
    728x90