Lightbox thay thế mặc định cho blogspot

Số là không quan tâm tới cái lightbox này làm gì đâu, do mặc định của blogspot khá đẹp và ổn áp rồi. Tại google ngáo đá hay gì đó nên cái lightbox của nó bị lỗi mất cái hình thu nhỏ nằm ngang phía dưới ấy, tưởng nó chỉnh sửa nhưng sau hai ngày bị ngáo đá thì cũng trở lại bình thường. 😥

Và trong 2 ngày đó mình đã tìm kiếm mấy cái lightbox trên mạng để thay thế, may mắn là chỉ vài đường link đã tìm được cái lightbox này khá đẹp và trông hiện đại. Mới lần đầu dùng thử là đã mê con mẹ nó lun, nên bài viết này mình sẽ share lại cái code này cho nhiều người biết hơn.

Tại sao share lại? Đơn giản là do mình thấy code này có chỉ 2 trang share mà vấn đề là, người ta dẫn link thư viện về trang gốc của họ, điều này làm mình khá lo lắng bởi, nếu như họ xoá mấy file đó thì bên mình cũng bị ảnh hưởng theo. Và sau 2 ngày nghiên cứu và tìm hiểu thì cuối cùng cũng đã có giải pháp thay thế. Hãy đọc hết bài viết này để biết thêm chi tiết nhé, dưới đây là code Lightbox thay thế mặc định cho blogspot.

Ưu điểm của code ⇩

➜ Giao diện đẹp mắt và hiện đại
➜ Có phóng to, thu nhỏ
➜ Nhiều hiệu ứng chuyển ảnh tha hồ lựa chọn
➜ Có nút tải ảnh
➜ Chức năng trình chiếu tự động và xem toàn màn hình

Demo + Hướng dẫn cài đặt và sử dụng, chọt vào hình bất kỳ trong bài viết ở demo để test lightbox ⇩

Demo Lightbox thay thế mặc định cho blogspot

Bước 1: Vào cài đặt blog kéo xuống phần hộp đèn hình ảnh, nếu nó đang bật như trong hình dưới thì hãy tắt nó đi nhé.

Nếu đang bật thì cho nó bay màu để tránh xung đột với code mới này.

Bước 2: Chủ đề > Tùy chỉnh > Chỉnh sửa HTML > Thêm đoạn JavaScript dưới đây vào trước thẻ đóng </body> và lưu lại.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script>//<![CDATA[
  function loadCSS(filename,filetype){
    if(filetype=='css'){
      var fileref=document.createElement('link')
      fileref.setAttribute('rel','stylesheet')
      fileref.setAttribute('href',filename)
    }
    if(typeof fileref!='undefined'){document.getElementsByTagName('head')[0].appendChild(fileref)}
  }
  $(function(){
    if($('.separator a,.tr-caption-container a').length!=''){
      $('.separator a,.tr-caption-container a').each(function(){
        $(this).attr('href',$(this).attr('href')+'?dl=1')
      })
      $('.tr-caption-container a').each(function(){
        $(this).attr('data-sub-html',$(this).parents('.tr-caption-container').find('.tr-caption').text())
      })
      var is_load=0
      function loadpl(){
        if(is_load==0){
          is_load=1
          loadCSS('https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.min.css','css')
          loadCSS('https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-transitions.min.css','css')
          $.getScript('https://www.dl.dropboxusercontent.com/scl/fi/6bnv20tlgeib33ibg580w/Lightbox.js?rlkey=ltn453exxwun7sko3444fkuo9&dl=0').done(function(){
            $('.post-body').lightGallery({
              selector: '.separator a,.tr-caption-container a',
              thumbnail:true,
              showThumbByDefault: false,
              subHtmlSelectorRelative: true,
              mode: 'lg-zoom-out'
            })
          })
        }
      }
      $(window).scroll(function(){loadpl()})
      $(window).mousemove(function(){loadpl()})
      setTimeout(function(){loadpl()},3000)
    }
  })
//]]></script>

Đã xong, chỉ có thế thôi. Giờ bạn hãy test ngay và luôn nào. À nếu template bạn đã có cái đoạn màu xanh kia rồi thì hãy xóa nó đi nhé, nếu không sẽ gây một vài lỗi khiến bố cục blog bạn bị ngáo đá đó. Mới đầu dùng code chưa xóa cái dòng đó, thế là thanh bên phải blog mình bị ngáo đá liền. 😁😁😁

Bây giờ, nói về cách giải quyết mà mình nói phần mở đầu nào.

Ở 2/3 dòng trong code trên có màu đỏ, mình đã trực tiếp lấy link thư viện từ https://cdnjs.com/ để tránh tình trạng độc quyền như 2 trang đã share kia, kiểu bên họ mà xóa thì cái code cũng bị lỗi.

Còn ở đoạn thứ 3, do không tìm được phiên bản giống cái họ share nên mình đã lụm của họ về và lưu vĩnh viễn trên thư viện Archive, với cách này thì bạn có thể tự làm nếu biết code chút đỉnh. Nói chung, bạn không cần phải lo về vấn đề sợ bị xóa từ bên share nữa.

Cuối cùng, sau đây là cách thay đổi hiệu ứng chuyển ảnh ở dòng có màu hồng.

Bạn chỉ việc chọn các hiệu ứng ở link trang mình để dưới này.

Change transition: https://www.lightgalleryjs.com/demos/transitions/

Nó nằm ở chỗ như trên ảnh nhé.

Một mẹo liên quan, nếu bạn muốn có dòng mô tả ảnh thì làm theo cách trong hình dưới đây.

Xong rồi nhé, nếu có chỗ nào thắc mắc hay khó hiểu, hãy cmt bên dưới để được giải đáp sớm nhất có thể. 😁

Hashtag: Lightbox thay thế mặc định cho blogspot

Blogger Chitose2D Code hay tiện ích

• Facebook
• Pinterest

Liên quan gần đây

Code hay tiện ích