{"id":25687173,"url":"https://github.com/holyshared/gradually","last_synced_at":"2025-04-23T23:44:03.026Z","repository":{"id":763481,"uuid":"437267","full_name":"holyshared/Gradually","owner":"holyshared","description":"Gradually is an experimental slide show plug-in using the canvas element.","archived":false,"fork":false,"pushed_at":"2011-06-20T09:22:05.000Z","size":9399,"stargazers_count":7,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T17:58:36.850Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://holyshared.github.com/Gradually/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/holyshared.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2009-12-15T00:00:55.000Z","updated_at":"2023-08-23T11:19:45.000Z","dependencies_parsed_at":"2022-07-07T16:18:44.082Z","dependency_job_id":null,"html_url":"https://github.com/holyshared/Gradually","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holyshared%2FGradually","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holyshared%2FGradually/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holyshared%2FGradually/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holyshared%2FGradually/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/holyshared","download_url":"https://codeload.github.com/holyshared/Gradually/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250535057,"owners_count":21446503,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-24T20:08:18.598Z","updated_at":"2025-04-23T23:44:02.854Z","avatar_url":"https://github.com/holyshared.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Gradually\n===========\n\nGradually offers API, a slide show, and a thumbnail gallery using ImageDrawer.\n\n![Screenshot](http://holyshared.github.com/Gradually/snapshot.png)\n\nImageDrawer is needed to use this library.\nPlease download it from the following site.\n\nImageDrawer Library\n[http://mootools.net/forge/p/imagedrawer](http://mootools.net/forge/p/imagedrawer)\n\nThe library must use the one of the build of the following directory.\n\n* Build/gradually.js\n* Build/gradually.slideshow.js\n* Build/gradually.gallery.js\n* Build/image-drawer.js\n\nHow to use\n----------\n\n### Gradually.js\n\n\n#### Step1 Reading of library.\n\nPlease confirm whether imagedrawer is read in the beginning.\nThe script element is added in the head element, and the library is read.\n\n\t#HTML\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.js\"\u003e\u003c/script\u003e\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.Grid.js\"\u003e\u003c/script\u003e\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.Expand.js\"\u003e\u003c/script\u003e\n\n\n\n#### Step2 HTML description of main.\n\nHTML to use Gradually becomes as follows.\n\n\t#HTML\n\t\u003cdiv id=\"gallery\" class=\"gradually\"\u003e\n\t\t\u003cul class=\"graduallyImages\"\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image1 title\" alt=\"image1 discription\" src=\"../Demos/images/img_demo1.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image2 title\" alt=\"image2 discription\" src=\"../Demos/images/img_demo2.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image3 title\" alt=\"image3 discription\" src=\"../Demos/images/img_demo3.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image4 title\" alt=\"image4 discription\" src=\"../Demos/images/img_demo4.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image5 title\" alt=\"image5 discription\" src=\"../Demos/images/img_demo5.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image6 title\" alt=\"image6 discription\" src=\"../Demos/images/img_demo6.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/div\u003e\n\n\n\n#### Step3 Description of javascript.\n\nWhen the description of HTML ends, the following describe javascript. \nImageDrawer is made an instance, and it specifies it for the option of Gradually.\n\n\t#JS\n\tvar drawer = new ImageDrawer.Grid({\n\t\t'gridHeight': 55,\n\t\t'gridWidth': 65,\n\t\t'interval': 70,\n\t\t'duration': 600,\n\t\t'transition': 'expo:in'\n\t});\n\n\tvar container = document.id(\"gradually\");\n\tvar images = container.getElements(\".graduallyImages li img\");\n\n\tvar gradually = new Gradually(container, {\n\t\t'images': images,\n\t\t'drawer': drawer, //Instance of ImageDrawer\n\t\t'onDrawStart': function(panel, drawer) {\n\t\t\t$(\"message\").set(\"html\", \"drawStart\");\n\t\t},\n\t\t'onDrawComplete': function(panel, drawer) {\n\t\t\t$(\"message\").set(\"html\", \"drawComplete\");\n\t\t}\n\t});\n\tgradually.start();\n\nTo switch the image, the set method is executed.\n\n\t#JS\n\tgradually.set(5); //It switches to the fifth image.\n\n\n\n#### Options\n\n* **drawer**: (object) - Instance of ImageDrawer.\n* **images**: (array) - Image element to display.\n* **zIndex**: (number) - The hierarchy and the default of the layer are 9000.\n* **defaultIndex**: (number) - Image displayed first.\n* **onPreload**: (function) - When preload of the image is completed, this event is generated.\n* **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.\n* **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.\n* **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.\n\n##### Panel Object\n\n* **width**: (number) - Width of image.\n* **height**: (number) - Height of image.\n* **title**: (string) - Title of image.\n* **alt**: (string) - Additional information in image.\n* **src**: (string) - Url of image.\n* **image**: (element) - Image element.\n* **canvas**: (element) - Canvas element.\n\n\n\n\n\n\n\n\n\n\n### Gradually.Slideshow.js\n\n#### Step1 Reading of library.\n\nPlease confirm whether imagedrawer is read in the beginning.\nThe script element is added in the head element, and the library is read.\n\n\t#HTML\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.js\"\u003e\u003c/script\u003e\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.Grid.js\"\u003e\u003c/script\u003e\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.Expand.js\"\u003e\u003c/script\u003e\n\n\n\n#### Step2 HTML description of main.\n\nHTML to use Gradually.Slideshow becomes as follows.\n\n\t#HTML\n\t\u003cdiv id=\"gallery\" class=\"gradually\"\u003e\n\t\t\u003cul class=\"graduallyImages\"\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image1 title\" alt=\"image1 discription\" src=\"../Demos/images/img_demo1.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image2 title\" alt=\"image2 discription\" src=\"../Demos/images/img_demo2.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image3 title\" alt=\"image3 discription\" src=\"../Demos/images/img_demo3.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image4 title\" alt=\"image4 discription\" src=\"../Demos/images/img_demo4.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image5 title\" alt=\"image5 discription\" src=\"../Demos/images/img_demo5.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003cimg title=\"image6 title\" alt=\"image6 discription\" src=\"../Demos/images/img_demo6.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\t\u003cp class=\"titlebar\"\u003e\n\t\t\t\u003cstrong class=\"title\"\u003e\u003c/strong\u003e\n\t\t\t\u003cspan class=\"current\"\u003e\u003c/span\u003e\u0026nbsp;/\u0026nbsp;\u003cspan class=\"total\"\u003e\u003c/span\u003e\n\t\t\u003c/p\u003e\n\t\u003c/div\u003e\n\n\n\n#### Step3 Description of javascript.\n\nWhen the description of HTML ends, the following describe javascript. \nImageDrawer is made an instance, and it specifies it for the option of Gradually.Slideshow.\n\n\t#JS\n\tvar expand = new ImageDrawer.Expand({\n\t\t'slideWidth': 65,\n\t\t'interval': 70,\n\t\t'duration': 600,\n\t\t'transition': 'expo:in:out'\n\t});\n\n\tvar gallery = document.id(\"gallery\");\n\tvar images = gallery.getElements(\".graduallyImages li img\");\n\n\tnew Gradually.Slideshow(gallery, {\n\t\t'drawer': expand,  //Instance of ImageDrawer\n\t\t'images': images,\n\t\t'interval': 3000\n\t});\n\n\n\n#### Options\n\n* **drawer**: (object) - Instance of ImageDrawer.\n* **images**: (array) - Image element to display.\n* **zIndex**: (number) - The hierarchy and the default of the layer are 9000.\n* **interval**: (number) - Interval when image is switched.\n* **titleClass**: (string) - Class of element that sets title of present image.\n* **currentClass**: (string) - Class of element that sets present image number.\n* **totalClass**: (string) - Class of element that sets the number of sheets of image.\n* **onPreload**: (function) - When preload of the image is completed, this event is generated.\n* **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.\n* **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.\n* **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.\n\n\n\n\n\n\n\n\n\n\n### Gradually.Gallery.js\n\n\n#### Step1 Reading of library.\n\nPlease confirm whether imagedrawer is read in the beginning.\nThe script element is added in the head element, and the library is read.\n\n\t#HTML\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.js\"\u003e\u003c/script\u003e\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.Grid.js\"\u003e\u003c/script\u003e\n\t\u003cscript type=\"text/javascript\" src=\"../Demos/js/libraries/image-drawer/ImageDrawer.Expand.js\"\u003e\u003c/script\u003e\n\n\n\n#### Step2 HTML description of main.\n\nHTML to use Gradually.Gallery.js becomes as follows.\n\n\t#HTML\n\t\u003cdiv id=\"gallery\" class=\"gradually\"\u003e\n\n\t\t\u003cdiv class=\"graduallyView\"\u003e\n\t\t\t\u003cul class=\"graduallyImages\"\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image1 title\" alt=\"image1 discription\" src=\"../Demos/images/img_demo1.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image2 title\" alt=\"image2 discription\" src=\"../Demos/images/img_demo2.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image3 title\" alt=\"image3 discription\" src=\"../Demos/images/img_demo3.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image4 title\" alt=\"image4 discription\" src=\"../Demos/images/img_demo4.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image5 title\" alt=\"image5 discription\" src=\"../Demos/images/img_demo5.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image6 title\" alt=\"image6 discription\" src=\"../Demos/images/img_demo6.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image7 title\" alt=\"image7 discription\" src=\"../Demos/images/img_demo7.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image8 title\" alt=\"image8 discription\" src=\"../Demos/images/img_demo8.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image9 title\" alt=\"image9 discription\" src=\"../Demos/images/img_demo9.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image10 title\" alt=\"image10 discription\" src=\"../Demos/images/img_demo10.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image11 title\" alt=\"image11 discription\" src=\"../Demos/images/img_demo11.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\t\u003cli\u003e\u003cimg title=\"image12 title\" alt=\"image12 discription\" src=\"../Demos/images/img_demo12.jpg\" width=\"650\" height=\"275\" /\u003e\u003c/li\u003e\n\t\t\t\u003c/ul\u003e\n\t\t\t\u003cp class=\"titlebar\"\u003e\n\t\t\t\t\u003cstrong class=\"title\"\u003e\u003c/strong\u003e\n\t\t\t\t\u003cspan class=\"current\"\u003e\u003c/span\u003e\u0026nbsp;/\u0026nbsp;\u003cspan class=\"total\"\u003e\u003c/span\u003e\n\t\t\t\u003c/p\u003e\n\t\t\u003c/div\u003e\n\n\n\t\t\u003cul class=\"graduallyController\"\u003e\n\t\t\t\u003cli class=\"prev\"\u003e\u003ca title=\"prev\" href=\"#\"\u003eprev\u003c/a\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\n\t\t\t\t\u003cul class=\"graduallyThumbnails\"\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image1 title\" alt=\"image1 discription\" src=\"../Demos/images/img_demo1_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image2 title\" alt=\"image2 discription\" src=\"../Demos/images/img_demo2_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image3 title\" alt=\"image3 discription\" src=\"../Demos/images/img_demo3_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image4 title\" alt=\"image4 discription\" src=\"../Demos/images/img_demo4_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image5 title\" alt=\"image5 discription\" src=\"../Demos/images/img_demo5_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image6 title\" alt=\"image6 discription\" src=\"../Demos/images/img_demo6_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image7 title\" alt=\"image7 discription\" src=\"../Demos/images/img_demo7_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image8 title\" alt=\"image8 discription\" src=\"../Demos/images/img_demo8_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image9 title\" alt=\"image9 discription\" src=\"../Demos/images/img_demo9_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image10 title\" alt=\"image10 discription\" src=\"../Demos/images/img_demo10_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image11 title\" alt=\"image11 discription\" src=\"../Demos/images/img_demo11_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"\"\u003e\u003cimg title=\"image12 title\" alt=\"image12 discription\" src=\"../Demos/images/img_demo12_thumb.jpg\" /\u003e\u003c/a\u003e\u003c/li\u003e\n\t\t\t\t\u003c/ul\u003e\n\t\t\t\u003c/li\u003e\n\t\t\t\u003cli class=\"next\"\u003e\u003ca title=\"next\" href=\"#\"\u003enext\u003c/a\u003e\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/div\u003e\n\n\n\n#### Step3 Description of javascript.\n\nWhen the description of HTML ends, the following describe javascript. \nImageDrawer is made an instance, and it specifies it for the option of Gradually.Gallery.\n\n\t#JS\n\tvar drawer = new ImageDrawer.Expand({\n\t\t'slideWidth': 65,\n\t\t'interval': 70,\n\t\t'duration': 300,\n\t\t'transition': 'expo:out'\n\t});\n\n\tvar container = document.id(\"gallery\");\n\tvar images = $$(\".graduallyImages li img\");\n\n\tvar gallery = new Gradually.Gallery(container, {\n\t\t'images': images,\n\t\t'drawer': drawer,  //Instance of ImageDrawer\n\t\t'controller': {\n\t\t\t'disableOpacity': 0.2\n\t\t}\n\t});\n\n\n\n#### Options\n\n* **drawer**: (object) - Instance of ImageDrawer.\n* **images**: (array) - Image element to display.\n* **zIndex**: (number) - The hierarchy and the default of the layer are 9000.\n* **titleClass**: (string) - Class of element that sets title of present image.\n* **currentClass**: (string) - Class of element that sets present image number.\n* **totalClass**: (string) - Class of element that sets the number of sheets of image.\n* **controller**: (object) - Thumbnail controller's options.\n* **onPreload**: (function) - When preload of the image is completed, this event is generated.\n* **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.\n* **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.\n* **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.\n\n\n\n##### Thumbnail controller options\n\n* **defaultIndex**: (number) - Image displayed first. Default is 0.\n* **prepage**: (number) - Number of displayed thumbnail images. Default is 5.\n* **controllerClass**: (string) - Thumbnail controller's class. Default is 'graduallyController'.\n* **containerClass**: (string) - Class of thumbnail image. Default is 'graduallyThumbnails'.\n* **prevClass**: (string) - Class of previous button. Default is 'prev'.\n* **nextClass**: (string) - Class of previous button. Default is 'next'.\n* **disableOpacity**: (number) - Transparencys other than current image. Default is 0.4.\n\n\nMethod of build\n------------------------------\n\n### Only Gradually\npackager build Gradually/Gradually +use-only Gradually\n\n### Slide show of Gradually\npackager build Gradually/Gradually.Slideshow +use-only Gradually\n\n### Gallery of Gradually\npackager build Gradually/Gradually.Gallery +use-only Gradually\n\n### All of Gradually\npackager build Gradually/* +use-only Gradually\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholyshared%2Fgradually","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fholyshared%2Fgradually","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholyshared%2Fgradually/lists"}