{"id":25899854,"url":"https://github.com/oriongunning/gridder","last_synced_at":"2025-03-03T02:01:38.933Z","repository":{"id":9684253,"uuid":"11629582","full_name":"orion3dgames/gridder","owner":"orion3dgames","description":"A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.","archived":false,"fork":false,"pushed_at":"2023-08-24T06:29:41.000Z","size":3748,"stargazers_count":461,"open_issues_count":20,"forks_count":130,"subscribers_count":34,"default_branch":"master","last_synced_at":"2024-05-21T04:13:19.379Z","etag":null,"topics":["gallery","gridder","jquery-plugin"],"latest_commit_sha":null,"homepage":"http://orion3dgames.github.io/gridder/","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/orion3dgames.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2013-07-24T08:05:11.000Z","updated_at":"2024-01-17T15:59:18.000Z","dependencies_parsed_at":"2023-08-24T07:45:06.899Z","dependency_job_id":"e85e8dd5-0df1-466d-85f6-13e61c64dbb7","html_url":"https://github.com/orion3dgames/gridder","commit_stats":{"total_commits":127,"total_committers":9,"mean_commits":14.11111111111111,"dds":0.3307086614173228,"last_synced_commit":"b909f8ef8c5936340f300b9a08603a0329c970df"},"previous_names":["orion3dgames/gridder","oriongunning/gridder"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orion3dgames%2Fgridder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orion3dgames%2Fgridder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orion3dgames%2Fgridder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orion3dgames%2Fgridder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orion3dgames","download_url":"https://codeload.github.com/orion3dgames/gridder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241596243,"owners_count":19988042,"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":["gallery","gridder","jquery-plugin"],"created_at":"2025-03-03T02:01:08.172Z","updated_at":"2025-03-03T02:01:38.780Z","avatar_url":"https://github.com/orion3dgames.png","language":"JavaScript","readme":"\u003e **WARNING**: ⚠⚠ this version has been deprecated and a new fully JS version is being developed here: https://github.com/orion3dgames/gridder-js ⚠⚠\n\n***\n\n# jQuery GRIDDER 1.5.0 \u003ca href='https://ko-fi.com/A748382' target='_blank'\u003e\u003cimg height='32' style='border:0px;height:32px;float: right;' src='https://az743702.vo.msecnd.net/cdn/kofi1.png?v=a' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e [![unheap](https://img.shields.io/badge/Featured%20on-Unheap-orange.svg)](https://www.unheap.com/media/galleries/gridder/) [![CDNJS version](https://img.shields.io/cdnjs/v/gridder.svg)](https://cdnjs.com/libraries/gridder)\n\n\u003cimg width=\"480\" height=\"305\" src='https://i.giphy.com/xT8qBaPahUIhtN9HwI.gif' border='0' alt='Gridder Example' /\u003e\n=======\n\n### A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.\n\nWe have all searched images on Google, so you probably noticed the interesting expanding preview when you click on a thumbnail. It’s a very nice effect and practical, allowing you quickly see more details without having to reload a new page. This plugin allows you to recreate a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link\n\n- Demo GRIDDER v1.4.0 : https://oriongunning.github.io/gridder/\n- Alternative Demo : httsp://www.oriongunning.com/demo/gridder\n\n=======\n\n## Alternative version of Gridder that support html 5 pushstate (REQUIRES SERVER KNOWLEDGE)\n\nLive demo GRIDDER v2 : https://www.oriongunning.com/demo/gridder-ajax/demo.php\n- Github link for V2 : https://github.com/orion3dgames/gridder-ajax\n \n=======\n\n### NEW\n*24 June 2015\nYou can now load content via ajax. Simply replace the #ID with an URL.\n\n=======\n\n### FEATURES\n- Multiple instances\n- Really easy to use and customize\n- Expanding preview with details\n- Smooth Scrolling\n- Callbacks (so you can launch other plugins)\n\n### Coming soon ...\n- Hot Linking\n\n=======\n\n## Usage\n\n1. Include jQuery:\n\n\t```html\n\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js\"\u003e\u003c/script\u003e\n\t```\n\n2. Include plugin's code:\n\n\t```html\n\t\u003cscript src=\"dist/jquery.gridder.min.js\"\u003e\u003c/script\u003e\n\t```\n\n3. HTML\n\n\t```html\n    \n    \u003c!-- Gridder navigation --\u003e\n\t\u003cul class=\"gridder\"\u003e\n\n         \u003c!-- You can load specify which content is loaded by specifying the #ID of the div where the content is  --\u003e\n        \u003cli class=\"gridder-list\" data-griddercontent=\"#content1\"\u003e\n            \u003cimg src=\"https://placehold.it/600x400\" /\u003e\n        \u003c/li\u003e\n        \u003cli class=\"gridder-list\" data-griddercontent=\"#content2\"\u003e\n            \u003cimg src=\"https://placehold.it/600x400\" /\u003e\n        \u003c/li\u003e\n        \u003cli class=\"gridder-list\" data-griddercontent=\"#content3\"\u003e\n            \u003cimg src=\"https://placehold.it/600x400\" /\u003e\n        \u003c/li\u003e\n\n        \u003c!-- You can also load html/ajax pages by replacing the #ID with a URL --\u003e\n        \u003cli class=\"gridder-list\" data-griddercontent=\"/content.html\"\u003e\n            \u003cimg src=\"https://placehold.it/600x400\" /\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\n    \u003c!-- Gridder content --\u003e\n    \u003cdiv id=\"content1\" class=\"gridder-content\"\u003e Content goes here... \u003c/div\u003e\n    \u003cdiv id=\"content2\" class=\"gridder-content\"\u003e Content goes here... \u003c/div\u003e\n    \u003cdiv id=\"content3\" class=\"gridder-content\"\u003e Content goes here... \u003c/div\u003e\n\n\t```\n\n3. Call the plugin:\n\n    ```javascript\n    \u003cscript\u003e\n    $(function() {\n\n        // Call Gridder\n        $('.gridder').gridderExpander({\n            scroll: true,\n            scrollOffset: 30,\n            scrollTo: \"panel\",                  // panel or listitem\n            animationSpeed: 400,\n            animationEasing: \"easeInOutExpo\",\n            showNav: true,                      // Show Navigation\n            nextText: \"Next\",                   // Next button text\n            prevText: \"Previous\",               // Previous button text\n            closeText: \"Close\",                 // Close button text\n            onStart: function(){\n                //Gridder Inititialized\n            },\n            onContent: function(){\n                //Gridder Content Loaded\n            },\n            onClosed: function(){\n                //Gridder Closed\n            }\n        });\n\n    });\n    \u003c/script\u003e\n    ```\n\n\u003ca rel=\"license\" href=\"https://creativecommons.org/licenses/by/3.0/\"\u003e\u003cimg alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by/3.0/88x31.png\" /\u003e\u003c/a\u003e\u003cbr /\u003eThis work is licensed under a \u003ca rel=\"license\" href=\"https://creativecommons.org/licenses/by/3.0/\"\u003eCreative Commons Attribution 3.0 Unported License\u003c/a\u003e.\n\n\n","funding_links":["https://ko-fi.com/A748382'"],"categories":["Animation","JavaScript","🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Images, Maps and Charts","Image Effect"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foriongunning%2Fgridder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foriongunning%2Fgridder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foriongunning%2Fgridder/lists"}