{"id":19078375,"url":"https://github.com/kickstarter/fullscreen_slideshow","last_synced_at":"2025-04-30T04:48:40.782Z","repository":{"id":25598714,"uuid":"29033699","full_name":"kickstarter/fullscreen_slideshow","owner":"kickstarter","description":"A generic version of the code that runs Kickstarter's 2013 Year In Review: https://www.kickstarter.com/year/2013","archived":false,"fork":false,"pushed_at":"2015-02-12T18:25:56.000Z","size":3009,"stargazers_count":41,"open_issues_count":0,"forks_count":2,"subscribers_count":156,"default_branch":"master","last_synced_at":"2025-04-30T04:48:31.830Z","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/kickstarter.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}},"created_at":"2015-01-09T20:20:12.000Z","updated_at":"2020-08-19T17:12:54.000Z","dependencies_parsed_at":"2022-08-24T09:50:58.114Z","dependency_job_id":null,"html_url":"https://github.com/kickstarter/fullscreen_slideshow","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/kickstarter%2Ffullscreen_slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstarter%2Ffullscreen_slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstarter%2Ffullscreen_slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kickstarter%2Ffullscreen_slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kickstarter","download_url":"https://codeload.github.com/kickstarter/fullscreen_slideshow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251644827,"owners_count":21620630,"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-11-09T02:08:54.143Z","updated_at":"2025-04-30T04:48:40.765Z","avatar_url":"https://github.com/kickstarter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kickstarter Year in Review 2013\n\nA handy all-in-one fullscreen slideshow, extracted from \u003ca href=\"https://www.kickstarter.com/year/2013\" target=\"_blank\"\u003eKickstarter's\n2013 year in review\u003c/a\u003e.\n\n[See it in action.](http://kickstarter.github.io/fullscreen_slideshow)\n\n# Features\n- Mobile friendly.\n- URL's allow deep linking to individual slides.\n- Background videos in slides are lazy and predictively loaded. On mobile they're not loaded at all, to conserve bandwidth.\n- Page background color can be controlled via a slide attribute, allowing subtle rainbow effects as you progress through the slideshow.\n- Slides can open full screen modal dialogs which can embed arbitrary pages via iframe.\n\n## Howto\n\n### Background color\n\nIf a slide has a `data` attribute called `color` then that attribute will be added to the `body` element when the slide is loaded.\nA CSS class with the same name as the slide `id` will also be added.\n\nFor example, this slide will have `green30 dollars-pledged` set as the CSS class on `body`:\n\n```html\n\u003cdiv id=\"dollars-pledged\"\n    class=\"slide white\"\n    data-color=\"green30\"\u003e\n    ...\n\u003c/div\u003e\n```\n\n### Modal dialogs\n\nA `div` with the class `js-modal` and a `data` `src` attribute can be turned into a full screen modal dialog. A button\nor link with the `js-show-modal` will show the modal dialog for the slide. An element with the class `js-embed-wrap`\nwill have an `iframe` appended to it, with the frame source set to the `src` `data` attribute. An element with the class\n`js-hide-modal` inside the modal will close it when clicked.\n\nFor example:\n\n```html\n\u003cdiv class=\"slide-footer\"\u003e\n    \u003ca class=\"js-show-modal\"\u003ePlay trailer\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv id=\"veronica-mars-modal\"\n    data-src=\"//www.youtube.com/embed/wq1R93UMqlk?autoplay=1\"\u003e\n    \u003ca class=\"js-hide-modal\"\u003eX\u003c/a\u003e\n    \u003cdiv class=\"js-embed-wrap\"\u003e\n        \u003c!-- iframe inserted here --\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n---\n\n## License \n\n[MIT](http://www.opensource.org/licenses/mit-license.php)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkickstarter%2Ffullscreen_slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkickstarter%2Ffullscreen_slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkickstarter%2Ffullscreen_slideshow/lists"}