[Thùng rác] Resize ảnh trong Topic

Code: Resize Image In Topic
By: Kirigaya Kazuto
Source: Reference Duelacademy
Demo: [Only admins are allowed to see this image]

APC >> Modules >> HTML & JAVASCRIPT >> Javascript codes management: Tạo 1 JS mới
Title: Resize Image In Topic
Placement: In The Topic
Javascript code:

Code:

$(window).load(function(){
      $('.post img').each(function(){
         if($(this).width() > 750 || $(this).height() > 1000) {
            var regex = new RegExp(window.location.origin + '\/','i'), target = regex.test($(this).attr('src')) ? '_self' : '_blank';
            $(this).css({'max-width':750,'max-height':1000});
            $(this).before("<div class='resized_img' style='padding:5px;background:#ddd;max-width:740px;'><a href='/viewimage.forum?u="+$(this).attr('src')+"' alt='Nhấp để xem kích thước gốc' target='"+target+"'>Nhấp để xem kích thước gốc của hình</a></div>");
         }
      });
});

P/s: Trong đoạn Js trên tìmL

Code:

if($(this).width() > 750 || $(this).height() > 1000) {

Code:

$(this).css({'max-width':750,'max-height':1000});

Trong đó: 750 là kích thước chiều rộng tối đa của ảnh
1000 là chiều cao tối đa của ảnh

- Kirigaya Kazuto -

Nguồn: [Only admins are allowed to see this link]

Gắn load vào window không sai, nhưng nó sẽ bị ảnh hưởng bởi các ảnh không nằm trong bài viết, các iframe, video (nếu có).
Tốt nhất là gắn load vào từng ảnh.
Selector nên đặt là .postbody img hoặc .post-entry img để code đỡ tốn thời gian duyệt qua avatar, và các icon ngoài bài viết.
Dòng code thứ 4 có thể bỏ đi cũng được, vì fm hầu hết là dùng ảnh từ host ngoài.

Nhìn chung code không có đột phá so với chức năng resize mặc định của fm: Lúc vừa tải trang, ảnh vẫn ko được resize, khi ảnh tải xong thì code làm ảnh resize đột ngột, nếu bài viết dài nhiều ảnh thì việc bỗng dưng bị cuộn trang sẽ khá khó chịu.

Có thể nâng cấp mod này bằng cách dùng kết hợp CSS max-width và max-height, lúc này em không thể dùng hàm width() và height() để lấy kích thước ảnh, vì nó đã bị ảnh hưởng bởi CSS, mà phải lấy thông qua naturalWidth và naturalHeight

Code:

$("img")[0].naturalWidth;
$("img")[0].naturalHeight;

Hạn chế của code trên là không dùng được ở trình duyệt cũ như IE7,8
Vì thế hãy dùng plugin này: [Only admins are allowed to see this link]

chả thấy gì.....