Thủ thuật tạo hiệu ứng Lightbox Evolution với JQuery v 1.4.4
Điểm 4.6/5 dựa vào 87 đánh giá
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ật1. Đă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>
.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>
<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
Chuyên mục:
Blogspot nâng cao
![Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online](http://1.bp.blogspot.com/-0lPFnc_UVq0/TrVDZU6vbcI/AAAAAAAABUU/TTJlcT09M3U/s72-c/Khuc-ca-cho-tinh-nhan.jpg "Phim Khúc Ca Cho Tình Nhân [32/32 Tập] Trọn Bộ Online")
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
Trả lờiXóa@ 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.
Trả lờiXóaVí dụ: .post {border: 1px solid #ccc;}
em muốn viền toàn trang thì cho vào đâu anh
Trả lờiXóa@ 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...
Trả lờiXóaem chỉ làm đc cho bai viết nhưng không làm viền cho toàn trang được,thanks anh nha
Trả lờiXóaAnh ơi em đã làm như anh nói nhưng không được
Trả lờiXóabản demo : http://hd-kiddichoi.blogspot.com/2011/11/blog-post_27.html
xin anh khac phuc dùm thanks anh trước !!!
có cách nào nó tự động đc k ! nghĩa là nó tự hiện lighbox cho ảnh
Trả lờiXóaHay . áp dụng thử
Trả lờiXóa[quote]@ Cu0nglsf: có cách nào nó tự động đc k ! nghĩa là nó tự hiện lighbox cho ảnh[/quote]
Trả lờiXóaĐố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é.
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.
Trả lờiXóa