Hướng dẫn Lightbox jquery plugin

Đây là một plugin của jQuery, tạo hiệu ứng xem ảnh phóng to khi click vào thumnail của ảnh trên web. Hiệu ứng khá đơn giản, gọn, nhẹ nhưng cũng đầy đủ các tính năng để xem ảnh. Rất thích hợp cho một số trang web sản phẩm hoặc chia sẽ hình ảnh

Cách sử dụng rất đơn giản:
Bước 1: Tạo một file html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery lightBox plugin</title>    
</head>
<body>

    
</body>
</html>

Bước 2: Viết cấu trúc html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery lightBox plugin</title>
</head>
<body>

<h2 id="example">Example</h2>
<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="image1">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>
</body>
</html>

Lưu ý:
photos/image1.jpg là đường dẫn đến hình fullsize.
photos/thumb_image1.jpg là đường dẫn đến hình thumb.

Bước 3: Nhúng css và jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>jQuery lightBox plugin</title>   
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
       <style type="text/css">
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>

    </head>

    <body>

<h2 id="example">Example</h2>

    <p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>

    <div id="gallery">

        <ul>

            <li>

                <a href="photos/image1.jpg" title="image1">

                    <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />

                </a>

            </li>

        </ul>

    </div>



</body>

</html>

Các bài viết cũ hơn: