Gradually

Step1 Reading of library.

Please confirm whether imagedrawer is read in the beginning.
The script element is added in the head element, and the library is read.

	<script type="text/javascript" src="../Demos/js/libraries/image-drawer/ImageDrawer.js"></script>
	<script type="text/javascript" src="../Demos/js/libraries/image-drawer/ImageDrawer.Grid.js"></script>
	<script type="text/javascript" src="../Demos/js/libraries/image-drawer/ImageDrawer.Expand.js"></script>

Step2 HTML description of main.

HTML to use Gradually.Slideshow becomes as follows.

	<div id="gallery" class="gradually">
		<ul class="graduallyImages">
			<li><img title="image1 title" alt="image1 discription" src="../Demos/images/img_demo1.jpg" width="650" height="275" /></li>
			<li><img title="image2 title" alt="image2 discription" src="../Demos/images/img_demo2.jpg" width="650" height="275" /></li>
			<li><img title="image3 title" alt="image3 discription" src="../Demos/images/img_demo3.jpg" width="650" height="275" /></li>
			<li><img title="image4 title" alt="image4 discription" src="../Demos/images/img_demo4.jpg" width="650" height="275" /></li>
			<li><img title="image5 title" alt="image5 discription" src="../Demos/images/img_demo5.jpg" width="650" height="275" /></li>
			<li><img title="image6 title" alt="image6 discription" src="../Demos/images/img_demo6.jpg" width="650" height="275" /></li>
		</ul>
		<p class="titlebar">
			<strong class="title"></strong>
			<span class="current"></span> / <span class="total"></span>
		</p>
	</div>

Step3 Description of javascript.

When the description of HTML ends, the following describe javascript.
ImageDrawer is made an instance, and it specifies it for the option of Gradually.Slideshow.

	var expand = new ImageDrawer.Expand({
		'slideWidth': 65,
		'interval': 70,
		'duration': 600,
		'transition': 'expo:in:out'
	});

	var gallery = document.id("gallery");
	var images = gallery.getElements(".graduallyImages li img");

	new Gradually.Slideshow(gallery, {
		'drawer': expand,  //Instance of ImageDrawer
		'images': images,
		'interval': 3000
	});

Version 2.0

• drawer: (object) - Instance of ImageDrawer.
• images: (array) - Image element to display.
• zIndex: (number) - The hierarchy and the default of the layer are 9000.
• interval: (number) - Interval when image is switched.
• titleClass: (string) - Class of element that sets title of present image.
• currentClass: (string) - Class of element that sets present image number.
• totalClass: (string) - Class of element that sets the number of sheets of image.
• onPreload: (function) - When preload of the image is completed, this event is generated.
• onSelect: (function) - When the image changes, it is generated. In the first argument, the number and the second argument in the selected image are the panel object.
• onDrawStart: (function) - When drawing of the image begins, it is generated. The first argument is a panel object, and the second argument is an instance of ImageDrawer.
• onDrawComplete: (function) - When drawing of the image is completed, it is generated. The first argument is a panel object, and the second argument is an instance of ImageDrawer.