{"id":22814195,"url":"https://github.com/smackjax/swagal.js","last_synced_at":"2025-06-13T02:05:15.363Z","repository":{"id":135335231,"uuid":"143660868","full_name":"smackjax/swagal.js","owner":"smackjax","description":"Responsive automatic gallery with async image loading and lightbox","archived":false,"fork":false,"pushed_at":"2018-08-08T17:06:03.000Z","size":109,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-02T22:15:28.446Z","etag":null,"topics":["async","asynchronous","gallery","lightbox","pure-javascript","thumbnails"],"latest_commit_sha":null,"homepage":"https://codepen.io/Smackjax/pen/weYeWz","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/smackjax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2018-08-06T01:20:42.000Z","updated_at":"2018-08-08T17:10:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"91f9a38e-f5aa-4347-9bf4-289f6d21d84d","html_url":"https://github.com/smackjax/swagal.js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/smackjax/swagal.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fswagal.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fswagal.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fswagal.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fswagal.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smackjax","download_url":"https://codeload.github.com/smackjax/swagal.js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smackjax%2Fswagal.js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259565565,"owners_count":22877347,"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":["async","asynchronous","gallery","lightbox","pure-javascript","thumbnails"],"created_at":"2024-12-12T13:07:33.902Z","updated_at":"2025-06-13T02:05:15.354Z","avatar_url":"https://github.com/smackjax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#### swagal.js\n\n# Async gallery with generated lightbox\n## (and slideshows, I guess)\n\n### What it is\nA script that automatically generates a responsive gallery connected to a lightbox.\nIt also automatically makes slideshows, but they're more of a starting point.\n\n### How to use it\n**Important:** both initialization options have to be put inside a `'DOMContentLoaded'` event listener.\nI figured it was easier to require that potential annoyance and have more granular control.\n\n\n#### Initializing\n**Options for initializing**\n1. Automatically initialize all slideshows and galleries on the page\n    + Uses default options\n    - Can't selectively override defaults \u0026 classes\n    - No way to selectively initialize some while automatically initializing the rest\n    - In reality only most helpful if multiple galleries/slideshows on the same page\n\n2. Individually initialize\n    + Uses default options\n    + Can selectively override options \u0026 classes\n    - Have to initialize each element by passing it into correct 'init' function\n\n**Notes:**\n* If a new `'classes'` object is passed it will only override the keys inside, not completely overwrite\n* If an object is passed to `'options'` it will *not* update the base, it will completely overwrite it\n\n##### Automatic(all on page)\n```javascript\nwindow.addEventListener('DOMContentLoaded', swgl.autoInit);\n```\n\n##### Individually\n###### Minimal\n```javascript\nwindow.addEventListener('DOMContentLoaded', ()=\u003e{ \n    swgl.initGallery('gallery-1');\n    swgl.initSlideshow('slide-1');\n    swgl.initGallery('gallery-2');\n    swgl.initSlideshow('slide-2');\n});\n\n```\n\n###### Override defaults\n```javascript\n// --- Initialize individually\nwindow.addEventListener('DOMContentLoaded', ()=\u003e{ \n    swgl.initGallery('gallery-1',\n        // Options\n        {\n            thumbs: {\n                prefix: 't-',\n                // suffix: '',\n                // ext: 'jpg'\n            },\n        },\n        // Does not replace entire default class object, only overwrites classes present here\n        {\n            'galleryWrapper' : 'new-class-name',\n            // Can have multiple classes with space between\n            'xBtnBar' : 'swgl-btn-bar purple-btn-bar'\n        }\n    );\n});\n```\n\n\n#### Thumbnails\n* Global thumbnail settings are under `'thumbs'` key in `'swgl.options'`\n* Thumbnails are loaded before their larger counterparts\n* Thumbnail settings only apply to gallery images\n* Each setting key can be used without the others\n* No thumbnail settings are required\n\n##### Examples\n```javascript\n// Start URL \nconst src = 'https://place.com/an-image.jpg';\nswgl.options.thumbs = {\n    // Image prefix\n    'prefix' : 't-',\n    // Image suffix\n    'suffix' : '_small',\n    // Image extension\n    'ext' : 'png'\n}\n\n// Final thumbnail URL\n// https://place.com/t-an-image_small.png\n```\n\n#### Nav dots\n```javascript\n// Turn on building nav dots\nswgl.options.navdots = true;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmackjax%2Fswagal.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmackjax%2Fswagal.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmackjax%2Fswagal.js/lists"}