Hôm nay mình xin giới thiệu với các bạn plugin Lightbox JS 2.04 cho blog Wordpress, nó dùng để hiển thị hình ảnh bằng cách che trang web hiện tại và tạo hiệu ứng để hiển thị.

Cài đặt:

Để có được hiệu ứng như vậy đầu tiên các bạn download plugin Lightbox JS 2.04 tại đây và giải nén ra.

Tiếp theo upload file “lightbox.php” và thư mục “lightbox” vào “/wp-content/plugins/” rồi activate plugin này.

Sử dụng:

Có 2 cách sử dụng đó là sử dụng hiệu ứng cho từng ảnh riêng lẻ hay cho từng nhóm ảnh.

1. Để sử dụng cho từng ảnh riêng lẻ thì thêm thuộc tính rel=”lightbox” vào thẻ a như sau:

Ví dụ rõ hơn nè, khi bạn chèn một hình vào bài viết thì chèn luôn cả link đến hình ảnh đó, xem đoạn code sau:

<a href="http://www.xxx.com/wp-content/uploads/2008/03/dno061.jpg" title="dno061.jpg" rel="lightbox">

<img src="http://www.xxx.com/wp-content/uploads/2008/03/dno061.jpg" alt="dno061.jpg" width="100" /> </a>

2. Tương tự như vậy, để sử dụng cho từng nhóm ảnh thì thêm thuộc tính rel=”lightbox[roadtrip]” vào thẻ a như sau:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image1</a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image2</a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image3</a>

SEO Việt Nam - Theo BlogThuThuat

Comments

thanhp

0

 

 

Xin cho hỏi là mình làm đúng theo hướng dẫn như trên , nhưng khi click vào hình thì nó mở một cửa sổ mới chứa link ảnh chứ không nằm trong khung . Có cách nào giải quyết được không ?

Thứ tư 06 Tháng 5 2009, 04:01

Post Reply

B

i

u

Quote

Code

List

List item

URL

Name *
Email *
URL
Code   

Submit Comment

Hủy

in Hà Nội

0

 

 

Cái này là do trình duyệt hay sao ý. Thử mở ở trìnhduyeetj khác xem :"> Tớ toàn dùng FF

Thứ năm 18 Tháng 6 2009, 04:43

Post Reply

B

i

u

Quote

Code

List

List item

URL

Name *
Email *
URL
Code   

Submit Comment

Hủy

B

i

u

Quote

Code

List

List item

URL

Name *
Email *
URL
Code   

Submit Comment