Ngày Thứ Tư, 1 tháng 2, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết Thủ thuật tạo hiệu ứng Lightbox Evolution với JQuery v 1.4.4
Chúc bạn xem tin tức vui vẻ !!
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://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').lightbox();
});
</script>
.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://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/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>
<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">TANCHAU123.BLOGSPOT.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!!!
Không có nhận xét nào:
Đăng nhận xét