Từ Lightbox đến Slimbox
Như đã nhắc đến trong bài viết Blog và những thứ thừa thãi, sau khi nhận thấy thư viện prototype.js được include 2 lần trong thẻ <head>, tớ đóng cửa blog và tu sửa lại toàn bộ. Plugin to bự Lightbox đã được thay bằng một plugin nhẹ hơn hẳn dựa trên mootools - Slimbox . Về cơ bản, Slimbox tạo hiệu ứng không khác gì Lightbox, nhưng có một điểm rất bất tiện: Nếu như với Lightbox tớ chỉ việc activate plugin và không phải sửa sang gì trong nội dung các bài viết thì ở Slimbox, mặc định tớ cần phải thêm attribute rel=”lightbox” vào tất cả các link muốn áp dụng hiệu ứng.
May mắn là điều này có thể được khắc phục chỉ bằng cách sửa đổi vài dòng code trong file slimbox.js đi kèm plugin. Cụ thể:
Dòng 21:
if (el.rel && el.rel.test(/^lightbox/i)){
sửa thành:
if (el.href.match(/\.(png|jpe?g|gif)$/i)) {
Tiếp đến là dòng 58:
if (link.rel.length == 8) return this.show(link.href, link.title);
sửa thành:
if (!link.rel) return this.show(link.href, link.title);
Khi đó Slimbox đã có thể tự nhận biết đâu là ảnh mà thêm hiệu ứng cho hợp lý. Ổn hơn hẳn.
Nếu ngại sửa code thủ công, bạn có thể down luôn file slimbox.js của tớ tại URL: http://onetruebrace.com/blog/wp-content/plugins/slimbox/slimbox.js
Bài viết được gửi hôm 04.03.08 · Mang các từ khóa code, lightbox, slimbox, wordpress
Bài viết liên quan:
nuphero gửi hôm 14.05.08 lúc 10:07 am #
Chào bạn, cái file .js của bạn đúng là giúp ích khá nhiều , đỡ phải add rel=”lightbox” vào các link ảnh. Tuy nhiên xin hỏi bạn thêm 1 vấn đề là làm thế nào để resize ảnh theo 1 kích cỡ chung mong muốn ( tui có xem trong list plugin của bạn nhưng hình như ko có cái nào dùng để thực hiện việc đó )
Mong sớm nhận hồi âm
QAD gửi hôm 14.05.08 lúc 7:29 pm #
@nuphero: WP 2.5 cho bạn chỉnh kích thước ảnh sẽ resize, bạn xem thêm phần Settings ấy.
Etj gửi hôm 30.06.08 lúc 7:51 pm #
hình như trong bản 1.2 tác giả cũng cho phép tự động chèn link vào bằng cách xoá comments từ dòng 19 đến dòng 22 của file slimbox.php