Vngreenzone.com: Hiệu ứng Lightbox cho hình ảnh sử dụng jQuery (kiểu 2)

Nov 1, 2010

Hiệu ứng Lightbox cho hình ảnh sử dụng jQuery (kiểu 2)

Lightbox là một script đơn giản được dùng để tạo chế độ Preview hình ảnh trên trang web. Hôm nay xin giới thiệu hiệu ứng Lightbox của Leandro Pinho lấy ý tưởng từ Plugin Lightbox2 của Lokesh Dhakar.

Xem Demo.

Các bước thực hiện như sau:

1. Đặt phần code dưới đây vào trước thẻ </head>.

<style type="text/css">
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}

#gallery {
background-color: #444;
padding: 10px;
width: 550px;
}
#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>
<script type="text/javascript" src="http://huynhatha.250free.com/js/jquery.js"></script>
<script type="text/javascript" src="http://huynhatha.250free.com/js/jquery.lightbox-0.5.js"></script>

<script type="text/javascript">
$(function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
</script>

Chú ý, bạn nên tải về file jquery.js và jquery.lightbox-0.5.js và upload lên free hosting để sử dụng cho trang web của bạn, tránh hạn chế băng thông.

2. Thiết lập cấu trúc HTML như bên dưới và đặt vào phần thân của trang web, giữa 2 thẻ <body>, </body>.

<div id="gallery">
<ul>
<li><a href="/image1.jpg" title="Text 1"><img src="/thumb_image1.jpg" width="72" height="72" alt="" />a>li>

<li><a href="/image2.jpg" title="Text 2"><img src="/thumb_image2.jpg" width="72" height="72" alt="" />a></li>

<li><a href="/image3.jpg" title="Text 3"><img src="/thumb_image3.jpg" width="72" height="72" alt="" /></a></li>

<li><a href="/image4.jpg" title="Text 4"><img src="/thumb_image4.jpg" width="72" height="72" alt="" /></a></li>

<li><a href="/image5.jpg" title="Text 5"><img src="/thumb_image5.jpg" width="72" height="72" alt="" /></a></li>
</ul>
</div>

Chú ý, trong đoạn code HTML ở trên, bạn cần thay các liên kết hình ảnh đánh dấu màu đỏ bằng liên kết hình ảnh chuẩn cho chế độ Preview, và thay các liên kết đánh dấu màu xanh bằng liên kết ảnh đại diện (thumbnail) tương ứng. Text 1, Text 2,… là các mô tả cho hình ảnh, bạn cần thay đổi cho phù hợp.

No comments:

Post a Comment

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D