Bạn có thể tùy biến các giá trị: chiều rộng, chiều cao, thời gian chuyển ảnh, thời gian chờ xem ảnh.

Cách sử dụng

Gradually yêu cầu mã HTML rất đơn giản, bạn có thể lấy giá trị tử thẻ alt để cung cấp caption cho ảnh.

<div id="container">
  <ul id="gradually-container" class="gradually">
    <li><img title="image1 title" alt="image1 discription" src="images/demo1.jpg" width="650" height="275" /></li>
    <li><img title="image2 title" alt="image2 discription" src="images/demo2.jpg" width="650" height="275" /></li>
    <li><img title="image3 title" alt="image3 discription" src="images/demo1.jpg" width="650" height="275" /></li>
    <li><img title="image4 title" alt="image4 discription" src="images/demo2.jpg" width="650" height="275" /></li>
    <li><img title="image5 title" alt="image5 discription" src="images/demo1.jpg" width="650" height="275" /></li>
    <li><img title="image6 title" alt="image6 discription" src="images/demo2.jpg" width="650" height="275" /></li>
  </ul>
  <p class="information">&nbsp;</p>
</div>

Và bạn cần thêm vào header của trang HTML như sau:

<link rel="stylesheet" type="text/css" href="css/gradually.css" media="screen,print" />
<script type="text/javascript" src="js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2.4.2-more.js"></script>
<script type="text/javascript" src="js/Gradually.js"></script>

Gọi Gradually lên làm việc:

window.addEvent("domready", function(){
	var container = null, sources = null;
	var options = {
		'panelHeight': 55,
		'panelWidth': 65,
		'interval': 3000,
		'duration': 1000,
		'zIndex': 9000,
		'onStart': function() {
			$("container").getElement("p.information").set("html", "now loading....");
		},
		'onPreload': function(images) {
			$("container").getElement("p.information").set("html", images.length.toString() + "loaded");
		},
		'onChange': function(image) {
			$("container").getElement("p.information").set("html", image.title + " : " + image.alt);
		}
	};
	
	var container	= $("gradually-container");
	var sources		= $("gradually-container").getElements("img");
	new Gradually(container, sources, options);
});

Bạn có thể xem demo hoặc tải về file js và demo ở đây (bản 1.0)