» » Thủ thuật: Tạo Slideshow cho thư viện ảnh chuyên nghiệp với hiệu ứng lightbox trong Blogspot
Người đăng: | 16/03/2013 | 11:04

Thủ thuật: Tạo Slideshow cho thư viện ảnh chuyên nghiệp với hiệu ứng lightbox trong Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Traidatmui.com – Trong bài viết hôm nay mình chia sẻ cho các bạn 1 thủ thuật có thể giúp các bạn tạo 1 thư viện ảnh với hiệu ứng lightbox xuất hiện trước blog một cách rất chuyên nghiệp. Với thủ thuật này thì bạn có thể tạo cho mình 1 album ảnh hay 1 thư viện ảnh ngay trên blog và khi click vào ảnh thì 1 hộp trình diễn slide sẽ xuất hiện trước blog và làm mờ đi phần thừa trên blog của bạn. Hơn nữa, thủ thuật này ngoài việc hiện thị hình ảnh dạng lightbox với các nút di chuyển qua lại để xem tất cả hình ảnh trong cùng 1 album hay cùng 1 thư viện thì còn có chức năng trình chiếu tất cả các hình ảnh đó dưới dạng slideshow 1 cách tự động.


Hình ảnh minh họa
Thủ thuật: Tạo Slideshow cho thư viện ảnh chuyên nghiệp với hiệu ứng lightbox trong Blogspot

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

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>
div.dark_square .pp_left,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background:url(https://lh3.googleusercontent.com/-xDFe54MINJY/UUPYDOHDiUI/AAAAAAAAA2A/VFmpM3uk80E/s10/contentPattern2.png) top left repeat}
div.dark_square .currentTextHolder{color:#c4c4c4}
div.dark_square .pp_description{color:#fff}
div.dark_square .pp_loaderIcon{background:url(https://lh3.googleusercontent.com/-THyG2nYXTdI/UUPTfLX7ZPI/AAAAAAAAA1E/PkF0yqSr__0/s24/loader.gif) center center no-repeat}
div.dark_square .pp_content_container .pp_left{background:url(https://lh4.googleusercontent.com/-cfhCAsMgHvA/UUPTe2YdNCI/AAAAAAAAA0o/s2Si5I87agw/s20/contentPattern.png) top left repeat-y}
div.dark_square .pp_content_container .pp_right{background:url(https://lh4.googleusercontent.com/-cfhCAsMgHvA/UUPTe2YdNCI/AAAAAAAAA0o/s2Si5I87agw/s20/contentPattern.png) top right repeat-y}
div.dark_square .pp_expand{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -31px -26px no-repeat;cursor:pointer}
div.dark_square .pp_expand:hover{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -31px -47px no-repeat;cursor:pointer}
div.dark_square .pp_contract{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) 0 -26px no-repeat;cursor:pointer}
div.dark_square .pp_contract:hover{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) 0 -47px no-repeat;cursor:pointer}
div.dark_square .pp_close{width:75px;height:22px;background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -1px -1px no-repeat;cursor:pointer}
div.dark_square #pp_full_res .pp_inline{color:#fff}
div.dark_square .pp_gallery a.pp_arrow_previous,div.dark_square .pp_gallery a.pp_arrow_next{margin-top:12px !important}
div.dark_square .pp_nav .pp_play{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -1px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_nav .pp_pause{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -24px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_arrow_previous{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) 0 -71px no-repeat}
div.dark_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.dark_square .pp_arrow_next{background:url(https://lh5.googleusercontent.com/-vflQbQZCP94/UUPTfjyHMzI/AAAAAAAAA04/-QQMC8IdfQw/s130/spriteround.png) -22px -71px no-repeat}
div.dark_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.dark_square .pp_next:hover{background:url(https://lh4.googleusercontent.com/-9O7U4ama61Y/UUPTe-elTyI/AAAAAAAAA1A/kR6PM81euJg/s61/btnNext.png) center right no-repeat;cursor:pointer}
div.dark_square .pp_previous:hover{background:url(https://lh6.googleusercontent.com/-9fLHedPjzsU/UUPTe8Mv2eI/AAAAAAAAA0g/LscCol_akn4/s61/btnPrevious.png) center left no-repeat;cursor:pointer}
div.light_square .pp_left,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content{background:#fff}
div.light_square .pp_content .ppt{color:#000}
div.light_square .pp_expand{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.light_square .pp_expand:hover{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.light_square .pp_contract{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.light_square .pp_contract:hover{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.light_square .pp_close{width:75px;height:22px;background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -1px -1px no-repeat;cursor:pointer}
div.light_square #pp_full_res .pp_inline{color:#000}
div.light_square .pp_gallery a.pp_arrow_previous,div.light_square .pp_gallery a.pp_arrow_next{margin-top:12px !important}
div.light_square .pp_nav .pp_play{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_nav .pp_pause{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_arrow_previous{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) 0 -71px no-repeat}
div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default}
div.light_square .pp_arrow_next{background:url(https://lh3.googleusercontent.com/-yLv6AlNrJfI/UUPTfUeaK6I/AAAAAAAAA00/iBZy9IN3z2k/s130/sprite.png) -22px -71px no-repeat}
div.light_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default}
div.light_square .pp_next:hover{background:url(https://lh4.googleusercontent.com/-9O7U4ama61Y/UUPTe-elTyI/AAAAAAAAA1A/kR6PM81euJg/s61/btnNext.png) center right no-repeat;cursor:pointer}
div.light_square .pp_previous:hover{background:url(https://lh6.googleusercontent.com/-9fLHedPjzsU/UUPTe8Mv2eI/AAAAAAAAA0g/LscCol_akn4/s61/btnPrevious.png) center left no-repeat;cursor:pointer}
div.pp_pic_holder a:focus{outline:none}
div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500}
div.pp_pic_holder{display:none;position:absolute;width:100px;z-index:10000}
.pp_top{height:20px;position:relative}
* html .pp_top{padding:0 20px}
.pp_top .pp_left{height:20px;left:0;position:absolute;width:20px}
.pp_top .pp_middle{height:20px;left:20px;position:absolute;right:20px}
* html .pp_top .pp_middle{left:0;position:static}
.pp_top .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px}
.pp_content{height:40px}
.pp_fade{display:none}
.pp_content_container{position:relative;text-align:left;width:100%}
.pp_content_container .pp_left{padding-left:20px}
.pp_content_container .pp_right{padding-right:20px}
.pp_content_container .pp_details{margin:10px 0 2px 0}
.pp_description{display:none;margin:0 0 5px 0}
.pp_nav{clear:left;float:left;margin:3px 0 0 0}
.pp_nav p{float:left;margin:2px 4px}
.pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px}
a.pp_arrow_previous,a.pp_arrow_next{display:block;float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px}
.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000}
.pp_gallery{left:50%;margin-top:-50px;position:absolute;z-index:10000}
.pp_gallery ul{float:left;height:35px;margin:0 0 0 5px;overflow:hidden;position:relative}
.pp_gallery ul a{border:1px #000 solid;border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflow:hidden}
.pp_gallery ul a:hover{border-color:#fff}
.pp_gallery ul a img{border:0}
.pp_gallery li{display:block;float:left;margin:0 5px 0 0}
.pp_gallery li.default a{background:url(https://lh5.googleusercontent.com/-RbF0X2w01Cw/UUPViv2b_OI/AAAAAAAAA1o/d2deezxHg70/s50/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px}
.pp_gallery li.default a img{display:none}
.pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px !important}
a.pp_next{background:url(https://lh4.googleusercontent.com/-9O7U4ama61Y/UUPTe-elTyI/AAAAAAAAA1A/kR6PM81euJg/s61/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%}
a.pp_previous{background:url(https://lh4.googleusercontent.com/-9O7U4ama61Y/UUPTe-elTyI/AAAAAAAAA1A/kR6PM81euJg/s61/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%}
a.pp_expand,a.pp_contract{cursor:pointer;display:none;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000}
a.pp_close{display:block;float:right;text-indent:-10000px}
.pp_bottom{height:20px;position:relative}
* html .pp_bottom{padding:0 20px}
.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px}
.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px}
* html .pp_bottom .pp_middle{left:0;position:static}
.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px}
.pp_loaderIcon{display:block;height:24px;left:50%;margin:-12px 0 0 -12px;position:absolute;top:50%;width:24px}
#pp_full_res{line-height:1 !important}
#pp_full_res .pp_inline{text-align:left}
#pp_full_res .pp_inline p{margin:0 0 15px 0}
div.ppt{color:#fff;display:none;font-size:17px;margin:0 0 5px 15px;z-index:9999}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}

5. Chèn code bên dưới vào trước thẻ </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://traidatmuidata.googlecode.com/files/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'light_square',slideshow:5000});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'fast',slideshow:30000});
});
</script>

6. Và bên dưới là code để bạn tạo link hình ảnh hay tạo thư viện ảnh, bạn có thể chèn code vào bài viết hay tiện ích HTML/Javascript trên blog của bạn.
<ul class="gallery clearfix">
<li><a href="http://img.tamtay.vn/files/photo2/2010/11/21/13/155659/4ce8bf1c_3da8d59d_user450086_pic888617_1290087052.jpg" rel="prettyPhoto[gallery2]">
<img src="http://img.tamtay.vn/files/photo2/2010/11/21/13/155659/4ce8bf1c_3da8d59d_user450086_pic888617_1290087052.jpg" style="max-width:265px; "/></a></li>

<li><a href="http://img.tamtay.vn/files/photo2/2010/11/21/13/155659/4ce8bf1f_1d764362_user450086_pic888618_1290087052.jpg" rel="prettyPhoto[gallery2]">
<img src="http://img.tamtay.vn/files/photo2/2010/11/21/13/155659/4ce8bf1f_1d764362_user450086_pic888618_1290087052.jpg" style="max-width:265px; "/></a></li>

<li><a href="http://i54.fastpic.ru/big/2012/1228/ed/7c81591d5b60c8e9e7a0eb50e0d4ffed.jpg" rel="prettyPhoto[gallery2]">
<img src="http://i54.fastpic.ru/big/2012/1228/ed/7c81591d5b60c8e9e7a0eb50e0d4ffed.jpg" style="width:265px; height:176px;"/></a></li>
</ul>

Bạn hãy thay đổi các link ở trên thành link hình ảnh của bạn và thay đổi độ rộng và chiều cao của hình ảnh trong Style. Ở đây phần hiển thị hình ảnh trong thư viện ảnh mình không dùng css để trang trí nhiều, bạn hoàn toàn có thể thêm các thuộc tính css với class gallery để tạo ra cho mình 1 thư viện hình ảnh phong cách riêng nhé.

Lưu ý: Nếu trong blog của bạn đã có jquery.min.js cùng phiên bản thì bạn không cần chèn thêm file jquery.min.js ở trên.

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

Chuyên mục:

6 nhận xét

  1. Nặc danh3/16/2013 04:17:00 CH

    Hello very cool web site!! Guy .. Excellent .
    . Superb .. I will bookmark your site and take the feeds additionally?

    I'm glad to search out so many useful info right here in the put up, we want work out more strategies on this regard, thanks for sharing. . . . . .

    Here is my weblog ... http://Webhostingtop3.com/review/ix-web-hosting/

    Trả lờiXóa
    Trả lời
    1. Công Nghệ Thủ Thuật3/17/2013 01:25:00 CH

      Thanks for visiting my blog. Very pleased if you comment with your name or your nickname.

      Xóa
  2. Unknown3/28/2013 07:41:00 CH

    Blog của bạn trình bày chuyên nghiệp thế? Cảm ơn bạn đã ghé thăm và gửi link liên kết với mình nhé! Chúc bạn nhiều niềm vui và Thành đạt trong cuộc sống.

    Trả lờiXóa
  3. Nặc danh3/31/2013 03:51:00 CH

    It's really a nice and helpful piece of info. I am satisfied that you simply shared this useful info with us. Please stay us up to date like this. Thanks for sharing.

    Feel free to surf to my website - www.linkhello.com

    Trả lờiXóa
  4. Nặc danh4/08/2013 10:29:00 CH

    You need to take part in a contest for one of the best sites on the net.
    I will highly recommend this site!

    Stop by my blog post - http://Mybookmarkingblog.com/

    Trả lờiXóa