{"id":28792164,"url":"https://github.com/frissbee/little-image-viewer","last_synced_at":"2025-08-09T02:24:06.386Z","repository":{"id":296126603,"uuid":"990789248","full_name":"FrissBee/little-image-viewer","owner":"FrissBee","description":"Image viewer/slider that is very easy to implement in your own website","archived":false,"fork":false,"pushed_at":"2025-06-13T06:16:52.000Z","size":183,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-13T07:26:26.831Z","etag":null,"topics":["image-slider","image-slideshow","image-viewer","webcomponents"],"latest_commit_sha":null,"homepage":"https://little-image-viewer.frissbee.de/","language":"HTML","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/FrissBee.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-26T16:29:35.000Z","updated_at":"2025-06-13T06:16:55.000Z","dependencies_parsed_at":"2025-05-29T04:30:49.862Z","dependency_job_id":"2aafda31-1141-43d7-b690-e3951b4d256b","html_url":"https://github.com/FrissBee/little-image-viewer","commit_stats":null,"previous_names":["frissbee/little-image-viewer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FrissBee/little-image-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrissBee%2Flittle-image-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrissBee%2Flittle-image-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrissBee%2Flittle-image-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrissBee%2Flittle-image-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FrissBee","download_url":"https://codeload.github.com/FrissBee/little-image-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FrissBee%2Flittle-image-viewer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260465873,"owners_count":23013443,"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":["image-slider","image-slideshow","image-viewer","webcomponents"],"created_at":"2025-06-18T01:01:06.239Z","updated_at":"2025-08-09T02:24:06.372Z","avatar_url":"https://github.com/FrissBee.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Little Image Viewer\n\nThis repo contains an image viewer that is very easy to implement in your own website.\n\nIt can be visually adapted to your own site.\n\nIt also contains various animations.\n\nThe repo contains all the necessary files and various examples for illustration.\n\nThe Little Image Viewer was programmed in JavaScript with Web Component.\n\nIndividual image viewers are completely independent of each other.\n\n## Preview\n\n[You can view the demo here](https://little-image-viewer.frissbee.de/)\n\n## Implementation\n\nThe HTML or PHP file\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"de\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n\n    \u003c!-- 1. implement \"little-image-viewer.js\" file --\u003e\n    \u003cscript src=\"./assets/js/little-image-viewer_v.1.2.0.js\"\u003e\u003c/script\u003e\n    \u003c!-- 2. implement own JS file --\u003e\n    \u003cscript src=\"./assets/js/my-script.js\" defer\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody style=\"background-color: #dbdbdb\"\u003e\n    \u003cmain\u003e\n      \u003c!-- 3. implement \"little-image-viewer\" HTML tag --\u003e\n      \u003clittle-image-viewer\u003e\u003c/little-image-viewer\u003e\n    \u003c/main\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nThe own JS file\n\n```js\n// the array with the image objects (structure is important)\n// If an empty string is passed to the key `title` or `subtitle`, no title or subtitle is displayed.\n// All images should have the same width and height in pixels\nconst images = [\n  { src: './path-to-the-image-file/little-image-viewer-01.jpg', alt: 'image alt text', title: '', subTitle: '' },\n  { src: './path-to-the-image-file/little-image-viewer-02.jpg', alt: 'image alt text', title: '', subTitle: '' },\n  { src: './path-to-the-image-file/little-image-viewer-03.jpg', alt: 'image alt text', title: '', subTitle: '' },\n];\n\n// select the \"little-image-viewer\" HTML tag\nconst littleImageViewer = document.querySelector('little-image-viewer');\n\n// give the selected \"little-image-viewer\" HTML tag the images with the function \"setImages()\"\nlittleImageViewer.setImages(images);\n```\n\n## Functions\n\nThe following function is required for implementation in your own website:\n\n- `setImages(images)` =\u003e to pass the array with the image objects\n\nIf you want to integrate the small image viewer into your own project, the following functions are also available:\n\n- `getAnimationNames()` =\u003e returns an array of all animations (the possible values for the attribute `is-animation`)\n- `getImageList()` =\u003e The array with the image objects is returned.\n- `setImageContainerSize()` =\u003e In some cases, the width of the displayed image must be adjusted to the width of the outer container if it changes the screen or window size. You can do this with this function.\n\n## Attributes\n\nThe following attributes are available for the `\u003clittle-image-viewer\u003e\u003c/little-image-viewer\u003e` HTML tag:\n\n- `slide-time` =\u003e time for the animation in milliseconds (ms). Default is `1000`. **Example:** `\u003clittle-image-viewer slide-time=\"500\"\u003e\u003c/little-image-viewer\u003e`\n- `icon-color` =\u003e for setting the color of the icons. **Example:** `\u003clittle-image-viewer icon-color=\"#3191d6\"\u003e\u003c/little-image-viewer\u003e`\n- `is-animation` =\u003e for animation. **Example:** `\u003clittle-image-viewer is-animation=\"slide-h-endless\"\u003e\u003c/little-image-viewer\u003e`.\n\n  **Possible values:**\n\n  - `slide-h-to-start`\n  - `slide-h-stop-end`\n  - `slide-h-endless`\n\n## Properties\n\nNot necessary for implementation in your own page, but if you want to integrate the little image viewer into a project, there is the following property:\n\n- `defaultImageList` =\u003e A list with three placeholder images. It is transferred to the little image viewer at the start of loading.\n\nThe list looks as follows:\n\n```js\ndefaultImageList = [\n  { src: 'https://placehold.co/800x470/454545/FFF?text=Placeholder+Image 1', alt: '', title: '', subTitle: '' },\n  { src: 'https://placehold.co/800x470/3982b3/FFF?text=Placeholder+Image 2', alt: '', title: '', subTitle: '' },\n  { src: 'https://placehold.co/800x470/279925/FFF?text=Placeholder+Image 3', alt: '', title: '', subTitle: '' },\n];\n```\n\n## CSS\n\n#### parts:\n\nThe following parts can be used to style the little image viewer:\n\n- `container-viewer`\n- `image`\n- `container-icon-left`\n- `container-icon-right`\n- `svg-icon-left`\n- `svg-icon-right`\n- `title`\n- `sub-title`\n\nExample:\n\n```css\nlittle-image-viewer.viewer-style::part(container-viewer) {\n  padding: 20px;\n  background-color: rgb(51, 51, 51);\n  border: 8px solid green;\n}\nlittle-image-viewer.viewer-style::part(image) {\n  border: 4px solid rgb(38, 144, 185);\n  border-radius: 28px;\n}\nlittle-image-viewer.viewer-style::part(container-icon-left),\nlittle-image-viewer.viewer-style::part(container-icon-right) {\n  padding: 10px 0;\n  border: 2px solid rgb(226, 73, 13);\n  border-radius: 8px;\n  background-color: rgb(255, 246, 203);\n}\nlittle-image-viewer.viewer-style::part(svg-icon-left),\nlittle-image-viewer.viewer-style::part(svg-icon-right) {\n  padding: 6px 4px 0;\n  height: 60px;\n  width: 30px;\n}\nlittle-image-viewer.viewer-style::part(title) {\n  color: #fff;\n  padding: 0 0 8px;\n  font-size: 28px;\n  font-weight: normal;\n  font-style: italic;\n}\nlittle-image-viewer.viewer-style::part(sub-title) {\n  color: #ecdf1f;\n  padding: 8px 0 0;\n  font-size: 18px;\n  font-style: normal;\n  font-weight: bold;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrissbee%2Flittle-image-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrissbee%2Flittle-image-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrissbee%2Flittle-image-viewer/lists"}