24 tháng 6, 2012

Phóng to ảnh - Thủ thuật tạo hiệu ứng Lightbox Evolution với JQuery v 1.4.4



Hôm nay mình chia sẻ cùng các bạn một thủ thuật tạo hiệu ứng lightbox, thủ thuật này 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.

Xem Demo
» 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.png)
 no-repeat 0 0;
top:0;  left:0;}
.jquery-lightbox-border-top-right{
background:
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.png)
 no-repeat 0 bottom;
bottom:0;
left:0;}
.jquery-lightbox-border-bottom-right{
background:
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiem1JyTgtBIv0rdOzjaT-5Y_pAWRHO_NFHeNq37DIXfybBACnbS7JcBv6-K5O5ZTKW-Uzk2T9ei5wvF34ABvrtXAl4O1zKeVzmQAWSyZYXPY-ut41oomfVeywfiVsv2d_-Oihn83aWx5uF/h120/loading-namkna.blogspot-com.gif)
 no-repeat center center;}

.jquery-lightbox-button-close{
background:
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.png)
 no-repeat -151px -153px;
margin:7px 0 0 7px;}

.jquery-lightbox-buttons-end{
background:
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.png)
 no-repeat -244px -153px;
margin:7px 0 0 0;}

.jquery-lightbox-button-left{
background:
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-EVKdhLZa3cqQVeDX60lbObVG6xHBE3u8gEikohTVWLgxALlP9Er9UAF2s6KWP9HDYtle2knmxwIzUwgzmsj58uXoAxWOGK0cnmM9OJqcONt5vzWWFu-SH712_hqt6o1pWFVDZ5VGV2u0/s1600/jquery-lightbox-theme-namkna-blogspot-com.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://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.lightbox.js"></script>
<script type="text/javascript">
 jQuery(document).ready(function(){
   jQuery('.lightbox').lightbox();
 });
</script>
Các bạn có thể tải File Js về Tại đay sau đó upload lên host riêng để dùng lâu dài.
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=7eg-SUv7JTg" 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=7eg-SUv7JTg&lightbox[width]=610&lightbox[height]=460" class="lightbox">Youtube Video</a>

c. Sử dụng cho Ifram

<a href="http://namkna.blogspot.com/?hl=en&tab=nw&lightbox[iframe]=true&lightbox[width]=970&lightbox[height]=560" class="lightbox">Namkna.blogspot</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
Chủ đề:

Người đăng: vào lúc
Nhãn: ,

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)
Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn kynangblog.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. KỸ NĂNG BLOG - All Rights Reserved
Design by KyNangBlog Edit Ky nang blog
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million kynangblog template byKyNangBlog
Blogger Gadgets