Tiện ích xem ảnh dạng lightbox cho blog

Cách thức làm được sưu tầm từ mothuthuat
Hiệu ứng xem ảnh dạng lightbox cho tất cả ảnh trong forum có thẻ a.

Vào Thiết kế>>Chỉnh sửa HTML>>Mở rộng. Tìm </head>, chèn đoạn code sau vào ngay trước nó :

Code:

<span style="font-size: small;"><script src='http://sites.google.com/site/uploadplugin/home/jquery.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/uploadplugin/home/b-jquery.lightbox-0.5.js' type='text/javascript'></script>
<link href='http://sites.google.com/site/uploadplugin/home/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

$(function() {
$('#lightbox a[href$=.jpg]').lightBox();
$('#lightbox a[href$=.JPG]').lightBox();
$('#lightbox a[href$=.jpeg]').lightBox();
$('#lightbox a[href$=.JPEG]').lightBox();
$('#lightbox a[href$=.gif]').lightBox();
$('#lightbox a[href$=.GIF]').lightBox();
$('#lightbox a[href$=.bmp]').lightBox();
$('#lightbox a[href$=.BMP]').lightBox();
$('#lightbox a[href$=.png]').lightBox();
$('#lightbox a[href$=.PNG]').lightBox();
$('#lightbox a[href$=.tif]').lightBox();
$('#lightbox a[href$=.TIF]').lightBox();
});
</script> </span>

Sau đó tìm tiếp

Code:

<data:post.body/>

Thay bằng:

Code:

<div id='lightbox'><data:post.body/></div>

Xong xuôi save template lại.

Vào post bài, chèn ảnh bằng đoạn code sau

Code:

<a href="Link ảnh"><img src="link ảnh thu nhỏ" height="kích thước thu nhỏ"></a>

Tải 3 file ở trên:

Code:

http://dl.dropbox.com/u/15035900/CPResources/Blog/lightboxblogger.zip hoặc http://adf.ly/Hcfq

Viết bởi: Eagle8x - diendan.chinhphuc.info