{"id":16232162,"url":"https://github.com/ryanfitzgerald/liquo","last_synced_at":"2025-08-26T03:11:05.358Z","repository":{"id":99021349,"uuid":"69809878","full_name":"RyanFitzgerald/liquo","owner":"RyanFitzgerald","description":"Filterable Image Gallery jQuery Plugin","archived":false,"fork":false,"pushed_at":"2016-10-05T02:32:10.000Z","size":223,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-14T04:32:10.209Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ryanfitzgerald.github.io/liquo/","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/RyanFitzgerald.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-02T17:04:22.000Z","updated_at":"2024-04-16T19:11:32.000Z","dependencies_parsed_at":"2023-06-29T19:00:42.382Z","dependency_job_id":null,"html_url":"https://github.com/RyanFitzgerald/liquo","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"b2f4f1e767c590d592a4cda14bdf9955c7c284c2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fliquo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fliquo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fliquo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Fliquo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanFitzgerald","download_url":"https://codeload.github.com/RyanFitzgerald/liquo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247792919,"owners_count":20996896,"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":"2024-10-10T13:08:15.934Z","updated_at":"2025-04-08T06:46:28.600Z","avatar_url":"https://github.com/RyanFitzgerald.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Liquo\r\n\r\nLiquo is a jQuery-based image gallery that allows filtering, randomizing on load, and setting the start category. Liquo allows you to have full control over the styling of the gallery and it's associated buttons.\r\nThe website for this plugin can be found [here](http://ryanfitzgerald.github.io/liquo/), which includes docs and a demo.\r\n\r\n## Installation \u0026 Setup\r\n\r\nAll the installation that is required is simply including the compiled CSS and JS file in your document (minified or not) and then initializing it.\r\n\r\nTop of page:\r\n```html\r\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"path/to/liquo.css\"\u003e\r\n```\r\n\r\nBottom of page:\r\n```html\r\n\u003cscript src=\"path/to/liquo.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nFinally, initialize it:\r\n```javascript\r\n$('#some-gallery').liquo({\r\n  menu: \"#some-menu\"\r\n);\r\n```\r\n\r\nThe basic structure of a Liquo gallery is as follows:\r\n\r\n```html\r\n\u003cdiv id=\"gallery-menu\"\u003e\r\n\t\u003ca href=\"#\" data-liquo=\"all\"\u003eAll\u003c/a\u003e\r\n\t\u003ca href=\"#\" data-liquo=\"1\"\u003eCategory 1\u003c/a\u003e\r\n\t\u003ca href=\"#\" data-liquo=\"2\"\u003eCategory 2\u003c/a\u003e\r\n\t\u003ca href=\"#\" data-liquo=\"3\"\u003eCategory 3\u003c/a\u003e\r\n\u003c/div\u003e\r\n\u003cul id=\"gallery\"\u003e\r\n\t\u003cli data-liquo=\"1\"\u003e\r\n\t\t\u003cimg src=\"images/item1.jpg\" /\u003e\r\n\t\u003c/li\u003e\r\n\t\u003cli data-liquo=\"2\"\u003e\r\n\t\t\u003cimg src=\"images/item2.jpg\" /\u003e\r\n\t\u003c/li\u003e\r\n\t\u003cli data-liquo=\"3\"\u003e\r\n\t\t\u003cimg src=\"images/item3.jpg\" /\u003e\r\n\t\u003c/li\u003e\r\n\u003c/ul\u003e\r\n```\r\nThe two important portions are the #gallery-menu and #gallery. The names can change, but both are required. The first, #gallery-menu, is the wrapper for the category buttons / links. The second, #gallery, is the ID for the ul that holds all the li elements.\r\n\r\nOnce you create the ul with all the li elements you want, simply add data-liquo to each with a value. Ensure that all images in the same category have the same value. Finally, also apply data-liquo to each of the links in the menu wrapper. This works by selecting all elements with the same data-liquo once the gallery-menu anchor is clicked. Also, if you want an option for all elements to be visible, ensure there is a menu item with data-liquo=\"all\". See the [demo](http://ryanfitzgerald.github.io/liquo/demo.html) page for a larger example.\r\n\r\n## Configuration\r\n\r\nThere are a number of parameters you may override, or simply use the default provided ones (with the exception of menu, which must be provided):\r\n\r\nParameter | Description | Default\r\n---- | ----------- | -------\r\nmenu | This paramater is required and tells Liquo where the image category buttons / links can be found | null\r\nstart | This parameter sets the starting category and must correspond to a data-liquo value if used | all\r\nrandom | \tThis parameter randomizes the gallery every time the page is loaded if the order does not matter to you | false\r\n\r\n## Example Usage\r\n\r\nAnother example usage of Liquo using it's available options is as follows:\r\n\r\n```javascript\r\n$(\"#gallery\").liquo({\r\n\tmenu: \"#gallery-menu\",\r\n\tstart: \"2\",\r\n\trandom: true\r\n});\r\n```\r\n## License\r\n\r\nMIT License (Free - see LICENSE.md)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanfitzgerald%2Fliquo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanfitzgerald%2Fliquo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanfitzgerald%2Fliquo/lists"}