{"id":13426649,"url":"https://github.com/Erichain/blur-image","last_synced_at":"2025-03-15T21:31:39.768Z","repository":{"id":58219094,"uuid":"65652947","full_name":"Erichain/blur-image","owner":"Erichain","description":"A plugin used to make blur effect on image that needs to be preloaded.","archived":false,"fork":false,"pushed_at":"2016-11-20T05:23:05.000Z","size":29,"stargazers_count":63,"open_issues_count":0,"forks_count":11,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-03T15:02:17.300Z","etag":null,"topics":["javascript"],"latest_commit_sha":null,"homepage":"https://github.com/Erichain/blur-image","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/Erichain.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}},"created_at":"2016-08-14T06:16:32.000Z","updated_at":"2024-11-08T05:00:09.000Z","dependencies_parsed_at":"2022-08-31T02:01:21.930Z","dependency_job_id":null,"html_url":"https://github.com/Erichain/blur-image","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/Erichain%2Fblur-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erichain%2Fblur-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erichain%2Fblur-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erichain%2Fblur-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Erichain","download_url":"https://codeload.github.com/Erichain/blur-image/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243792492,"owners_count":20348656,"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":["javascript"],"created_at":"2024-07-31T00:01:40.072Z","updated_at":"2025-03-15T21:31:39.492Z","avatar_url":"https://github.com/Erichain.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Blur-Image\nA plugin used to make blur effect on image that needs to be preloaded.\n\nJust as Medium does:\n\n![](http://recordit.co/ZuaKyenT0m)\n\n## Install\n\n**Use bower**\n\n``` shell\nbower install --save blur-image\n```\n\nThen, you just import the JavaScript file and Style file into your page as following.\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"bower_components/blur-image/dist/blur-image.css\"\u003e\n\u003cscript src=\"bower_components/blur-image/dist/blur-image.js\"\u003e\u003c/script\u003e\n```\n\n**Use npm packager**\n\n``` shell\nnpm install --save blur-image\n```\n\nAnd import the files.\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"node_modules/blur-image/dist/blur-image.css\"\u003e\n```\n\nIn your JavaScript file, you can use `require` to import.\n\n``` javascript\nlet blurImg = require('blur-image');\n```\n\n## Usage\n\nIn HTML, just add tags with the following attributes:\n\n``` html\n\u003cfigure name=\"blur\"\n        class=\"blur-image-container\"\n        data-real-width=\"1174\"\n        data-real-height=\"670\"\n        data-src=\"images/sm2.jpeg\"\n        src=\"https://cdn-images-1.medium.com/max/2000/1*0WwtDkE1q6HGZwD6Kn9SuQ.jpeg\"\n\u003e\u003c/figure\u003e\n\u003c!-- no matter how many tags here --\u003e\n```\n\n- `name`: Must be `blur`.\n- `class`: Must be `blur-image-container` (Of course, you can change this in the css file).\n- `data-real-width`: Your image's real width.\n- `data-real-height`: Your image's real height.\n- `data-src`: The small image url to load first in you local directory.\n- `src`: The large image's url.\n\nThen, in your `app.js`, just one line, you're all done.\n\n``` javascript\nblurImg();\n```\n\n## Build\n\n``` shell\ngit clone https://github.com/Erichain/blur-image.git\n```\n\nRun `npm install`.\n\nRun `npm run dev` to start local development.\n\nRun `npm run build` to build.\n\n## License\n\nRelease under the MIT license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FErichain%2Fblur-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FErichain%2Fblur-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FErichain%2Fblur-image/lists"}