{"id":13835360,"url":"https://github.com/bluefantail/flickrGal","last_synced_at":"2025-07-10T07:31:46.863Z","repository":{"id":5757011,"uuid":"53847656","full_name":"bluefantail/flickrGal","owner":"bluefantail","description":"flickrGal is a fully responsive gallery utilising the flickr api. Written in pure javascript, with no external dependencies.","archived":false,"fork":false,"pushed_at":"2023-03-04T02:39:08.000Z","size":1556,"stargazers_count":14,"open_issues_count":17,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-15T00:14:56.554Z","etag":null,"topics":["flickr-api","gallery","grid","javascript"],"latest_commit_sha":null,"homepage":"","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/bluefantail.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-14T10:35:20.000Z","updated_at":"2024-08-04T15:01:53.642Z","dependencies_parsed_at":"2024-08-04T15:01:46.083Z","dependency_job_id":"059fbbb5-9dcd-424e-9037-2fe40692cdfe","html_url":"https://github.com/bluefantail/flickrGal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefantail%2FflickrGal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefantail%2FflickrGal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefantail%2FflickrGal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefantail%2FflickrGal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluefantail","download_url":"https://codeload.github.com/bluefantail/flickrGal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225627364,"owners_count":17498969,"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":["flickr-api","gallery","grid","javascript"],"created_at":"2024-08-04T14:01:00.279Z","updated_at":"2024-11-20T20:31:21.962Z","avatar_url":"https://github.com/bluefantail.png","language":"JavaScript","readme":"# flickrGal\r\n\r\nflickrGal is a fully responsive, easy to use gallery utilising the flickr api. It pulls specified image collections from a flickr account.\r\n\r\nThe primary goal of flickrGal is to provide a super fast flickr gallery that can be painlessly integrated and configured.\r\n\r\nIt's perfect for Photographers, Artists, or anyone wanting to showcase their work on a website with minimal hassle.\r\n\r\nWritten purely in javascript, with no external dependencies.\r\n\r\n![flickrGal Demo](https://raw.githubusercontent.com/bluefantail/flickrGal/master/preview.jpg)\r\n\r\n[Download flickGal](https://raw.githubusercontent.com/bluefantail/flickrGal/master/dist/flickrgal.zip)\r\n\r\n[View Demo](http://bluefantail.github.io/flickrGal)\r\n\r\n# Usage\r\n\r\n\u003e Note - remember not to use your api key for anything important in production, I haven't provided any method for storing api keys here. That bit's up to you.\r\n\r\nTo get going with flickrGal, simply add the flickrGal div somewhere on your page. You'll need to set `data-apikey` and `data-userid` to the values obtained by requesting your flickr api key. See [flickr's instructions](https://www.flickr.com/services/apps/create) for info on how to request that.\r\n``` html\r\n\u003cdiv id=\"flickrgal\" data-collections='[\"all\"]' data-apikey='yourApiKey' data-userid='yourUserId'\u003e\u003c/div\u003e\r\n```\r\n\r\nUse the collections data attribute to specify which collections you want to load. `all` will load every photoset from every collection.\r\nCollections can also be specified individually like so:\r\n\r\n``` html\r\n\u003cdiv id=\"flickrgal\" data-collections='[\"My Collection\", \"Another Collection\"]' data-apikey='yourApiKey' data-userid='yourUserId'\u003e\u003c/div\u003e\r\n```\r\n\r\nThe gallery will expand to the full width of whatever container it's inside, and behave according to the defined grid and breakpoints (more about those in configuration). \r\n\r\n## Options\r\n\r\nWhen displaying all or multiple collections on a single page, an option can be used to seperate collections into sections using the `data-titles` data attribute:\r\n\r\n``` html\r\n\u003cdiv id=\"flickrgal\" data-collections='[\"My Collection\", \"Another Collection\"]' data-titles data-apikey='yourApiKey' data-userid='yourUserId'\u003e\u003c/div\u003e\r\n```\r\n\r\n# Configuration\r\n\r\n## CSS\r\n\r\nIf you're using the included sass in your project, various aspects of the flickrGal layout and style are easy to configure. Important ones are at the top of [flickrgal.scss](https://github.com/bluefantail/flickrGal/blob/master/_sass/flickrgal.scss)\r\n\r\n### Colours\r\n\r\nColours can be set using the following variables:\r\n\r\n``` scss\r\n// Colours\r\n$colours: (\r\n\tprimary-accent: #0076E3, // Main gallery accent colour\r\n\tsecondary-accent: #ff1981, \r\n\tlightbox: #000B10\r\n);\r\n```\r\n\r\n### Image Grid\r\n\r\nBehavior and properties of images in the grid can be modified using the image-grid map:\r\n\r\n``` scss\r\n// Image Variables\r\n$image-grid: (\r\n\taspect:  4/3, // Set image aspect ratio e.g. 4/3 == 4:3 \r\n\tpadding: 5px, // Space between images\r\n\tdefault-cols: 3 // Default number of columns\r\n);\r\n```\r\n\r\n### Breakpoints\r\n\r\nGallery breakpoints can be added, removed, and modified using the breakpoints map:\r\n\r\n``` scss\r\n// Gallery Breakpoints (max-width, columns)\r\n$breakpoints: (\r\n\t(750px, 2),\r\n\t(450px, 1)\r\n);\r\n```\r\n\r\n# Browser Compatibility\r\n# Development","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluefantail%2FflickrGal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluefantail%2FflickrGal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluefantail%2FflickrGal/lists"}