Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 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 [free tuts .net]
- 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.
