Trang chủ / Công nghệ / Lập trình / Javascript
loading...
02-04-2010 08:29

Cách sử dụng lightbox plugin của jquery

 

Lightbox plugin của jquery là một thư viện javascript dùng để tạo image slide. Khi người dùng click vào một hình thumbnail, lightbox sẽ tạo một khung để hiển thị hình ảnh được phóng lớn, cung cấp các nút để người dùng duyệt hình ảnh.

1

Tải thư viện jquery tại địa chỉ http://code.jquery.com/jquery-1.4.2.min.js

2

Tải thư lightbox plugin tại địa chỉ http://github.com/balupton/jquery-lightbox/downloads

3

Giải nén, chép các thư mục css, js, images vào thư mục chứa các thư viện javascript của bạn, chẳng hạn js/jquery.lightbox

4

Chèn đoạn mã sau vào thẻ <head>

<script src="js/jquery.js"></script>
<script src="js/jquery.lightbox/js/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.lightbox/css/jquery.lightbox.css" />
<script type="text/javascript">
    $(document).ready(function(){
        $('.lightbox').lightBox();       
    });
</script>
5

Chèn đoạn mã sau vào vị trí bạn muốn hiển thị hình thumbnail:

<a href="images/large.jpg" class="lightbox">
<img src="images/thumbnail.jpg">
</a>
Chia sẻ:

Bài cùng chủ đề

loading...

Bình luận

Danh mục

Xem nhiều

Bài mới