{"id":13802283,"url":"https://github.com/appleple/SmartPhoto","last_synced_at":"2025-05-13T13:30:37.627Z","repository":{"id":19197398,"uuid":"84063068","full_name":"appleple/SmartPhoto","owner":"appleple","description":"The most easy to use responsive image viewer especially for mobile devices","archived":false,"fork":false,"pushed_at":"2023-07-12T05:52:48.000Z","size":8795,"stargazers_count":905,"open_issues_count":34,"forks_count":62,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-11-05T04:33:46.878Z","etag":null,"topics":["es2015","lightbox","npm","photoswipe","photoviewer","standalone"],"latest_commit_sha":null,"homepage":"https://appleple.github.io/SmartPhoto/","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/appleple.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}},"created_at":"2017-03-06T11:00:07.000Z","updated_at":"2024-10-11T02:17:34.000Z","dependencies_parsed_at":"2023-10-20T17:30:40.879Z","dependency_job_id":null,"html_url":"https://github.com/appleple/SmartPhoto","commit_stats":{"total_commits":537,"total_committers":8,"mean_commits":67.125,"dds":0.08379888268156421,"last_synced_commit":"548da4d83271c025c05aed1d83c7f89fab12952e"},"previous_names":[],"tags_count":83,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2FSmartPhoto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2FSmartPhoto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2FSmartPhoto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2FSmartPhoto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appleple","download_url":"https://codeload.github.com/appleple/SmartPhoto/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225218006,"owners_count":17439712,"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":["es2015","lightbox","npm","photoswipe","photoviewer","standalone"],"created_at":"2024-08-04T00:01:41.059Z","updated_at":"2024-11-18T17:31:15.563Z","avatar_url":"https://github.com/appleple.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SmartPhoto\n[![npm version](https://badge.fury.io/js/smartphoto.svg)](https://badge.fury.io/js/smartphoto)\n[![CircleCI](https://circleci.com/gh/appleple/SmartPhoto/tree/master.svg?style=shield)](https://circleci.com/gh/appleple/SmartPhoto/tree/master)\n[![npm download](http://img.shields.io/npm/dm/smartphoto.svg)](https://www.npmjs.com/package/smartphoto)\n[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/appleple/SmartPhoto/master/LICENSE)\n\nThe most easy to use responsive image viewer especially for mobile devices\n\nSee [https://appleple.github.io/SmartPhoto/](https://appleple.github.io/SmartPhoto/) for complete docs and demos\u003cbr/\u003e\nIf you are Japasese, See here [https://www.appleple.com/blog/javascript/smartphoto-js.html](https://www.appleple.com/blog/javascript/smartphoto-js.html) instead.\n\n## Feature\n- Intuitive gestures such as pinch-in/pinch-out/drag/swipe\n- Use Accelerometer to move images\n- Accessible from keyboards and screen-readers\n- Show pictures via URL hash\n- Can make photo groups\n\n## Installation\n- [npm](https://www.npmjs.com/package/smartphoto)\n- [standalone](https://raw.githubusercontent.com/appleple/smart-photo/master/js/smartphoto.js)\n\nvia npm\n```shell\nnpm install smartphoto --save\n```\n\nor yarn\n\n```shell\nyarn add smartphoto\n```\n\n## Usage\nrequire\n```js\nconst SmartPhoto = require('smartphoto');\n```\n\nsmartphoto.js\n```js\ndocument.addEventListener('DOMContentLoaded',function(){\n    new SmartPhoto(\".js-smartphoto\");\n});\n```\n\njquery-smartphoto.js\n```js\n$(function(){\n    $(\".js-smartphoto\").SmartPhoto();\n});\n```\n\n### Basic Standalone Usage\n\n```html\n\u003ca href=\"./assets/large-bear.jpg\" class=\"js-smartphoto\" data-caption=\"bear\" data-id=\"bear\" data-group=\"0\"\u003e\n  \u003cimg src=\"./assets/bear.jpg\" width=\"360\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"./assets/large-camel.jpg\" class=\"js-smartphoto\" data-caption=\"camel\" data-id=\"camel\" data-group=\"0\"\u003e\n  \u003cimg src=\"./assets/camel.jpg\" width=\"360\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"./assets/large-rhinoceros.jpg\" class=\"js-smartphoto\" data-caption=\"rhinoceros\" data-id=\"sai\" data-group=\"0\"\u003e\n  \u003cimg src=\"./assets/rhinoceros.jpg\" width=\"360\"/\u003e\n\u003c/a\u003e\n\u003clink rel=\"stylesheet\" href=\"./css/smartphoto.min.css\"\u003e\n\u003cscript src=\"./js/smartphoto.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded',function(){\n  new SmartPhoto(\".js-smartphoto\");\n});\n\u003c/script\u003e\n```\n\n### Option\n\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003evariable\u003c/th\u003e\n\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\u003cth\u003edefault\u003c/th\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003earrows\u003c/td\u003e\n\t\t\u003ctd\u003eprev/next arrows\u003c/td\u003e\n\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003enav\u003c/td\u003e\n\t\t\u003ctd\u003enavigation images at the bottom\u003c/td\u003e\n\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003euseOrientationApi\u003c/td\u003e\n\t\t\u003ctd\u003euse accelerometer to move images\u003c/td\u003e\n\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eresizeStyle\u003c/td\u003e\n\t\t\u003ctd\u003eresize images to fill/fit on the screen\u003c/td\u003e\n\t\t\u003ctd\u003e'fill'\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eanimationSpeed\u003c/td\u003e\n\t\t\u003ctd\u003eanimation speed when switching images\u003c/td\u003e\n\t\t\u003ctd\u003e300\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eforceInterval\u003c/td\u003e\n\t\t\u003ctd\u003efrequency to apply force to images\u003c/td\u003e\n\t\t\u003ctd\u003e10\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n#### Hide parts\n```js\ndocument.addEventListener('DOMContentLoaded',function(){\n    new SmartPhoto(\".js-smartphoto\",{\n        arrows: false,\n        nav: false\n    });\n});\n```\n\n#### Fit/Fill Option\n\nYou can choose if you want to scale images to fit/fill\n\n```js\ndocument.addEventListener('DOMContentLoaded',function(){\n  new SmartPhoto(\".js-smartphoto\",{\n      resizeStyle: 'fit'\n  });\n});\n```\n\n### Event\n\n```js\n// when the modal opened\nphoto.on('open',function(){\n    console.log('open');\n});\n// when the modal closed\nphoto.on('close',function(){\n    console.log('close');\n});\n// when all images are loaded\nphoto.on('loadall',function(){\n    console.log('loadall');\n});\n// when photo is changed\nphoto.on('change',function(){\n    console.log('change');\n});\n// when swipe started\nphoto.on('swipestart',function(){\n    console.log('swipestart');\n});\n// when swipe ended\nphoto.on('swipeend',function(){\n    console.log('swipeend');\n});\n// when zoomed in\nphoto.on('zoomin',function(){\n    console.log('zoomin');\n});\n// when zoomed out\nphoto.on('zoomout',function(){\n    console.log('zoomout');\n});\n```\n\n### SCSS\n\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003evariable\u003c/th\u003e\n\t\t\u003cth\u003edescription\u003c/th\u003e\n\t\t\u003cth\u003edefault\u003c/th\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e$animation-speed\u003c/td\u003e\n        \u003ctd\u003eanimation speed when switching images\u003c/td\u003e\n        \u003ctd\u003e.3s\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e$backdrop-color\u003c/td\u003e\n        \u003ctd\u003ebackdrop color when viewing images\u003c/td\u003e\n        \u003ctd\u003ergba(0, 0, 0, 1)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e$header-color\u003c/td\u003e\n        \u003ctd\u003eheader color\u003c/td\u003e\n        \u003ctd\u003ergba(0, 0, 0, .2)\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## Download\n[Download ZIP](https://github.com/appleple/SmartPhoto/archive/master.zip)\n\n## Github\n[https://github.com/appleple/SmartPhoto](https://github.com/appleple/SmartPhoto)\n\n## Contributor\n[@steelydylan](https://github.com/steelydylan)\n\n## License\nCode and documentation copyright 2017 by appleple, Inc. Code released under the [MIT License](https://github.com/appleple/SmartPhoto/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2FSmartPhoto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappleple%2FSmartPhoto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2FSmartPhoto/lists"}