Trong quá trình xây dựng website, đặc biệt là các trang tin tức, blog, phim ảnh, game hoặc nội dung cộng đồng, việc hiển thị hình ảnh nhạy cảm, spoiler hoặc nội dung 18+ có thể gây khó chịu cho người dùng.
LNP Blur Image With Class được phát triển để giải quyết vấn đề này bằng cách:
- Tự động làm mờ ảnh theo class chỉ định
- Hiển thị cảnh báo trước khi xem nội dung
- Yêu cầu người dùng xác nhận trước khi mở ảnh
Nhờ đó, website vừa đảm bảo trải nghiệm người dùng, vừa kiểm soát được nội dung hiển thị một cách chuyên nghiệp.
Tính năng nổi bật
Sản phẩm mang đến nhiều tính năng mạnh mẽ:
- Tự động blur ảnh theo class được cấu hình sẵn
- Hiển thị lớp phủ cảnh báo trực quan trên hình ảnh
- Popup xác nhận trước khi xem ảnh
- Tích hợp SweetAlert2 với giao diện hiện đại
- Tương thích Blogger và WordPress
- Hỗ trợ nội dung tải động bằng AJAX, Infinite Scroll
- Tự động vô hiệu hóa Lightbox trước khi xác nhận
- Dễ dàng tùy chỉnh toàn bộ nội dung hiển thị
Cách hoạt động
Hệ thống hoạt động hoàn toàn tự động theo quy trình:
- Website tải trang và quét các ảnh có class được chỉ định
- Ảnh sẽ được tự động làm mờ bằng hiệu ứng blur
- Một lớp cảnh báo sẽ được hiển thị trên ảnh
- Khi người dùng click vào ảnh:
- Popup xác nhận xuất hiện
- Nếu đồng ý → ảnh hiển thị bình thường
- Nếu từ chối → ảnh vẫn bị làm mờ
Cài đặt
Bạn chỉ cần:
- Sao chép toàn bộ CSS và JavaScript vào website
- Với Blogger: chèn vào phần giao diện hoặc trước thẻ
</body> - Với WordPress: dùng plugin Header Footer hoặc chèn vào theme
