Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > Supper Simple LightBox với CSS và Jquery
Supper Simple LightBox với CSS và Jquery
Nguyễn Trung Hiếu
Share Code Web Company 2012

Supper Simple LightBox với CSS và Jquery

Bài viết hướng dẫn bạn làm cách nào để có thể tạo ra một lightbox một cách đơn giản nhất. Kết quả của bài viết thích hợp cho bạn nào dùng để tạo ra galleries, porfolio và hơn thế nữa.

Bước 1: HTML

Sau khi thực hiện tạo mã HTML đơn giản phía trên, chúng ta được như sau
simple lightbox
Và bạn chỉ cần chú ý rằng, với mọi link trong bài đều có gán class lightbox_trigger để phục vụ viết script sau này.
Bước 2: CSS
Bước này bạn có thể đặt đoạn CSS dưới đây trong thẻ head cũng được

Sau khi css ta được
simple lightbox with css
Bước 3: LightBox HTML
Chúng ta không thể insert trực tiếp đoạn lightbox này vào mã HTML bên trên được, do đó chúng ta sẽ insert nó tự động bằng Jquery.

Ở đây thẻ img có thuộc tính src không có giá trị bởi vì nó sẽ được tạo phụ thuộc vào việc click của người dùng.
Bước 4: CSS cho lightBox

css for lightbox
Bước 5: Jquery
Chúng ta thêm thư viện jquery vào trước đã

Và thêm đoạn Jquery này vào nhé

OK! kết quả của chúng ta đây rồi
lightbox with css and jquery
Bạn có thể download code bên dưới để học hỏi nếu như không thể thực hiện thành công

DemoDownload code

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}