Trình diễn hình ảnh với MooFlow
MooFlow, một plugin cho MooTools giúp bạn dễ dàng tạo slideshow ảnh cùng chú thích đi kèm với hiệu ứng reflect.
Plugin này có nhiều chức năng cho bạn chọn
- Kết hợp với Ajax
- Kết hợp với Json
- Hỗ trợ Milkbox và ReMooz
- Xem hình với kích cỡ lớn
- Link đến trang web ngoài
Cách sử dụng
Tất cả các file bạn cần là mootools-core.js , mootools-more.js , MooFlow.js , MooFlow.css và chèn chúng vào thẻ <head>
<!-- MooFlow stylesheet -->
<link rel="stylesheet" type="text/css" href="css/MooFlow.css" />
<!-- Mootools -->
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<!-- MooFlow plugin -->
<script type="text/javascript" src="js/MooFlow.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var mf = new MooFlow($('MooFlow'), {
startIndex: 5,
useSlider: true,
useAutoPlay: true,
useCaption: true,
useResize: true,
useWindowResize: true,
useMouseWheel: true,
useKeyInput: true
});
});
</script>
Mã HTML bạn cần sử dụng sẽ là :
<div id="MooFlow"> <div><img src="img1" title="@2" alt="Ein @-Symbol" /></div> <div><img src="img2" title="Stimme von oben" alt="Lautsprecherturm" /></div> </div>
MooFlow sẽ tự lấy thuộc tính title làm caption, thuộc tính alt làm mô tả chi tiết ( longer description ) đầy đủ .
Bạn có thể vào đây để tìm hiểu thêm cách sử dụng, các lựa chọn tùy biến của MooFlow
