Hiển thị hình ảnh trong PicasaWeb của bạn :-)
Hôm nay mình giới thiệu các bạn làm sao để hiển thị hình ảnh trong Picasaweb trong website của mình. Các bạn có thể thấy demo cụ thể ở ngay chính website này 
Bài viết sau mình sẽ hướng dẫn các bạn hiển thị hình ảnh của mình trong Flickr há.
Mình mất cả buổi để thực hiện tính năng này. Hy vọng bài viết này sẽ giúp bạn có thể thực hiện nhanh hơn để làm đẹp trang web của mình, cũng như tiết kiệm bandwidth, dung lượng host và tốc độ hiển thị (tốc độ truy xuất đến Google thì khỏi nói hén ;->)
Bước 1:
Mình phải chuẩn bị container cho kết quả HTML: <div id="photos" album="SNNo0108" no="9"></div>
Đoạn script này nghĩa là mình đang chuẩn bị hiển thị 9 hình ảnh đầu tiên trong album SNNo0108 đó
Bước 2:
Mình phải include thư viện jquery.lightbox.js và file javascript do mình viết tối qua
<script type="text/javascript" src="/Content/scripts/jquery.lightbox.js"></script>
<script type="text/javascript" src="/Content/scripts/gphoto.js"></script>
<script type="text/javascript">
$(function() {
$("#photos").gphoto({
callback: function() {
$("#photos a[@rel='lightbox']").lightBox();
}
});
});
Bước 3:
Sửa lại account của bạn trong Google. Bạn có thể chỉnh sửa script để config tên account của bạn như cách mình làm với số lượng ảnh và tên album như trên.
// author: tdminhvn@gmail.com
// last updated: 16/10/2008
$.fn.gphoto = function(settings) {
return this.each(function() {
var $container = $(this);
var tmpl = '<li><a href="{0}" title="" target="_blank" rel="lightbox"><img src="{1}" alt="" /></a></li>';
$.ajax({
type: 'GET',
url: '/proxy.axd?q=' + encodeURIComponent('http://picasaweb.google.com/data/feed/api/user/tdminhvn/album/' + $(this).attr("album") + '?kind=photo&alt=json-in-script&callback=renderer&access=public&start-index=1&max-results=' + $(this).attr("no")),
dataType: 'json',
dataFilter: function(data, type) {
return data.substring(data.indexOf("{"), data.lastIndexOf("}") + 1);
},
success: function(data) {
var $ul = $container.append("<ul></ul>").find("ul");
$(data.feed.entry).each(function() {
html = tmpl.replace("{0}", this.content.src + "?imgmax=640")
.replace("{1}", this.media$group.media$thumbnail[0].url);
$ul.append(html);
});
if (settings.callback)
settings.callback();
}
});
});
};
Vậy là xong rồi đó. Nhớ là vì mình đang request ajax trên domain khác nên bạn phải viết file proxy nhé.
Nếu có thắc mắc gì thì cứ comment cho mình. Mình sẽ trả lời sớm nhất có thể.
1, Javascript, Lập trình web, jQuery
Ðược xem 1430 lần, 1 hôm nay
