Stand With Ukraine

PhotoSwipe v5 — JavaScript image gallery and lightbox

Demo | Documentation

Sponsor via OpenCollective Follow on Twitter

Repo structure

  • dist/ - main JS and CSS
  • src/ - source JS and CSS.
    • src/js/photoswipe.js - entry for PhotoSwipe Core.
    • src/js/lightbox/lightbox.js - entry for PhotoSwipe Lightbox.
  • docs/ - documentation markdown files.
  • demo-docs-website/ - website with documentation, demos and manual tests.
  • build/ - rollup build config.

To build JS and CSS in dist/ directory, run npm run build.

To run the demo website and automatically rebuild files during development, run npm install in demo-docs-website/ and npm run watch in the root directory.

Older versions

Documentation for the old version (v4) can be found here and the code for 4.1.3 is here.


This project is tested with BrowserStack.

dimsemenov/PhotoSwipe

{
"props": {
"initialPayload": {
"allShortcutsEnabled": false,
"path": "/",
"repo": {
"id": 1580851,
"defaultBranch": "master",
"name": "PhotoSwipe",
"ownerLogin": "dimsemenov",
"currentUserCanPush": false,
"isFork": false,
"isEmpty": false,
"createdAt": "2011-04-07T05:46:29.000Z",
"ownerAvatar": "https://avatars.githubusercontent.com/u/1061115?v=4",
"public": true,
"private": false,
"isOrgOwned": false
},
"currentUser": null,
"refInfo": {
"name": "master",
"listCacheKey": "v0:1701701416.0",
"canEdit": false,
"refType": "branch",
"currentOid": "1938a36f5f41821698186e648de3ad24c45a6fd0"
},
"tree": {
"items": [
{
"name": ".github",
"path": ".github",
"contentType": "directory"
},
{
"name": "build",
"path": "build",
"contentType": "directory"
},
{
"name": "demo-docs-website",
"path": "demo-docs-website",
"contentType": "directory"
},
{
"name": "dist",
"path": "dist",
"contentType": "directory"
},
{
"name": "docs",
"path": "docs",
"contentType": "directory"
},
{
"name": "src",
"path": "src",
"contentType": "directory"
},
{
"name": ".babelrc",
"path": ".babelrc",
"contentType": "file"
},
{
"name": ".editorconfig",
"path": ".editorconfig",
"contentType": "file"
},
{
"name": ".eslintignore",
"path": ".eslintignore",
"contentType": "file"
},
{
"name": ".eslintrc.json",
"path": ".eslintrc.json",
"contentType": "file"
},
{
"name": ".gitignore",
"path": ".gitignore",
"contentType": "file"
},
{
"name": "LICENSE",
"path": "LICENSE",
"contentType": "file"
},
{
"name": "README.md",
"path": "README.md",
"contentType": "file"
},
{
"name": "global.d.ts",
"path": "global.d.ts",
"contentType": "file"
},
{
"name": "package-lock.json",
"path": "package-lock.json",
"contentType": "file"
},
{
"name": "package.json",
"path": "package.json",
"contentType": "file"
},
{
"name": "tsconfig.json",
"path": "tsconfig.json",
"contentType": "file"
}
],
"templateDirectorySuggestionUrl": null,
"readme": null,
"totalCount": 17,
"showBranchInfobar": false
},
"fileTree": null,
"fileTreeProcessingTime": null,
"foldersToFetch": [],
"treeExpanded": false,
"symbolsExpanded": false,
"isOverview": true,
"overview": {
"banners": {
"shouldRecommendReadme": false,
"isPersonalRepo": false,
"showUseActionBanner": false,
"actionSlug": null,
"actionId": null,
"showProtectBranchBanner": false,
"recentlyTouchedDataChannel": null,
"publishBannersInfo": {
"dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
"releasePath": "/dimsemenov/PhotoSwipe/releases/new?marketplace=true",
"showPublishActionBanner": false
},
"interactionLimitBanner": null,
"showInvitationBanner": false,
"inviterName": null
},
"codeButton": {
"contactPath": "/contact",
"isEnterprise": false,
"local": {
"protocolInfo": {
"httpAvailable": true,
"sshAvailable": null,
"httpUrl": "https://github.com/dimsemenov/PhotoSwipe.git",
"showCloneWarning": null,
"sshUrl": null,
"sshCertificatesRequired": null,
"sshCertificatesAvailable": null,
"ghCliUrl": "gh repo clone dimsemenov/PhotoSwipe",
"defaultProtocol": "http",
"newSshKeyUrl": "/settings/ssh/new",
"setProtocolPath": "/users/set_protocol"
},
"platformInfo": {
"cloneUrl": "https://desktop.github.com",
"showVisualStudioCloneButton": false,
"visualStudioCloneUrl": "https://windows.github.com",
"showXcodeCloneButton": false,
"xcodeCloneUrl": "https://developer.apple.com",
"zipballUrl": "/dimsemenov/PhotoSwipe/archive/refs/heads/master.zip"
}
},
"newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=1580851"
},
"popovers": {
"rename": null,
"renamedParentRepo": null
},
"commitCount": "726",
"overviewFiles": [
{
"displayName": "README.md",
"repoName": "PhotoSwipe",
"refName": "master",
"path": "README.md",
"preferredFileType": "readme",
"tabName": "README",
"richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><p dir=\"auto\"><a href=\"https://savelife.in.ua/en/\" rel=\"nofollow\"><img src=\"https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg\" alt=\"Stand With Ukraine\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\">PhotoSwipe v5 — JavaScript image gallery and lightbox</p>\n<p dir=\"auto\"><strong><a href=\"https://photoswipe.com\" rel=\"nofollow\">Demo</a></strong> | <strong><a href=\"https://photoswipe.com/getting-started/\" rel=\"nofollow\">Documentation</a></strong></p>\n<p dir=\"auto\"><a href=\"https://opencollective.com/photoswipe\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a4a7088c34e17100f64cec0b53b48cbb02f320141ef045bb1d86f73052442c57/68747470733a2f2f696d672e736869656c64732e696f2f6f70656e636f6c6c6563746976652f616c6c2f70686f746f73776970653f6c6162656c3d53706f6e736f722532307669612532304f70656e436f6c6c656374697665\" alt=\"Sponsor via OpenCollective\" data-canonical-src=\"https://img.shields.io/opencollective/all/photoswipe?label=Sponsor%20via%20OpenCollective\" style=\"max-width: 100%;\"></a>\n<a href=\"https://twitter.com/intent/user?screen_name=photoswipe\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/bdf8fbfc64cc2fdc03627dc52208b3e75a943374f2f9a259996b639cf167b8d3/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f70686f746f73776970653f7374796c653d736f6369616c\" alt=\"Follow on Twitter\" data-canonical-src=\"https://img.shields.io/twitter/follow/photoswipe?style=social\" style=\"max-width: 100%;\"></a></p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-repo-structure\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#repo-structure\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Repo structure</h3>\n<ul dir=\"auto\">\n<li><code>dist/</code> - main JS and CSS</li>\n<li><code>src/</code> - source JS and CSS.\n<ul dir=\"auto\">\n<li><code>src/js/photoswipe.js</code> - entry for PhotoSwipe Core.</li>\n<li><code>src/js/lightbox/lightbox.js</code> - entry for PhotoSwipe Lightbox.</li>\n</ul>\n</li>\n<li><code>docs/</code> - documentation markdown files.</li>\n<li><code>demo-docs-website/</code> - website with documentation, demos and manual tests.</li>\n<li><code>build/</code> - rollup build config.</li>\n</ul>\n<p dir=\"auto\">To build JS and CSS in <code>dist/</code> directory, run <code>npm run build</code>.</p>\n<p dir=\"auto\">To run the demo website and automatically rebuild files during development, run <code>npm install</code> in <code>demo-docs-website/</code> and <code>npm run watch</code> in the root directory.</p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-older-versions\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#older-versions\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Older versions</h3>\n<p dir=\"auto\">Documentation for the old version (v4) can be found <a href=\"https://photoswipe.com/v4-docs/getting-started.html\" rel=\"nofollow\">here</a> and <a href=\"https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3\">the code for 4.1.3 is here</a>.</p>\n<hr>\n<p dir=\"auto\">This project is tested with <a href=\"https://www.browserstack.com/\" rel=\"nofollow\">BrowserStack</a>.</p>\n</article>",
"loaded": true,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": [
{
"level": 3,
"text": "Repo structure",
"anchor": "repo-structure",
"htmlText": "Repo structure"
},
{
"level": 3,
"text": "Older versions",
"anchor": "older-versions",
"htmlText": "Older versions"
}
],
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fdimsemenov%2FPhotoSwipe"
}
},
{
"displayName": "LICENSE",
"repoName": "PhotoSwipe",
"refName": "master",
"path": "LICENSE",
"preferredFileType": "license",
"tabName": "MIT",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fdimsemenov%2FPhotoSwipe"
}
}
],
"overviewFilesProcessingTime": 14.641896999999998
}
},
"appPayload": {
"helpUrl": "https://docs.github.com",
"findFileWorkerPath": "/assets-cdn/worker/find-file-worker-32bb159cc57c.js",
"findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-c6704d501c10.js",
"githubDevUrl": null,
"enabled_features": {
"code_nav_ui_events": false,
"copilot_conversational_ux": false,
"copilot_conversational_ux_embedding_update": false,
"copilot_popover_file_editor_header": false,
"copilot_smell_icebreaker_ux": true,
"copilot_workspace": false,
"codeview_firefox_inert": true
}
}
}
}
{
"accept-ranges": "bytes",
"cache-control": "max-age=0, private, must-revalidate",
"content-encoding": "gzip",
"content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 26 Feb 2024 09:55:26 GMT",
"etag": "9bf84585404629e86d2b86a05f1e0a94",
"referrer-policy": "no-referrer-when-downgrade",
"server": "GitHub.com",
"set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Wed, 26 Feb 2025 09:55:26 GMT; HttpOnly; Secure; SameSite=Lax",
"strict-transport-security": "max-age=31536000; includeSubdomains; preload",
"transfer-encoding": "chunked",
"vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
"x-content-type-options": "nosniff",
"x-frame-options": "deny",
"x-github-request-id": "DDEA:5AE9:18161FF:220DF13:65DC600E",
"x-xss-protection": "0"
}