Hướng dẫn làm hiệu ứng fancybox với Ghost blog

Khi lướt web, đặc biệt là các trang web chứa nhiều hình ảnh, các bạn sẽ thấy khi click vào 1 bức ảnh bất kì, bức ảnh đó sẽ được phóng to ra trên nền đen. Hiệu ứng này khá bắt mắt và có tên là lightbox (hay fancybox). Tuy nhiên, theme mặc định của Ghost không hỗ hiệu ứng này. Khi các bạn chèn 1 bức ảnh vào bài blog, bước ảnh hoàn toàn tĩnh, không có tương tác với người đọc. Ví dụ như ảnh sau:

Đặc biệt đối với những bức ảnh có chi tiết nhỏ cần chú ý thì việc phải mở riêng bức ảnh trong 1 tab mới hoặc lưu về để xem là một trải nghiệm rất tồi đối với độc giả của bạn. Thay vào đó, bạn có thể làm nó tự động phóng to một cách mượt mà như sau:

Bước 1: Mở Ghost Admin và chọn mục Code injection:

Điều đoạn code sau vào theo mẫu:

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />


<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>

Đối với mỗi bức ảnh trong bài blog, thay vì chèn ảnh theo cách thông thường, các bạn hãy lấy link ảnh đưa vào bài blog dưới dạng mã HTML như sau:

<a data-fancybox="gallery" href="image_1.jpg"><img src="image_1.jpg"></a>

Và kết quả:

Tuy có mất công một chút khi chèn ảnh nhưng kết quả hoàn toàn xứng đáng. Chúc các bạn thành công!

Show Comments

Get the latest posts delivered right to your inbox.