https://github.com/holyshared/gradually
Gradually is an experimental slide show plug-in using the canvas element.
https://github.com/holyshared/gradually
Last synced: about 1 year ago
JSON representation
Gradually is an experimental slide show plug-in using the canvas element.
- Host: GitHub
- URL: https://github.com/holyshared/gradually
- Owner: holyshared
- Created: 2009-12-15T00:00:55.000Z (over 16 years ago)
- Default Branch: master
- Last Pushed: 2011-06-20T09:22:05.000Z (almost 15 years ago)
- Last Synced: 2025-04-21T17:58:36.850Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://holyshared.github.com/Gradually/
- Size: 8.96 MB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Gradually
===========
Gradually offers API, a slide show, and a thumbnail gallery using ImageDrawer.
ImageDrawer is needed to use this library.
Please download it from the following site.
ImageDrawer Library
[http://mootools.net/forge/p/imagedrawer](http://mootools.net/forge/p/imagedrawer)
The library must use the one of the build of the following directory.
* Build/gradually.js
* Build/gradually.slideshow.js
* Build/gradually.gallery.js
* Build/image-drawer.js
How to use
----------
### Gradually.js
#### 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.
#HTML
#### Step2 HTML description of main.
HTML to use Gradually becomes as follows.
#HTML
#### 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.
#JS
var drawer = new ImageDrawer.Grid({
'gridHeight': 55,
'gridWidth': 65,
'interval': 70,
'duration': 600,
'transition': 'expo:in'
});
var container = document.id("gradually");
var images = container.getElements(".graduallyImages li img");
var gradually = new Gradually(container, {
'images': images,
'drawer': drawer, //Instance of ImageDrawer
'onDrawStart': function(panel, drawer) {
$("message").set("html", "drawStart");
},
'onDrawComplete': function(panel, drawer) {
$("message").set("html", "drawComplete");
}
});
gradually.start();
To switch the image, the set method is executed.
#JS
gradually.set(5); //It switches to the fifth image.
#### Options
* **drawer**: (object) - Instance of ImageDrawer.
* **images**: (array) - Image element to display.
* **zIndex**: (number) - The hierarchy and the default of the layer are 9000.
* **defaultIndex**: (number) - Image displayed first.
* **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.
##### Panel Object
* **width**: (number) - Width of image.
* **height**: (number) - Height of image.
* **title**: (string) - Title of image.
* **alt**: (string) - Additional information in image.
* **src**: (string) - Url of image.
* **image**: (element) - Image element.
* **canvas**: (element) - Canvas element.
### Gradually.Slideshow.js
#### 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.
#HTML
#### Step2 HTML description of main.
HTML to use Gradually.Slideshow becomes as follows.
#HTML
#### 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.
#JS
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
});
#### Options
* **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.
### Gradually.Gallery.js
#### 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.
#HTML
#### Step2 HTML description of main.
HTML to use Gradually.Gallery.js becomes as follows.
#HTML
#### 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.Gallery.
#JS
var drawer = new ImageDrawer.Expand({
'slideWidth': 65,
'interval': 70,
'duration': 300,
'transition': 'expo:out'
});
var container = document.id("gallery");
var images = $$(".graduallyImages li img");
var gallery = new Gradually.Gallery(container, {
'images': images,
'drawer': drawer, //Instance of ImageDrawer
'controller': {
'disableOpacity': 0.2
}
});
#### Options
* **drawer**: (object) - Instance of ImageDrawer.
* **images**: (array) - Image element to display.
* **zIndex**: (number) - The hierarchy and the default of the layer are 9000.
* **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.
* **controller**: (object) - Thumbnail controller's options.
* **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.
##### Thumbnail controller options
* **defaultIndex**: (number) - Image displayed first. Default is 0.
* **prepage**: (number) - Number of displayed thumbnail images. Default is 5.
* **controllerClass**: (string) - Thumbnail controller's class. Default is 'graduallyController'.
* **containerClass**: (string) - Class of thumbnail image. Default is 'graduallyThumbnails'.
* **prevClass**: (string) - Class of previous button. Default is 'prev'.
* **nextClass**: (string) - Class of previous button. Default is 'next'.
* **disableOpacity**: (number) - Transparencys other than current image. Default is 0.4.
Method of build
------------------------------
### Only Gradually
packager build Gradually/Gradually +use-only Gradually
### Slide show of Gradually
packager build Gradually/Gradually.Slideshow +use-only Gradually
### Gallery of Gradually
packager build Gradually/Gradually.Gallery +use-only Gradually
### All of Gradually
packager build Gradually/* +use-only Gradually
