"Thủ thuật tạo hiệu ứng Lightbox Evolution với JQuery v 1.4.4"

Traidatmui.com – Một thủ thuật có tên là hiệu ứng lightbox cho ảnh đã được mình giới thiệu cùng các bạn trước đây (bạn có thể xem lại tại đây) và hôm nay mình chia sẻ cùng các bạn một thủ thuật tạo hiệu ứng lightbox cao hơn một chút. Với hiệu ứng lightbox trước thì mình chỉ giới hạn ở chỗ chỉ áp dụng được đối với hình ảnh mà thôi, và thủ thuật này sẽ cao hơn một chút đó là có thể tạo lightbox đối với các đoạn văn bản, dạng iframe, các video Youtube, vimeo, Google video, dailymotion video...và các nút phóng to hay thu nhỏ đối với những hình ảnh có kích thước lớn.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<style>
.jquery-lightbox-overlay{
background:#000000;}
.jquery-lightbox{ position:relative;
padding:17px 0;}
.jquery-lightbox-border-top-left,.jquery-lightbox-border-top-right,.jquery-lightbox-border-bottom-left,.jquery-lightbox-border-bottom-right{ position:absolute;
height:17px; width:12%;
z-index:7000;}
.jquery-lightbox-border-top-left{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat 0 0;
top:0; left:0;}
.jquery-lightbox-border-top-right{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat right 0;
top:0; right:0;}
.jquery-lightbox-border-top-middle{ background:#2b2b2b;
position:absolute;
height:7px; width:78%; top:0;
left:12%; z-index:7000;
overflow:hidden;}
.jquery-lightbox-border-bottom-left{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat 0 bottom;
bottom:0;
left:0;}
.jquery-lightbox-border-bottom-right{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat right bottom;
bottom:0; right:0;}
.jquery-lightbox-border-bottom-middle{
background:#2b2b2b;
height:7px;
width:78%; position:absolute;
bottom:0; left:12%;
z-index:7000; overflow:hidden;}
.jquery-lightbox-title{
background:#2b2b2b;
color:#FFFFFF;
font-family:verdana,arial,serif;
font-size:11px;
line-height:14px;
padding:5px 8px; margin:3px;
position:absolute; bottom:0;
z-index:7000; opacity:0.9;}

.jquery-lightbox-html{ z-index:7000;
position:relative;
border:0;
border-left:7px solid #2b2b2b;
border-right:7px solid #2b2b2b;
padding:0px 15px;
vertical-align:top;}

.jquery-lightbox-html embed,
.jquery-lightbox-html object,
.jquery-lightbox-html iframe{
vertical-align:top;}

.jquery-lightbox-background{
position:absolute;
top:7px; left:7px; z-index:6999;
float:left;
padding:0;}

.jquery-lightbox-background img{
display:block; position:relative;
border:0; margin:0;
padding:0; width:100%; height:100%;}
.jquery-lightbox-mode-image .jquery-lightbox-html{ z-index:6998;
padding:0;}
.jquery-lightbox-mode-html .jquery-lightbox-background{
background:#FFFFFF;}
.jquery-lightbox-html{
overflow:auto;}
.jquery-lightbox-loading{ background:#FFFFFF url(https://lh6.googleusercontent.com/-PbPhfCU40e8/TkYNd5vQPDI/AAAAAAAAAhU/b8U_j7N1gtA/loading.gif) no-repeat center center;}

.jquery-lightbox-button-close{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat -190px -115px;
position:absolute;
top:12px; right:-26px;
width:29px;
height:29px;}
.jquery-lightbox-button-close:hover{
background-position:-220px -115px;}
.jquery-lightbox-button-close span,
.jquery-lightbox-buttons span{
display:none;}

.jquery-lightbox-buttons { position:absolute;
top:7px;
left:7px; z-index:7001;
height:39px;
display:none;}
.jquery-lightbox-buttons .jquery-lightbox-buttons-init,.jquery-lightbox-buttons .jquery-lightbox-buttons-end{
width:5px;
height:39px;
float:left;
display:inline;}
.jquery-lightbox-buttons-init{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat -151px -153px;
margin:7px 0 0 7px;}

.jquery-lightbox-buttons-end{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat -244px -153px;
margin:7px 0 0 0;}

.jquery-lightbox-button-left{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat -156px -153px;
width:24px;
height:39px;
float:left;
display:inline;
margin:7px 0 0 0;}

.jquery-lightbox-button-left:hover{
background-position:-156px -194px;}
.jquery-lightbox-button-right{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat -220px -153px;
width:24px;
height:39px; float:left;
display:inline;
margin:7px 0 0 0;}
.jquery-lightbox-button-right:hover{
background-position:-220px -194px;}
.jquery-lightbox-button-max{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat -182px -153px;
width:36px;
height:39px;
float:left; display:inline;
margin:7px 0 0 0;}

.jquery-lightbox-button-max:hover{background-position:-182px -194px;}

.jquery-lightbox-button-min{
background: url(https://lh6.googleusercontent.com/-BRPzIm53DXI/TkYNe7fUpzI/AAAAAAAAAhU/hf95NapJ8ag/jquery-lightbox-theme.png) no-repeat -162px -235px;
width:36px;
height:39px;
float:left;
display:inline;
margin:7px 0 0 0;}

.jquery-lightbox-button-min:hover{
background-position:-207px -235px;}

.jquery-lightbox-navigator{
display:none;}
</style>

<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://traidatmuidata.appspot.com/scripts/jquery.lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').lightbox();
});
</script>

5. Save template lại

Như vậy là bạn đã cài đặt hiệu ứng lightbox cho template của mình, bây giờ chỉ còn lại là bước sử dụng nó. Để sử dụng hiệu ứng này thì bạn cần thêm class="lightbox" vào thẻ <a> trong từng trường hợp bên dưới

a. Sử dụng cho hình ảnh
<a href="Link ảnh" class="lightbox"><img width="100" height="100" src="Link ảnh" alt=""/></a>

Nếu bạn chỉ thêm link như thế thì kích thước hình ảnh sẽ tự động resize lại, nếu bạn muốn khi click vào ảnh thumb thì nó sẽ hiện ra ảnh với kích cỡ lớn nhất thì bạn thêm thuộc tính vào link ảnh như bên dưới
<a href="Link ảnh?lightbox[autoresize]=false" class="lightbox"><img width="100" height="100" src="Link ảnh" alt=""/></a>

Và nếu muốn nhóm các ảnh lại thành một nhóm để có thể xem liên tiếp mà không phải tắt lightbox thì bạn thêm rel="group1", rel="group2",rel="group3"... vào trong thẻ <a> những ảnh cùng một nhóm thì bạn đặt vào thẻ <a> tên nhóm giống nhau, ví dụ bạn muốn 3 ảnh cùng nhóm 1 thì bạn thêm rel="group1" vào thẻ <a> của 3 ảnh đó

b. Sử dụng cho Video
Đối với Youtube
<a href="http://www.youtube.com/watch?v=EaqrBix-COM" class="lightbox">Youtube Video</a>

Vimeo Video
<a href="http://vimeo.com/13240711" class="lightbox">Vimeo Video</a>

Dailymotion Video
<a href="http://www.dailymotion.com/video/xkijny_pv-yyyy-bad-girl-japanese-ver-hdtv_music" class="lightbox">Dailymotion Video</a>

Google Video
<a href="http://video.google.com/videoplay?docid=-8618166999532839788" class="lightbox">Google Video</a>

Twitvid Video
<a href="http://www.twitvid.com/8H9D2" class="lightbox">Twitvid Video</a>

Đối là một số trang video tiêu biểu, và hơn nữa bạn cũng có thể resize lại kích thước các video ở trên theo ý mình bằng cách thêm thuộc tính vào link video như bên dưới
<a href="http://www.youtube.com/watch?v=EaqrBix-COM&lightbox[width]=610&lightbox[height]=460" class="lightbox">Youtube Video</a>

c. Sử dụng cho Ifram
<a href="http://www.traidatmui.com?hl=en&tab=nw&lightbox[iframe]=true&lightbox[width]=970&lightbox[height]=560" class="lightbox">TRAIDATMUI.COM</a>

Bạn thay đổi các giá trị độ rộng và chiều cao lại cho phù hợp

Như vaayl là mình đã giới thiệu cùng các bạn thủ thuật tạo lightbox, nếu còn vấn đề chưa rỏ bạn có thể để lại comment bên dưới để thảo luận thêm.

Chúc bạn thành công

Tham khảo code tại huevn.com

Xem khác cùng chủ đề

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

11/15/2011 05:31:00 SA Trả lời

anh ơi em muốn cho viền vào xung quanh bài viết hoặc các javascript thì làm thế nào anh

Admin
11/15/2011 05:39:00 SA Trả lời

@ nguyễn huy Tập: Em muốn tạo viền cho bài viết thì thêm thuộc tính border vào lớp .post là được em.

Ví dụ: .post {border: 1px solid #ccc;}

11/15/2011 06:32:00 SA Trả lời

em muốn viền toàn trang thì cho vào đâu anh

Admin
11/15/2011 06:39:00 SA Trả lời

@ nguyễn huy Tập: Tùy vào từng template mà có cấu trúc khác nhau, có thể #outer-wrapper, content-wrapper...

11/15/2011 07:00:00 SA Trả lời

em chỉ làm đc cho bai viết nhưng không làm viền cho toàn trang được,thanks anh nha

Nặc danh
11/16/2011 01:53:00 SA Trả lời

Bác nào biết soft tạo hiệu ứng bóng ảnh thế này ?
http://3.bp.blogspot.com/-VTGHQQEhzQQ/TsG-x-MNPuI/AAAAAAAACwI/kY4OPrd3K4c/s1600/effect-img.png

11/27/2011 04:20:00 CH Trả lời

Anh ơi em đã làm như anh nói nhưng không được
bản demo : http://hd-kiddichoi.blogspot.com/2011/11/blog-post_27.html
xin anh khac phuc dùm thanks anh trước !!!

12/10/2011 02:19:00 SA Trả lời

có cách nào nó tự động đc k ! nghĩa là nó tự hiện lighbox cho ảnh

1/02/2012 06:47:00 SA Trả lời

Hay . áp dụng thử

Admin
1/02/2012 07:10:00 SA Trả lời

[quote]@ Cu0nglsf: có cách nào nó tự động đc k ! nghĩa là nó tự hiện lighbox cho ảnh[/quote]
Đối với hiệu ứng lightbox tự động cho hình ảnh thì bạn xem bài viết tại đây nhé.

8/02/2012 08:25:00 SA Trả lời

có cách nào để giảm sự sung đột Lightbox Evolution với smilies không , giúp mình với , mình có sử dụng trên diễn đàn làm theo cách của bạn và thành công nhưng bị xung dột với smilies nên chọn chọn mặc cười được , mà mình chọn mặc cười bên web bạn không dược . Huy vọng bạn khắc phục và giúp mình với.

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