Trang chủ
Blogspot Tips

Cách Thêm Hiệu Ứng Popup Lightbox Cho Blog Đơn Giản

Tạo hiệu ứng popup lightbox cho ảnh bài viết trên Blogger
Vũ Văn Hoàn

Nếu bạn đã quá nhàm chán với Hiệu ứng Lightbox (Hộp đèn) mặc định trong Blogger, có lẽ bạn nên thử sử dụng qua Fancybox vì suy cho cùng nếu bạn có sử dụng Lightbox mặc định thì trang của bạn vẫn phải tải thư viện CSS và JS mặc định của Blogger. Với lại nếu đem so sánh thì Fancybox3 có ưu điểm vượt trội hơn rất nhiều.

Hãy thử hình dung khi nhấp chuột vào một ảnh bất kỳ có trong bài viết sẽ hiển thị lên Hộp đèn tuyệt vời như ảnh minh họa bên dưới với nút chạy slide tự động, nút hiển thị tất cả các ảnh kế bên và chọn ảnh muốn xem.

Vậy Lightbox (Hộp đèn) là gì? Giải thích ngắn gọn nó là một thư viện JavaScript hiển thị hình ảnh và video bằng cách lấp đầy màn hình và làm mờ phần còn lại của trang web.

Tại sao bạn nên sử dụng Fancybox cho blog của mình? Đó là vì nó đã quá nổi tiếng và quen thuộc và rất nhiều trang web với các nền tảng sử dụng. Hơn tất cả là vì nó dễ dử dụng không phải cấu hình nhiều chỉ cần chèn thư viện CSS và JavaScript của Fancybox. Không làm ảnh nhiều hưởng đến tốc độ tải trang và vỡ bố cục trang web của bạn vì cơ chế khi bạn click vào ảnh thì thẻ body mới được thêm class của Fancybox để hiện thị Lightbox.

Ngoài ảnh ra Fancybox còn hỗ trợ cho video, iframe rất thích hợp cho các blog có chủ đề về ảnh, video hay ebook.

Các bước thực hiện

Với tình hình hiện nay, là số người sử dụng Template Median UI khá nhiều, nhưng có một bất cập đó là khi nhấn vào hình ảnh trong bài viết thì Template này sẽ điều hướng thẳng tới hình ảnh. Vì vậy mình sẽ hướng dẫn các bạn cách thêm hiệu ứng Lightbox cho Template Median UI.

Đối với Template Median UI

  • Bước 1: Các bạn đăng nhập vào Blogger.com
  • Bước 2: Các bạn chọn chỉnh sửa HTML và dán đoạn mã dưới đây trước thẻ </body>
    •   <!-- Lightbox with Fancybox3 -->
<b:if cond='data:view.isSingleItem'>
  <link href='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css' rel='stylesheet'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
  <script src='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js'/>
  <script>//<![CDATA[
    $('.postEntry img').each(function() {
      var img_link = $(this).attr('src')
      $(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')
    })
    $('.tr-caption-container').each(function() {
      var caption = $(this).find('.tr-caption').text()
      $(this).find('a').attr('data-caption',caption)
    })
  //]]></script>
</b:if>
<!-- Lightbox with Fancybox3 -->
  • Bước 3: Các bạn nhấn Lưu và tận hưởng thành quả nào!

Chú ý!
.postEntry các bạn thay cho đúng với template của mình nhé

Đối với các bạn sử dụng Tempalte Median UI, nếu như không được thì cần cài đặt lại chế độ Hộp đèn hình ảnh, nếu đang bật thì tắt đi, nếu đang tắt thì bật lên. Mình có hai blog, mà một cái thì tắt lại được, một cái bật thì mới được. Các bạn chú ý!

Đối với các bạn sử dụng Template khác có thể sử dụng đoạn mã dưới đây

<!-- Lightbox with Fancybox3 -->
<b:if cond='data:view.isSingleItem'>
  <link href='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css' rel='stylesheet'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
  <script src='https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js'/>
  <script>//<![CDATA[
    $('.post-body img').each(function() {
      var img_link = $(this).attr('src')
      $(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')
    })
    $('.tr-caption-container').each(function() {
      var caption = $(this).find('.tr-caption').text()
      $(this).find('a').attr('data-caption',caption)
    })
  //]]></script>
</b:if>
<!-- Lightbox with Fancybox3 -->

Lời kết

Vừa rồi, iTeamOS đã Giới thiệu về Thêm Hiệu ứng Lightbox cho Blogspot. Nếu như có bất kì thắc mắc nào vui lòng comment bên dưới để được giải đáp nhé. Hy vọng bài viết này có ích với bạn, chúc bạn luôn thành công!

Đăng nhận xét