Tạo Slideshow cho thư viện ảnh chuyên nghiệp với hiệu ứng lightbox

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

» 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBFRECYehyphenhyphenxX8BqpUd-JnV5Vbn95gDUnNJACByp48DrWTBITNYMosMeDarygC3dxJpH78voD9fn_0lYnqf2qSlLERpFabScrswJ9wDCoEuG5-HkVbKP58-m1iF6pFWcuwzhIrNsEMU9GwF/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFvc_IdqGnL6G6EfRP9qzUibR6gRvTvDCStejxD-65-4Pyx3cq_rezJmoMnnXx04HgnyYbriDiK8NUrPVudbL4GsMlZbZFCpx97B_7VIvDKpRwkVP2IAxek731W-y_P5lq2ibg13YSFKWG/s24/loader.gif) center center no-repeat}
div.dark_square .pp_content_container .pp_left{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPX76rTkMUZ2uA_QsN2MHdvbkYzYsYsMfFvv_EwuA4oA5QjmpXdt9wRgvvducwQhYas_b37AXKRM5inWmIC7Td4iDmKZJcj0NMDBev-UZHZrxGUIk9vaB4MmEx7z6AQLqZtnWQqjUpmtDU/s20/contentPattern.png) top left repeat-y}
div.dark_square .pp_content_container .pp_right{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPX76rTkMUZ2uA_QsN2MHdvbkYzYsYsMfFvv_EwuA4oA5QjmpXdt9wRgvvducwQhYas_b37AXKRM5inWmIC7Td4iDmKZJcj0NMDBev-UZHZrxGUIk9vaB4MmEx7z6AQLqZtnWQqjUpmtDU/s20/contentPattern.png) top right repeat-y}
div.dark_square .pp_expand{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/s130/spriteround.png) -31px -26px no-repeat;cursor:pointer}
div.dark_square .pp_expand:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/s130/spriteround.png) -31px -47px no-repeat;cursor:pointer}
div.dark_square .pp_contract{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/s130/spriteround.png) 0 -26px no-repeat;cursor:pointer}
div.dark_square .pp_contract:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/s130/spriteround.png) 0 -47px no-repeat;cursor:pointer}
div.dark_square .pp_close{width:75px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/s130/spriteround.png) -1px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_nav .pp_pause{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/s130/spriteround.png) -24px -100px no-repeat;height:15px;width:14px}
div.dark_square .pp_arrow_previous{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYfwXvENuFLJjdA5dhGMawRP0rpIl8QQ7nWA-71wWHG60QBFmVeV4tIGQIPUeM0Lu2BFO3RJe4K8D10rHkyoGWOlgVMhKB9JGdQcuSXs6QUqqvFJirc-V_fqEAn4mALutQaHMWzzLKHPn/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-lMAvdqP7M0zjt-wk3bxyPkOaJDlZEsXKEANpIPerDDd-KMtXRqc-cPI-Cvl2w2eRd0miCwWDs4unLaRAGZdhLmWxOoCKiKvRXVw8HG4J30fMXWknQbaD_FQILcS1CF4Aj0ivfR-1YF4/s61/btnNext.png) center right no-repeat;cursor:pointer}
div.dark_square .pp_previous:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnDkCUyP8CAaXvlnKXBZcOMEpYaOx9FimUkmRwZoATEW6OMxpodKRKTPhKkLG7btqHYge22tLDkSRNNSS5c5qnbO08tR50CIvKNklN8CUqnBI8Kzp8oHEEEowSwMTg8EjD14IkKIHfmUdo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/s130/sprite.png) -31px -26px no-repeat;cursor:pointer}
div.light_square .pp_expand:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/s130/sprite.png) -31px -47px no-repeat;cursor:pointer}
div.light_square .pp_contract{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/s130/sprite.png) 0 -26px no-repeat;cursor:pointer}
div.light_square .pp_contract:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/s130/sprite.png) 0 -47px no-repeat;cursor:pointer}
div.light_square .pp_close{width:75px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/s130/sprite.png) -1px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_nav .pp_pause{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/s130/sprite.png) -24px -100px no-repeat;height:15px;width:14px}
div.light_square .pp_arrow_previous{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3JI8QRm1h4jMnFyP8mfqj8hNcEripG2nlH0IUPLDR9DYmPapl9dMjXdXVLu2zl-PhkKgp4i2Hoqd0p7xgnhEfLy2AKZgIpHR4gA-MNqL2WhyycM39mILC_uaAEQZ8iN4q4Efo11qoapZ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-lMAvdqP7M0zjt-wk3bxyPkOaJDlZEsXKEANpIPerDDd-KMtXRqc-cPI-Cvl2w2eRd0miCwWDs4unLaRAGZdhLmWxOoCKiKvRXVw8HG4J30fMXWknQbaD_FQILcS1CF4Aj0ivfR-1YF4/s61/btnNext.png) center right no-repeat;cursor:pointer}
div.light_square .pp_previous:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnDkCUyP8CAaXvlnKXBZcOMEpYaOx9FimUkmRwZoATEW6OMxpodKRKTPhKkLG7btqHYge22tLDkSRNNSS5c5qnbO08tR50CIvKNklN8CUqnBI8Kzp8oHEEEowSwMTg8EjD14IkKIHfmUdo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIj15io0arUWoV-JLv0dNphFzaD9YgW0l4AvsQEJ8yFKAwubbU9aTgBXpjTJ8VXlBYXxOgP385OyxRbKQAlS7cvReXezGHI-2b8_sgPY1MWrOZKXYAzQDT17FPZ87fyiLHbe09aEpr760Z/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-lMAvdqP7M0zjt-wk3bxyPkOaJDlZEsXKEANpIPerDDd-KMtXRqc-cPI-Cvl2w2eRd0miCwWDs4unLaRAGZdhLmWxOoCKiKvRXVw8HG4J30fMXWknQbaD_FQILcS1CF4Aj0ivfR-1YF4/s61/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%}
a.pp_previous{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-lMAvdqP7M0zjt-wk3bxyPkOaJDlZEsXKEANpIPerDDd-KMtXRqc-cPI-Cvl2w2eRd0miCwWDs4unLaRAGZdhLmWxOoCKiKvRXVw8HG4J30fMXWknQbaD_FQILcS1CF4Aj0ivfR-1YF4/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!

Nguồn : traidatmui.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!