{"id":22531950,"url":"https://github.com/yue1123/img-previewer","last_synced_at":"2025-04-09T17:01:50.540Z","repository":{"id":40329035,"uuid":"343137199","full_name":"yue1123/img-previewer","owner":"yue1123","description":"A light wight javascript image viewing plugin with silky preview animation and dependence free","archived":false,"fork":false,"pushed_at":"2022-07-20T10:26:00.000Z","size":3082,"stargazers_count":60,"open_issues_count":1,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-09T17:01:10.070Z","etag":null,"topics":["animation","gallery","github-stars","image","javascript","lightbox","lightbox-gallery","photo","previewer","typescript"],"latest_commit_sha":null,"homepage":"https://yue1123.github.io/img-previewer/demo/index.es.html","language":"TypeScript","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/yue1123.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":"2021-02-28T15:21:36.000Z","updated_at":"2025-02-26T06:23:03.000Z","dependencies_parsed_at":"2022-08-29T22:51:17.163Z","dependency_job_id":null,"html_url":"https://github.com/yue1123/img-previewer","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yue1123%2Fimg-previewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yue1123%2Fimg-previewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yue1123%2Fimg-previewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yue1123%2Fimg-previewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yue1123","download_url":"https://codeload.github.com/yue1123/img-previewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248074968,"owners_count":21043490,"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":["animation","gallery","github-stars","image","javascript","lightbox","lightbox-gallery","photo","previewer","typescript"],"created_at":"2024-12-07T08:09:17.335Z","updated_at":"2025-04-09T17:01:50.492Z","avatar_url":"https://github.com/yue1123.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Img-previewer Js\n\n[![GitHub license](https://img.shields.io/github/license/yue1123/img-previewer?style=flat-square)](https://github.com/yue1123/img-previewer/blob/main/LICENSE)\n[![GitHub stars](https://img.shields.io/github/stars/yue1123/img-previewer?style=flat-square)](https://github.com/yue1123/img-previewer/stargazers)\n\u003ca href=\"https://www.npmjs.com/package/img-previewer\"\u003e\n\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/img-previewer?color=%234ec820\u0026style=flat-square\" alt=\"npm bundle size\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/yue1123/img-previewer/releases\"\u003e\n\u003cimg src=\"https://img.shields.io/github/package-json/v/yue1123/img-previewer?color=f90\u0026style=flat-square\" alt=\"GitHub package.json version (subfolder of monorepo)\"\u003e\n\u003c/a\u003e\n[![](https://data.jsdelivr.com/v1/package/npm/img-previewer/badge)](https://www.jsdelivr.com/package/npm/img-previewer)\n\n\nLightweight and powerful `javascript` image preview plug-in, silky animation allows you to elegantly preview the images in your website. Out of the box, you don't need extra configuration (by default) or change the page `html` code structure, you can easily enable the plugin in any type of website and upgrade your user experience\n\nThese functions are provided:\n\n1. Silky, interruptible transition animation\n2. Use mouse wheel to zoom picture\n3. Icon drag picture\n4. Previous \u0026 Next\n5. Shortcut key support\n6. Support for mobile gestures (zoom in with two fingers)\n7. Multi-language internationalization support\n8. Picture loading monitor\n\nOther languages: [English](./README.md), [简体中文](./README.zh_cn.md).\n\n**tips: For performance reasons, the mobile terminal does not do swiper**\n\n# Example\n\n[Preview](https://yue1123.github.io/img-previewer/demo/index.es.html)\n\n# how to use\n\n### NPM\n\n```bash\nnpm i img-previewer\n# or\nyarn add img-previewer\n# or\npnpm add img-previewer\n```\n\n### CDN\n\n```html\n// css\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/img-previewer@2.1.7/dist/index.css\"\u003e\n// js\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/img-previewer@2.0.6/dist/img-previewer.min.js\"\u003e\u003c/script\u003e\n```\n\n### Enable\n\n```js\n//js\nimport ImgPreviewer from'img-previewer'\n//css\nimport'img-previewer/dist/index.css'\n\nconst imgPreviewer = new ImgPreviewer(css selector,{options...})\n```\n\n# Property list\n\n|               | Type   | Description                                                                         | Default Value                                   |\n| ------------- | ------ | ----------------------------------------------------------------------------------- | ----------------------------------------------- |\n| fillRatio     | number | The proportion of the image that fills the preview area                             | 0.9(90%)                                        |\n| dataUrlKey    | string | The key of the image address value                                                  | src                                             |\n| triggerEvent  | string | trigger event                                                                       | click                                           |\n| imageZoom     | object | Zoom image configuration                                                            | {min: 0.1,max: 5,step: 0.1}                     |\n| style         | object | Style configuration                                                                 | {modalOpacity: 0.6,headerOpacity: 0,zIndex: 99} |\n| i18n          | object | tooltips International configuration                                                | null                                            |\n| bubblingLevel | number | Bubble to detect whether the parent element of the image is hidden by the css style | 0                                               |\n\n\u003e Optional values for triggerEvent are: click and dblclick\n## bubblingLevel Description\n\nYou should try to use this property when you notice an abnormal image hide animation. Because when the image or the parent element of the image is hidden by some CSS styles, it cannot be detected through the js api, so you need to pass in the correct upward lookup level according to the actual situation to help the plug-in complete the correct hiding animation. As shown below, the correct bubblingLevel is at least 3\n\n**for performance considerations, it is not recommended to fill in this attribute value at will**\n\n```html\n\u003cdiv style=\"opacity:0\"\u003e \u003c!-- 3 --\u003e\n\t\u003cdiv\u003e \u003c!-- 2 --\u003e\n\t\t\u003cimg src=\"\" alt=\"\" /\u003e \u003c!-- 1 --\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**Notice:**\nCurrently detecting that an element or parent element is hidden by a css style only supports the following styles:\n\n- opacity: 0;\n- height: 0;\n- width: 0;\n- visibility: hidden;\n\n## options.imageZoom\n\n|      | Description                                    | Default value |\n| ---- | ---------------------------------------------- | ------------- |\n| min  | Minimum zoom ratio                             | 0.1(10%)      |\n| max  | Maximum zoom ratio                             | 5(500%)       |\n| step | The change ratio of the scroll wheel each time | 0.1           |\n\n## options.style\n\n|               | Description                    | Default value |\n| ------------- | ------------------------------ | ------------- |\n| modalOpacity  | Preview area mask transparency | 0.6           |\n| headerOpacity | Toolbar transparency           | 0             |\n| zIndex        | Level of plug-in rendering     | 99            |\n\n## options.i18n\n\nSimplified Chinese and English are supported by default, others need to be configured by themselves\n\n|              | Description   |\n| ------------ | ------------- |\n| RESET        | Reset         |\n| ROTATE_LEFT  | Rotate Left   |\n| ROTATE_RIGHT | Rotate right  |\n| CLOSE        | Close preview |\n| NEXT         | Next          |\n| PREV         | Previous      |\n\n## api methods\n\n|       Method name             | Description                |\n| ------------------ | -------------------------- |\n| update()           | update image els           |\n| getTotalIndex()    | get total image el numbers |\n| show(index:number) | show index image           |\n| next()             | goto next                  |\n| prev()             | goto prev                  |\n\n### hot key\n\n| Button | Description   |\n| ------ | ------------- |\n| Esc    | Close preview |\n| \u003c=     | Previous      |\n| =\u003e     | Next          |\n\n# Update picture\n\nSome dynamically updated picture lists use\n\n```js\nconst imgPreviewer = new ImgPreviewer('body')\n// Called after the image is rendered on the page\nimgPreviewer.update()\n```\n\n# play slideshow\n\n```js\nlet timer = null\nfunction play() {\n\ttimer \u0026\u0026 clearInterval(timer)\n\tlet index = 0\n\ta.show(index)\n\ttimer = setInterval(() =\u003e {\n\t\tif (index \u003c a.getTotalIndex()) {\n\t\t\tindex++\n\t\t} else {\n\t\t\tindex = 0\n\t\t}\n\t\ta.show(index)\n\t}, 2000)\n}\nplay()\n``` \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyue1123%2Fimg-previewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyue1123%2Fimg-previewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyue1123%2Fimg-previewer/lists"}