{"id":16347449,"url":"https://github.com/cuth/dynamic-size-images","last_synced_at":"2025-11-09T04:30:28.382Z","repository":{"id":16360531,"uuid":"19110602","full_name":"cuth/dynamic-size-images","owner":"cuth","description":"Change image src or background image path based on the size of the element","archived":false,"fork":false,"pushed_at":"2014-06-04T04:32:47.000Z","size":232,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T06:20:22.051Z","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":"Azure/azure-linux-extensions","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cuth.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":"2014-04-24T14:04:25.000Z","updated_at":"2014-06-04T04:32:47.000Z","dependencies_parsed_at":"2022-09-24T10:44:24.321Z","dependency_job_id":null,"html_url":"https://github.com/cuth/dynamic-size-images","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fdynamic-size-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fdynamic-size-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fdynamic-size-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2Fdynamic-size-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuth","download_url":"https://codeload.github.com/cuth/dynamic-size-images/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239566149,"owners_count":19660273,"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-11T00:42:34.668Z","updated_at":"2025-11-09T04:30:28.345Z","avatar_url":"https://github.com/cuth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Dynamic Size Images\n===================\n\nUse the size of the element to assign images from paths in attributes. This requires jQuery. Assign in javascript the attributes that will be used for each element width or height.\n\n```javascript\nnew DynamicSizeImages('.selector', [\n    {\n        attrName: 'data-src-small',\n        size: 200\n    },\n    {\n        attrName: 'data-src-medium',\n        size: 350\n    },\n    {\n        attrName: 'data-src-large',\n        size: 500\n    },\n    {\n        attrName: 'data-src-xlarge'\n    }\n], {\n    measure: 'width', // either 'width' or 'height'\n    operator: '\u003c=', // '\u003c', '\u003e', '\u003c=', or '\u003e='\n    debounceTime: 150, // time it waits after browser resize\n    checkOnWinLoad: false // measure sizes after window onload\n});\n```\n\nHelpful CSS\n```css\nimg {\n    visibility: hidden;\n}\nimg[src] {\n    visibility: visible;\n}\n```\n\njQuery Plugin\n-------------\nFor extra convenience use this as a jQuery plugin. The plugin method returns a DynamicSizeImages instance rather than a jQuery object (chaining is not supported).\n```js\nvar profile = $('.selector').DynamicSizeImages([\n    {\n        attrName: 'data-src-large',\n        size: 500\n    },\n    {\n        attrName: 'data-src-xlarge'\n    }\n]);\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Fdynamic-size-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuth%2Fdynamic-size-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Fdynamic-size-images/lists"}