Thêm hiệu ứng lightbox cho Ghost siêu đơn giản với Fluidbox

Cách đơn giản để thêm hiệu ứng lightbox cho ảnh, vừa nhanh vừa đẹp.

Cường Trần
Cường Trần
3 phút đọc

Hầu hết các theme chính thức miễn phí của Ghost đều không có hiệu ứng lightbox, trong khi lightbox sẽ hỗ trợ rất nhiều cho nội dung bài viết của bạn, đặc biệt là các blog về chụp ảnh hay hướng dẫn.

Nếu dùng WordPress bạn khó có thể tìm thấy một plugin lighbox hoạt động chuẩn, nhưng bạn lại dễ dàng thêm tính năng này vào Ghost với chỉ vài dòng code.

Thêm tính năng lightbox cho ảnh bằng Fluidbox

Có nhiều lựa chọn khác ngoài Fluidbox, nhưng thêm Fluidbox script vào Ghost là đơn giản nhất nhất.

Bạn không cần code nhiều, chỉ dán vào và tự động có lightbox dùng.

Bạn dán code sau vào Ghost Footer

<script async src="https://cdn.jsdelivr.net/gh/Torqu3Wr3nch/[email protected]/fluidbox-ghost-blog-plugin.min.js"></script>
<script>
    window.fluidboxGhostConfig = {
      theme: 'image-backdrop', // Options: light, dark, image-backdrop, hsla(262, 100%, 82%, 0.6)
      showCaption: true, // Sets whether to capture the caption and show it below the image when expanded
    }
</script>
Thêm hiệu ứng lightbox cho ghost
Thêm hiệu ứng lightbox cho ghost

Bạn có một số tuỳ chỉnh như tắt/mở caption và theme dark /light /image-backdrop /màu tuỳ biến. (Xem ví dụ bên mục dưới)

Xong, bạn đã có lightbox cho theme rồi đấy. Quá tuyệt vời!

Demo hiệu ứng lightbox của Fluidbox

Fluidbox hoạt động khá mượt mà, bạn hãy xem các hình ảnh bên dưới bao gồm ảnh Gallery, Bookmark và ảnh đơn.

Tôi đã thay thế Fluidbox cho ghostFam vì hiệu ứng cũ không ngon bằng (bạn phải tắt lightbox trước khi thêm Fluidbox trong theme).

Click vào ảnh để thấy hiệu ứng lightbox cho ảnh đơn
Click vào ảnh để thấy hiệu ứng lightbox cho ảnh đơn
SEO website Ghost hiệu quả hơn bằng cách “chặn Google index”
Chặn Google lập chỉ mục index một số trang không cần thiết sẽ giúp bạn SEO website hiệu quả hơn.
Bookmark hoạt động bình thường với lightbox (không lỗi khi click vào ảnh)

Một số điểm mạnh của Fluidbox

  1. Tự động ẩn khi cuộn chuột xuống (rất là tự nhiên, rất ngon).
  2. Hỗ trợ cả ảnh Gallery (một số lightbox trong theme khác thì chỉ tạo hiệu ứng cho ảnh đơn).
  3. Hiển thị caption của ảnh (ngon).
  4. Hỗ trợ dùng bàn phím với các nút mũi tên (tiện cho bạn khi đang xem Gallery và dùng phím để xem ảnh).
  5. Hiệu ứng mượt mà.
  6. Dùng được trên cả điện thoại.

Lời kết...

Với hiệu ứng lightbox bạn sẽ đem lại trải nghiệm người xem tốt hơn cho những blog hướng dẫn như ghostFam.

Không có nghĩa là lightbox nên bật cho mọi blog, tránh tình trạng tải thêm script làm nặng site của bạn.

Chúc bạn vui với tips nhỏ nhẹ này😋

Hướng Dẫn

Bạn có thể quan tâm

Viết bài trên Google Docs, xuất bản trên Ghost

Hướng dẫn cách viết blog trên Google Docs và xuất bản trên Ghost CMS.

Viết bài trên Google Docs, xuất bản trên Ghost

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Cáchtạo hiệu ứng lightbox cho video Youtube đơn giản bằng Fanyapps cho Ghost.

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Hướng dẫn thêm bình luận Giscus vào Ghost

Cách thêm bình luận Giscus vào Ghost, thêm lựa chọn hệ thống bình luận cho người dùng Ghost.

Hướng dẫn thêm bình luận Giscus vào Ghost
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.

bởi @CườngTrần