{"id":19674658,"url":"https://github.com/daedlock/gridify","last_synced_at":"2026-06-11T16:31:56.739Z","repository":{"id":31172373,"uuid":"34732606","full_name":"daedlock/gridify","owner":"daedlock","description":"a jQuery plugin to gridify pages achieving a zoomed in gallery effect","archived":false,"fork":false,"pushed_at":"2015-05-01T04:26:36.000Z","size":3024,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-28T00:25:40.746Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/daedlock.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":"contributing.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-28T13:37:45.000Z","updated_at":"2021-07-27T03:02:03.000Z","dependencies_parsed_at":"2022-08-31T00:01:47.019Z","dependency_job_id":null,"html_url":"https://github.com/daedlock/gridify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/daedlock/gridify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daedlock%2Fgridify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daedlock%2Fgridify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daedlock%2Fgridify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daedlock%2Fgridify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daedlock","download_url":"https://codeload.github.com/daedlock/gridify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daedlock%2Fgridify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34208762,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2024-11-11T17:19:17.033Z","updated_at":"2026-06-11T16:31:56.718Z","avatar_url":"https://github.com/daedlock.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gridify\n\n\u003e a jQuery plugin that utilizes CSS3 transformations to transform your website into a multi page grid with smooth animations.\n\n\n![](https://github.com/daedlock/gridify/raw/master/demo/images/Preview.gif)\n\n\n\n## Dependencies\n* [jQuery](https://jquery.com/)\n* [VelocityJS](http://julian.com/research/velocity/)\n          \n      \n      \n## Installation\n\n###Bower\n\n```\nbower install gridify --save\n```\n\nJust make sure that _jquery_ and _velocity.js_ is included before gridify because it depends on them.\n\n\n \n\n###Manually\n\nDownload the [production version][min] or the [development version][max]. and make sure to grab the latest velocityjs from [here](http://julian.com/research/velocity/)\n\n[min]: https://raw.githubusercontent.com/daedlock/jquery-gridify/master/dist/jquery.gridify.min.js\n[max]: https://raw.githubusercontent.com/daedlock/jquery-gridify/master/dist/jquery.gridify.js\n \nIn your web page:\n\n```html\n\u003cscript src=\"/path/to/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/velocity.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/jquery.gridify.min.js\"\u003e\u003c/script\u003e\n```\n\n\n## Usage\n__HTML__:\n\n```\n\u003cdiv class=\"yourSelector\"\u003e\n\t\u003cdiv class=\"page\"\u003e\n\t\t...\n\t\u003c/div\u003e\n\t\u003cdiv class=\"page\"\u003e\n\t\t...\n\t\u003c/div\u003e\n\t\u003cdiv class=\"page\"\u003e\n\t\t...\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**Javascript**:\n\n```\nvar grid = new $.Gridify($(\".yourSelector\"));\n```\n\nor\n\n```\nvar grid = new $.Gridify($(\".yourSelector\"),{\n\t//options\n});\n\n```\n\nthis will initialize the page grid with the default behavior, you can extend the default behavior and extend the functionality by taking advantage of the `moveTo(i,j)` method. It normally gives you a way to manually move to the page at the given index (i,j).\n\n```\ngrid.moveTo(0,1) //will move to the element at row 0 and column 1\n\n```\n      \n        \n          \n          \n## Options\n\n\n| key  | type | default  | description  |\n|---|---|---|---|\n| pageSelector | string |  .page |  the page CSS Selector |\n| pagesPerRow  | integer | 3  | number of pages per row. In otherwords, the threshold before inserting a new row into the grid  |\n| arrowKeysEnabled | boolean  | true  | Enable navigating between grid pages using keyboard arrows  |\n| onAfterPageSlide | function | `function(i,j){}`  | Fires after navigating to a page. The i,j represents the current page position in 2D space  |\n| onBeforePageSlide  | function | `function(i,j){}`   | Fires before navigating to a page The i,j represents the current page position in 2D space  |\n|  arrows | no | check the sample options for default values| CSS Selector for arrows upon which the page movement is fired  |\n\n\nHere is a a json object with the default values for all options\n\n```\n  var DEFAULTS = {\n      arrows: {\n        left: \".gridify-arrow-left\",\n        right: \".gridify-arrow-right\",\n        top: \".gridify-arrow-up\",\n        bottom: \".gridify-arrow-down\"\n      },\n      pageSelector: \".page\",\n      pagesPerRow: 3,\n      arrowKeysEnabled: true,\n      onAfterPageSlide: function (i,j) {\n      },\n      onBeforePageSlide: function (i,j) {\n      }\n  };\n```\n\n## License\n\nMIT © Hossam Saraya\n\n\u003e The MIT License (MIT)\n\n\u003e Copyright (c) \u003cyear\u003e \u003ccopyright holders\u003e\n\n\u003e Permission is hereby granted, free of charge, to any person obtaining a copy\n\u003e of this software and associated documentation files (the \"Software\"), to deal\n\u003e in the Software without restriction, including without limitation the rights\n\u003e to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n\u003e copies of the Software, and to permit persons to whom the Software is\n\u003e furnished to do so, subject to the following conditions:\n\n\u003e The above copyright notice and this permission notice shall be included in\n\u003e all copies or substantial portions of the Software.\n\n\u003e THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n\u003e IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n\u003e FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n\u003e AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n\u003e LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n\u003e OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n\u003e THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaedlock%2Fgridify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaedlock%2Fgridify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaedlock%2Fgridify/lists"}