[Javascript] Hiển thị hình ảnh chủ đề cho phiên bản mobile

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Chủ đề [Javascript] Hiển thị hình ảnh chủ đề cho phiên bản mobile

Bài gửi by HelpsFMvi on Sun Mar 13, 2016 3:06 pm


Demo:

[You must be registered and logged in to see this image.]

Hướng dẫn:

- Vào Administration Control Panel (ACP) > Display > Colors > CSS stylesheet

Quăng cái này vào css:
Code:
.mobile_image { max-width:99% }
#mpage-body .postbody > .content > div { overflow:hidden }

- Tạo 1 javascript với
+ Title: Cài đặt hình ảnh mobile
+ Placement: In all the pages

Code:
$(function() {
  var mode = 0;
  /* -- Mode Options -- */
  // 0 : Shows all images by default
  // 1 : Shows images only when clicked
 
  if (!_userdata.page_desktop) return;
 
  var a = document.getElementsByTagName('A'), i = 0, j = a.length,
      showImage = function() {
        if (/img_link/.test(this.className)) {
          this.onclick = null;
          this.removeAttribute('class');
          this.innerHTML = '<img class="mobile_image" src="' + this.href + '" alt="' + this.innerHTML + '" />';
          return false;
        }
      };
 
  for (; i < j; i++) {
    if (/img_link/.test(a[i].className)) {
    
      switch (mode) {
        case 0 :
          a[i].removeAttribute('class');
          a[i].innerHTML = '<img class="mobile_image" src="' + a[i].href + '" alt="' + a[i].innerHTML + '" />';
          break;
        
        case 1 :
          a[i].onclick = showImage;
          break;
        
        default :
          a[i].onclick = showImage;
          break;
      }
    
    }
  }
});

Khuyến cáo sử dụng code:
Các bạn nên chỉnh sửa như sau để khi load bằng mobile được nhẹ nhàng hơn mà không phải chờ load ảnh:
Demo:
[You must be registered and logged in to see this image.]

Các bạn tìm trong javascript trên:
Code:
mode = 0
nó cho phép hình ảnh hiển thị trực tiếp khi các bạn truy cập vào trang
nên chỉnh thành:
Code:
mode = 1
nó giúp các bạn làm gọn hình ảnh phiên bản mobile lại các bạn click vào thì hình ảnh mới xuất hiện

Chúc các bạn thành công !

[You must be registered and logged in to see this image.]

avatar
HelpsFMvi
Ban Quản Trị FMvi
Ban Quản Trị FMvi


Số bài : 102
HelpsPoints : 3120
Likes : 31
Ngày tham gia : 10/03/2016
Trạng thái :
Online
Offline

Tuổi : 20
Location : Ninh Thuận
Google Chrome
Phpbb3

[Click để xem tài sản HelpsFMvi]

Xem lý lịch thành viên http://helps.forumvi.com

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Free blog
Stylish responsive footer | Script Tutorials