{"id":23772312,"url":"https://github.com/lbenie/angular-elastic-grid","last_synced_at":"2026-05-09T19:42:35.349Z","repository":{"id":50927688,"uuid":"48389214","full_name":"lbenie/angular-elastic-grid","owner":"lbenie","description":"Wrapper of jquery-elastic-grid for angular 1.x https://github.com/vukhanhtruong/jquery-elastic-grid","archived":false,"fork":false,"pushed_at":"2021-05-27T13:09:25.000Z","size":69,"stargazers_count":0,"open_issues_count":16,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T05:02:19.998Z","etag":null,"topics":["angular","angularjs","bower","filter","grid","grid-layout","grid-system","javascript","javascript-library","npm","npm-package"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lbenie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-21T19:08:51.000Z","updated_at":"2017-05-07T23:10:34.000Z","dependencies_parsed_at":"2022-08-25T12:41:41.051Z","dependency_job_id":null,"html_url":"https://github.com/lbenie/angular-elastic-grid","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbenie%2Fangular-elastic-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbenie%2Fangular-elastic-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbenie%2Fangular-elastic-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lbenie%2Fangular-elastic-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lbenie","download_url":"https://codeload.github.com/lbenie/angular-elastic-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239958311,"owners_count":19724926,"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":["angular","angularjs","bower","filter","grid","grid-layout","grid-system","javascript","javascript-library","npm","npm-package"],"created_at":"2025-01-01T04:54:49.870Z","updated_at":"2026-04-01T21:30:16.441Z","avatar_url":"https://github.com/lbenie.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-elastic-grid\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/lbenie/angular-elastic-grid.svg)](https://greenkeeper.io/)\n\n[![Build Status](https://travis-ci.org/lbenie/angular-elastic-grid.svg?branch=master\u0026maxAge=2592000)](https://travis-ci.org/lbenie/angular-elastic-grid) [![devDependency Status](https://david-dm.org/lbenie/angular-elastic-grid/dev-status.svg?maxAge=2592000)](https://david-dm.org/lbenie/angular-elastic-grid#info=devDependencies) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?maxAge=2592000)](http://commitizen.github.io/cz-cli/) [![version](https://img.shields.io/npm/v/angular-elastic-grid.svg?maxAge=2592000)](https://www.npmjs.org/package/angular-elastic-grid) [![npm](https://img.shields.io/npm/dt/angular-elastic-grid.svg?maxAge=2592000)](https://www.npmjs.org/package/angular-elastic-grid)\n[![GitHub release](https://img.shields.io/github/release/lbenie/angular-elastic-grid.svg?maxAge=2592000)](https://github.com/lbenie/angular-elastic-grid/releases/)\n![node](https://img.shields.io/node/v/angular-elastic-grid.svg) [![license](https://img.shields.io/github/license/lbenie/angular-elastic-grid.svg?maxAge=2592000)](https://github.com/lbenie/angular-elastic-grid/blob/master/LICENSE)\n\n## Installation\n\ninstall `angular-elastic-grid` by bower or npm running the following command\n\n```sh\nbower install angular-elastic-grid --save\nor\nnpm install angular-elastic-grid --save\n```\n\nor download\n[here](https://raw.githubusercontent.com/lbenie/angular-elastic-grid/master/dist/angular-elastic-grid.min.js) then\nappend `angular-elastic-grid.min.js` in to end of body, before your project, after the `angular` and the other\nlibs.\n\n```html\n\u003c!--using bower--\u003e\n...\n...\n\u003cscript src=\"../bower_components/angular-elastic-grid/dist/angular-elastic-grid.min.js\"\u003e\u003c/script\u003e\n...\n...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```html\n\u003c!--using npm--\u003e\n...\n...\n\u003cscript src=\"../node_modules/angular-elastic-grid/dist/angular-elastic-grid.min.js\"\u003e\u003c/script\u003e\n...\n...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nadd `angular-elastic-grid` as a module dependency for your app\n\n```js\nangular.module('my.app', [\n    'angular-elastic-grid'\n])\n```\n\n### Usage\n\nThere are eight filter options for `elastic_grid.js`\n\n-   `popup`\n-   `none`\n-   `moveup`\n-   `scaleup`\n-   `fallperspective`\n-   `helix`\n-   `fly`\n-   `flip`\n\nitems must be an array.\nfilter uses the 'none' filter if no filter is defined.\n\nOptionals: direction, speed, height, delay and inverse.\n\n```html\n\u003cdiv elastic-grid\u003e\n\u003c/div\u003e\n...\nor\n...\n\u003celastic-grid\u003e\u003c/elastic-grid\u003e\n...\nor\n...\n\u003celastic-grid items=\"[{\n  title: 'Title 1',\n  description: 'This is a description.',\n  thumbnail: ['http://placehold.it/350x150'],\n  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],\n  button_list: [\n    { title: 'Demo', url: 'http://placehold.it/450x350'},\n    { title: 'Download', url: 'http://placehold.it/450x350'}\n  ],\n  tags: ['Test']\n}, {\n  title: 'Title 2',\n  description: 'This is a description.',\n  thumbnail: ['http://placehold.it/350x150'],\n  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],\n  button_list: [\n    { title: 'Demo', url: 'http://placehold.it/450x350'},\n    { title: 'Download', url: 'http://placehold.it/450x350'}\n  ],\n  tags: ['Test, Title2']\n}, {\n  title: 'Title 3',\n  description: 'This is a description.',\n  thumbnail: ['http://placehold.it/350x150'],\n  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],\n  button_list: [\n    { title: 'Demo', url: 'http://placehold.it/450x350'},\n    { title: 'Download', url: 'http://placehold.it/450x350'}\n  ],\n  tags: ['Test, Title1']\n}]\" filter=\"popup\"\u003e\u003c/elastic-grid\u003e\n...\nor\n...\n\u003celastic-grid items=\"[{\n  title: 'Title 1',\n  description: 'This is a description.',\n  thumbnail: ['http://placehold.it/350x150'],\n  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],\n  button_list: [\n    { title: 'Demo', url: 'http://placehold.it/450x350'},\n    { title: 'Download', url: 'http://placehold.it/450x350'}\n  ],\n  tags: ['Test']\n}, {\n  title: 'Title 2',\n  description: 'This is a description.',\n  thumbnail: ['http://placehold.it/350x150'],\n  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],\n  button_list: [\n    { title: 'Demo', url: 'http://placehold.it/450x350'},\n    { title: 'Download', url: 'http://placehold.it/450x350'}\n  ],\n  tags: ['Test, Title2']\n}, {\n  title: 'Title 3',\n  description: 'This is a description.',\n  thumbnail: ['http://placehold.it/350x150'],\n  large: ['http://placehold.it/450x350', 'http://placehold.it/450x350', 'http://placehold.it/450x350'],\n  button_list: [\n    { title: 'Demo', url: 'http://placehold.it/450x350'},\n    { title: 'Download', url: 'http://placehold.it/450x350'}\n  ],\n  tags: ['Test, Title1']\n}]\" filter=\"popup\" direction=true speed=500 height=500 delay=0 inverse=false\u003e \u003c/elastic-grid\u003e\n...\n...\n```\n\n### Development\n\n-   install node and bower on your environment\n\ncd to your desired folder and clone `angular-elastic-grid` repository\n\n```sh\ngit clone https://github.com/lbenie/angular-elastic-grid\ncd angular-elastic-grid\n```\n\ninstall all project dependencies\n\n```sh\nnpm install\nbower install\n```\n\nserve automated test once\n\n```sh\n#unit test without live reload\ngulp test-src\n```\n\nserve automated tests and builds\n\n```sh\n#unit test with live reload + build\ngulp\n```\n\nbuild all to distribution\n\n```sh\n#this generates minified src at `dist/angular-elastic-grid.min.js`\ngulp build\n```\n\n---\n\n**Notes:**\n\n-   To contribute with this awesome project, just open an issue, then fork the project and make a new branch to do your\nwork.\n\n-   Run `gulp build` before making your PR.\n\n-   [Changelog](https://github.com/lbenie/angular-elastic-grid/releases)\n\nFeel free to open issues if you run into a problem or if you just have suggestions. PR´s are always welcome.\n\n---\n\n#### License\n\n`angular-elastic-grid` is open-sourced software licensed under [MIT](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbenie%2Fangular-elastic-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbenie%2Fangular-elastic-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbenie%2Fangular-elastic-grid/lists"}