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

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

Posted by chiasedamme on Sunday, October 31, 2010

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.

{ 0 comments... read them below or add one }

Post a Comment