Thứ Năm, 11 tháng 10, 2012

Tạo hiệu ứng phóng to ảnh với Lightbox Evolution

Khuyến cáo: " Nêu sao lưu lại Blog
Bước 1: Cài đặt cho Blog
Bạn vào Mẫu chọn chỉnh sửa HTML, nhấn Ctrl+F tìm thẻ <head> sau đó chèn đoạn code sau vào bên dưới thẻ <head>

Mách nhỏ:
"Các bạn có thể down 2 file .js và up lên Host riêng của mình để thay thế cho 2 link ở dòng 25 màu đỏ trong Code, giống như làm chủ công nghệ ấy mà để tránh trường hợp nó bị mất Link thì lại khổ nữa ^^. Nếu các bạn thấy rối thì cứ dùng Link mặc định của mình, đảm bảo ko bao giờ bị die."
Link Down

Bước 2: Cài đặt cho Link hình và Video
1. Sử dụng cho hình ảnh:
Thêm thẻ class="lightbox" ngay thẻ sau link hình ngay thẻ <a href="link ảnh"
<a href="Link ảnh" class="lightbox"><img width="100" height="100" src="Link ảnh" alt=""/></a>
2. Sử dụng cho Video từ Youtube, Vimeo Video, Dailymotion Video, Google Video,Twitvid Video:
Cũng tương tự như link Hình
<a href="http://www.youtube.com/watch?v=7eg-SUv7JTg" class="lightbox">Youtube Video</a>
 Hình DEMO:
3. Sử dụng cho Ifame:
<a href="http://tynisoft.blogspot.com/?hl=en&tab=nw&lightbox[iframe]=true&lightbox[width]=970&lightbox[height]=560" class="lightbox">tynisoft.blogspot</a>

Lưu ý: Đối với Blog sử dụng nhiều Jquery thì ứng dụng này sẽ không hiển thị được. Điển hình là Blog mình đang sử dụng 2 Jquery là Chatbox và mục Share dạng trượt nên Ứng dụng này xem như bị vô hiệu quá ở Blog mình. Nên mình chỉ DEMO hình và Video qua hình ảnh thôi mong các bạn thông cảm. ^^! 

Chúc các bạn thành công !!!



Bài viết liên quan

2 Nhận Xét