Trình diễn hình ảnh với MooFlow

Đăng bởi supernovice trong mục Hướng dẫn vào 11 tháng 3, 2010 | Comments

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

Bạn có thích bài viết này?

supernovice's picture

supernovice

Phạm Văn Du - Web developer , SEO Guru tại Bình Dương

Trang chủ - Twitter