Hiển thị hình ảnh từ Flickr với MooFlick
MooFlick có nhiệm vụ lấy ra các hình ảnh mới nhất từ Flickr JSON feed và hiển thị trên website của bạn. Plugin này của Mootools có thể dễ dàng lấy ra số lượng hình ảnh mới nhất, thu nhỏ lại và hiển thị trên trang với hiệu ứng trực quan. MooFlick chạy được trên hầu hết trên các trình duyệt phổ biến, đã được chạy thử với Safari, Firefox, Chrome, IE7+.
Cách sử dụng :
Trước tiên, bạn cần download MooTools và MooFlick
Sau đó thêm vào trong thẻ <head> của trang web:
<script src="js/mootools.js" type="text/javascript"></script> <script src="js/MooFlick.js" type="text/javascript"></script>
Mã HTML :
<div id="flickr-items"></div>
Mã CSS cơ bản, bạn có thể tùy biến theo style riêng của website mình:
#flickr-items {
width:250px;
margin:15px auto;
height:400px; /* Bạn có thể tùy chỉnh chiều cao hoặc xóa dòng này*/
}
#flickr-items div {
margin:10px auto;
line-height:110px;
}
#flickr-items div.even {
float:left;
clear:left;
}
#flickr-items div.odd {
float:right;
clear:right;
}
Cách gọi plugin đơn giản nhất:
window.addEvent('domready', function(){
var mf = new MooFlick('flickr-items','10901345@N05', {});
})
Trong đó 10901345@N05 chính là flickr user id. flickr-items là id của thẻ div sẽ hiển thị hình ảnh.
Cú pháp:
new MooFlick($('target), 'flickr_user_id', [options]) Ngoài ra MooFlick còn có nhiều tùy chỉnh cho bạn chọn. Bạn có thể xem thêm tại đây
