[Update đã cũ] bbcode - hiệu ứng Lightbox trên ảnh

19/12/2010, 11:06 am Message reputation : 0% (1 vote)

Cập nhật chức năng xem ảnh bằng Lightbox.
Cộng thêm nút bbcode hỗ trợ nhập ảnh trên form.
Đọc kĩ hướng dẫn dưới đây để biết cách sử dụng

(thiết kế cái khung này với viết script mất cả buổi ngày hôm qua )

Light box có tác dụng gì ? - Hãy click vào ảnh dưới đây - chờ 4s để chuyển ảnh

Lightbox cho phép xem hình ảnh trên 1 khung nổi, xem nhiều hình ảnh theo dạng slideshow với hiệu ứng chuyển ảnh khá mượt.
(có rất nhiều plugin lightbox - ở đây mình sử dụng colorbox - tiện thể lúc làm thông điệp yêu thương)
Vị trí nút Lightbox

Các thành phần cơ bản trong form nhập ảnh
Mặc định trong form chỉ có 2 textbox nhập link ảnh và nội dung hiển thị, nút THÊM ẢNH để thêm nhiều textbox vào.
nút XÁC LẬP LẠI trả về form nguyên mẫu.

Lightbox trên link ảnh đơn thuần.
Ví dụ ta có những link ảnh thế này

Code:: http://i337.photobucket.com/albums/n395/kalenv1/gs08/P1020906.jpg http://i337.photobucket.com/albums/n395/kalenv1/gs08/P1020909.jpg http://i337.photobucket.com/albums/n395/kalenv1/gs08/P1020935.jpg http://i337.photobucket.com/albums/n395/kalenv1/gs08/P1020941.jpg http://i337.photobucket.com/albums/n395/kalenv1/gs08/P1020944.jpg http://i337.photobucket.com/albums/n395/kalenv1/gs08/P1020955.jpg

Để áp dụng lightbox cho những link này. Bạn quét chọn và click vào nút COLORBOX WITH LINKs (xem ảnh)

[Update đã cũ] bbcode - hiệu ứng Lightbox trên ảnh Link10

kết quả - Click vào link

https://2img.net/h/i337.photobucket.com/albums/n395/kalenv1/gs08/P1020906.jpg
https://2img.net/h/i337.photobucket.com/albums/n395/kalenv1/gs08/P1020909.jpg
https://2img.net/h/i337.photobucket.com/albums/n395/kalenv1/gs08/P1020935.jpg
https://2img.net/h/i337.photobucket.com/albums/n395/kalenv1/gs08/P1020941.jpg
https://2img.net/h/i337.photobucket.com/albums/n395/kalenv1/gs08/P1020944.jpg
https://2img.net/h/i337.photobucket.com/albums/n395/kalenv1/gs08/P1020955.jpg

Sử dụng form nhập ảnh
Có 2 textbox: Phần nhập link ảnh () và nhập Nội dung hiển thị ()
- Phần nhập link:
  Link ảnh phải là link trực tiếp, bắt đầu bằng http.... và sử dụng 1 trong những định dạng (.png, .jpg, .gif, .bmp, .tif)
  Nếu link ảnh sai khi ĐỒNG Ý sẽ không hiển thị trong khung viết bài.
- Phần nhập Nội dung hiển thị : Có 3 lựa chọn
  1. Nhập text - Trong bài viết sẽ hiển thị nội dung được nhập ở
    
    Kết quả - (click vào nội dung bên dưới)
    Nội dung hiển thị
  2. Nhập link ảnh - Trong bài viết sẽ hiển thị ảnh đã nhập ở ô - khi click sẽ hiện lightbox ảnh ở ô
    
    kết quả (click vào ảnh dưới)
  3. Bỏ trống - Trong bài viết sẽ hiển thị chính ảnh mà bạn nhập ở - để tiện lợi hơn - không cần nhập lại cùng 1 link ảnh ở cả 2 ô và
    
    kết quả (click vào ảnh dưới)

Chú ý :

Nút chỉ hiện thị trong chế độ (xem tại đây)
Chỉ hỗ trợ các định dạng ảnh .jpg, .gif, .png, .bmp, .tif
Mỗi [table] sẽ là 1 nhóm lightbox - các ảnh trong cùng 1 table sẽ được chuyển đổi như dạng slideshow. [table] khác nhau là một nhóm khác nhau.
Chúc vui !

Việt K

Tại sao không cài đặt Lightbox tự động trên ảnh mà phải dùng bbcode ?

Plugin Colorbox không được thiết kế riêng cho ảnh mà chỉ sử dụng được trên link ảnh. Bù lại plugin này có thể sử dụng được ajax, html, link youtube ... do tiện thể lúc trước lấy nó làm Thông điệp yêu thương nên tận dụng luôn.
Mình cũng không đặt lightbox tự động trên link, mà thành viên phải sử dụng bbcode thông qua nút "Lightbox" trên thanh công cụ - vì mình thích chủ động hơn trong việc đặt hiệu ứng trên ảnh nào, và việc phân chia nhóm ảnh để chạy slideshow.
...

19/12/2010, 11:37 am Message reputation : 100% (1 vote)

[Update đã cũ] bbcode - hiệu ứng Lightbox trên ảnh 11373

ghê ghê. Nhưng mà sao bạn ko dùng slimbox. Tab Preview với next nằm vị trí này hơi bất tiện. gặp cái ảnh to tí là chết.
Còn link ảnh thô mình thấy ở slimbox , khi đưa link vào là nó tự bắt lun

19/12/2010, 11:57 am Message reputation : 0% (1 vote)

1. ảnh to thì kệ ảnh to [Update đã cũ] bbcode - hiệu ứng Lightbox trên ảnh 450105

2. muốn bắt link cũng dễ thôi nhưng ở đây mình muốn người dùng động tay chân tí, với lại tự bắt link thì không phân nhóm được.

19/12/2010, 12:11 pm

Thằng em làm thế nào đọc hết được cái thư viện jQuery thế.
Cho anh cái trang nào hướng dẫn cái jQuery dễ hiểu tý, anh toàn tim được mấy cái trang tổng hợp và dịch hướng dẫn dùng jQuery ah Neutral