Hire & Pay On-Demand Developers by the Pull Request

PhotoSwipe v5 — JavaScript image gallery and lightbox

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:1716563906.0",
        "canEdit": false,
        "refType": "branch",
        "currentOid": "d80c32a62b169e776ad1c983d1fcdc6eea8b48e0"
      },
      "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,
          "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": "731",
        "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<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Repo structure</h3><a id=\"user-content-repo-structure\" class=\"anchor\" aria-label=\"Permalink: Repo structure\" 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></div>\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<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Older versions</h3><a id=\"user-content-older-versions\" class=\"anchor\" aria-label=\"Permalink: Older versions\" 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></div>\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": 0
      }
    },
    "appPayload": {
      "helpUrl": "https://docs.github.com",
      "findFileWorkerPath": "/assets-cdn/worker/find-file-worker-1583894afd38.js",
      "findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-3a63a487027b.js",
      "githubDevUrl": null,
      "enabled_features": {
        "code_nav_ui_events": false,
        "overview_shared_code_dropdown_button": false,
        "react_blob_overlay": false,
        "copilot_conversational_ux_embedding_update": false,
        "copilot_smell_icebreaker_ux": true,
        "copilot_workspace": false
      }
    }
  }
}

{
  "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 copilot-proxy.githubusercontent.com/v1/engines/github-completion/completions proxy.enterprise.githubcopilot.com/v1/engines/github-completion/completions *.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 copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: 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": "Sat, 27 Jul 2024 02:57:19 GMT",
  "etag": "27685fa1a8aa162df6404f123fd584f0",
  "referrer-policy": "no-referrer-when-downgrade",
  "server": "GitHub.com",
  "set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Sun, 27 Jul 2025 02:57:19 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": "8E68:2ABDC3:1F58ACA:29EBE9F:66A4620F",
  "x-xss-protection": "0"
}