Hiển thị popup hình ảnh trong nội dung bài viết

Có một số website có chức năng khi bạn click vào hình ảnh của bài viết đó thì nó sẽ phóng to hình ảnh lên, chức năng này khá hay và đơn giản nhưng nhiều bạn không biết làm nên mình viết một bài hướng dẫn cho bạn nào có nhu cầu đọc.

1. Ý tưởng gán Popup vào hình ảnh

Nhiều bạn nghĩ rằng để làm được chức năng này thì lúc thêm hình ảnh trong Editor (có thể là ckeditor hay bất kì editor nào khác) ta phải thêm một class nào đó để nhận diện, điều này khá hay và đó chính là ý tưởng để bắt đầu thực hiện đấy.

Tuy nhiên nếu bạn muốn khi click vào bất kì một hình ảnh nào trong phần nội dung đó đều hiển thị popup thì bạn không cần phải thêm class cho hình ảnh lúc đăng bài làm gì mà thay vào đó ta sẽ lấy hết hình ảnh và gán Popup.

Nhưng có một vấn đề là làm thế nào để hiệu ứng không lây lan ra các phần khác như sidebar, footer? Ta sẽ sử dụng một thẻ div bao quanh phần nội dung bìa viết lại để làm mốc. Như vậy cấu trúc của nó sẽ có dạng như sau:

<!-- PHẦN Ở TRÊN -->
<div id="post-content">
    <?php echo $content; ?>
</div>
<!-- PHẦN Ở DƯỚI -->

Vậy làm thế nào để thêm Popup vào hình ảnh? Ta sẽ thực hiện các bước như sau:

Bài viết này được đăng tại [kiso.vn]

• Bước 1: Chọn một Plugin Popup nào đó, mình chọn Fancybox Plugin.
• Bước 2: Lấy danh sách hình ảnh
• Bước 3: Lặp từng hình ảnh và Gán Fancybox vào

2. Hiển thị popup hình ảnh trong nội dung bài viết

Như mình phân tích ở trên ta sẽ thực hiện các bước như sau:

Bước 1: Download Fancybox Plugin và jQuery

Bạn vào trang chủ Fancybox và download plugin này về, sau đó vào file ví dụ để xem cách sử dụng nhé.

Bước 2: Viết Javascript hiển thị Popup

$(document).ready(function ()
{
    $("#post-content img").fancybox();
});

Còn nếu bạn muốn chỉ gán Popup cho hình ảnh có class nào đó thôi thì sử dụng cú pháp sau:

$(document).ready(function ()
{
    $("#post-content img.class-name").fancybox();
});

Vì Fancybox dễ sử dụng nên ta không cần phải lặp qua từng hình ảnh nên nếu bạn sử dụng một Plugin khác thì có thể sẽ phải mất thêm công đoạn lặp nữa.

3. Lời kết

Bài này khá đơn giản nhưng nhiều bạn mới học sẽ không biết nên mình viết bài này để hỗ trợ các bạn., hy vọng sẽ có ích.

Quan trọng nhất của lập trình đó là phân tích ý tưởng cho từng chức năng, cách tiếp cận xử lý bài toán nhanh thì tương lai bạn sẽ trở thành một lập trình viên giỏi là điều chắc chắn.