"Hiệu ứng lightbox cho hình ảnh"

(Traidatmui.com) – Trong wordpress có một hiệu ứng dùng cho ảnh rất tốt và trong rất bắt mắt khi click vào ảnh. Hiệu ứng này rất tiện lợi, khi bạn click vào ảnh để xem kích cỡ thật của ảnh thì nó sẽ không làm bạn rời khỏi trang mà bạn đang xem. Hôm nay mình xin chia sẽ cho các bạn cách để sử dùng hiệu ứng này trong blogger. Đó là sử dụng hiệu ứng "Lightbox" cho ảnh, hiệu ứng này sẽ làm cho blog bạn bị che lại khi hiển thị hình ảnh có sử dụng lightbox này. Để có thể biết rỏ hơn về thủ thuật này bạn hãy tham khkaor cách thực hiện bên dưới.

☼ Cách thực hiện

1. Đăng nhập vào blogger
2. Vào bố cục và chọn chỉnh sửa HTML
3. Chèn đoạn code bên dưới vào sau thẻ <head>
<style>
#lightbox{
background:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 0px; right: 0px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(http://lh6.ggpht.com/_BTztXRwC9ik/S9AmuCjNuYI/AAAAAAAACBc/Q71w7Uz96n0/overlay.png); }

* html #overlay{
background: #333;
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&quot;overlay.png&quot;, sizingMethod=&quot;scale&quot;);
}
</style>

<script src='http://data-traidatmui.appspot.com/scripts/lightbox.js' type='text/javascript'/>

4. Save template lại
5. Bây giờ để có thể sử dụng được hiệu ứng này bạn phải thực hiện thêm một bước nữa, đó là khi sử dụng hình ảnh trên blog của bạn thì phải dùng lệnh tương tự như bên dưới.
<a href="http://lh3.ggpht.com/_BTztXRwC9ik/S4tj4eDiccI/AAAAAAAAANo/Vx42_2MYp88/s640/3.jpg" rel="lightbox" ><img width="200" height="250" src="http://lh3.ggpht.com/_BTztXRwC9ik/S4tj4eDiccI/AAAAAAAAANo/Vx42_2MYp88/s640/3.jpg" /></a>

-Code màu đỏ là link ảnh thực của bạn, tức là nó sẽ hiển thị chiều cao và độ rộng lớn nhất của hình ảnh đó.
- Code màu xanh chính là link hình ảnh đó mà bạn đã thu nhỏ lại với độ rộng và chiều cao tùy ý.
Lưu ý: 2 đường link trên là giống nhau.

» Cập nhật ngày 22/08/2011

Ở trên mình đã giới thiệu cho các bạn cách tạo hiệu ứng lightbox cho hình ảnh trên blog, tuy nhiên đối với thủ thuật ở trên thì chúng ta lại áp dụng hiệu ứng rất thủ công, tức là phải thêm phần rel="lightbox" vào thẻ <a> của ảnh thì hiệu ứng lightbox mới có tác dụng. Theo yêu cầu của bạn Mr Male comments bên dưới thì mình đã tham khảo code tại simplexdesign.blogspot.com và hôm nay mình xin cập nhật thêm phiên bản lightbox tự động cho blog, tức là tất cả hình ảnh trên blog của bạn sẽ đều có hiệu ứng lightbox mà không phải chèn lệnh thủ công cho từng ảnh như thủ thuật ở trên, bây giờ chúng ta sẽ bắt đầu, bạn chỉ cần thực hiện một bước đơn giản là thay code ở bước 3 thành code bên dưới và save template lại là xong.
<style type='text/css'>
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
}
#jquery-lightbox a img { margin:0px;border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
border:5px solid #ccc;
border-bottom:0px;
margin: 0 auto;
}
#lightbox-container-image { margin:0px;padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}

#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;
border:5px solid #ccc;
border-top:0px;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom:5px;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0;
}
</style>
<script src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js" type="text/javascript"></script>
<script src="http://data-traidatmui.appspot.com/scripts/auto_lightbox.js" type="text/javascript">
</script>

Như vậy là xong bạn có thể vào blog và click vào một ảnh bất kỳ trên blog để xem thử nhe.

Cập nhật 08/02/2012

Trước đây có lẻ thủ thuật này rất hữu vì Blogger không có sẵn tính năng này, tuy nhiên bây giờ thủ thuật này không còn cần thiết nữa vì hiện tại Blogger đã cho ra mắt tính năng Lightbox cho tất cả các hình ảnh trên blog của bạn. Dù các hình ảnh trên blog bạn được tải lên trực tiếp hay được link đến từ host khác điều có hiệu ứng lightbox của Blogger. Tính năng này đã được Blogger tự động kích hoạt cho tất cả các Blogger, nếu blog bạn chưa kích hoạt bạn có thể vào Cài đặt (Settings) >> Định dạng (Formatting) và bạn chọn Có (Yes) ở dòng "Hiển thị hình ảnh với hiệu ứng Hộp đèn" (Showcase images with Lightbox). Giờ thì hiệu ứng lightbox này không cần phải add code phức tạp nữa, chỉ cần thao tác vài bước đơn giản hơn nhiều.


Chúc bạn thành công
Tham khảo từ dynamicdrive.com

Xem khác cùng chủ đề

9 nhận xét | Viết lời bình

8/19/2011 08:54:00 CH Trả lời

votay Lightbox giờ có phiên bản Auto roài, ko cần chèn thủ công nữa Cuoilon

8/20/2011 12:28:00 SA Trả lời

Admin pót bài: Hiệu ứng lightbox cho hình ảnh tự động đi
Mình tìm thấy nguồn hướng dẫn: http://www.moigioiforex.com/2011/08/auto-lighbox-blogspot.html
mà làm không được.

Thanks!

Admin
8/22/2011 03:28:00 SA Trả lời

@Mr Male Mình đã cập nhật phiên bản lightbox tự động cho blogspot rồi, bạn tham khảo ở trên nhé. vuivewa

8/22/2011 06:14:00 SA Trả lời

@Trai Đất Mũi (admin)Thanks nhiều nhé.
Mình làm được rồi.
Demo: hnmovies.com

1/12/2013 05:54:00 CH Trả lời

mình thấy có nhận libox tự động đâu mà

Admin
1/12/2013 06:02:00 CH Trả lời

Bây giờ plugin này không cần dùng đến code như trên nữa, hiện tại blogger đã có bổ sung tính năng này rồi. Chỉ cần kích hoạt là tất cả các ảnh được hiện ra với hiệu ứng lightbox thôi bạn ah

1/12/2013 06:11:00 CH Trả lời

cách thứ 2 áp dụng ko được

1/12/2013 06:16:00 CH Trả lời

Kích hoạt rồi nhưng nó có nhận đâu hay nó chỉ nhận trên mẫu cũ của blogger thôi nhỉ

1/12/2013 06:23:00 CH Trả lời

http://www.h-news-v1.duongdenthanhcong.net/2013/01/lo-anh-khoa-than-cua-thi-sinh-hoa-vuong.html ko hoạt động thật

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang