Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


PhotoSwipe.js simplified by the VanillaJS team.

PhotoSwipe is an extremely well-built solution for self-hosting image galleries on websites. However, its setup can be quite onerous.

photoswipe-simplify.js significantly reduces the complexity of setting up PhotoSwipe for your website, removing almost all script-editing requirements and allowing for more simplified, and larger-context gallery definitions.


View the demo


You can install it using npm:

npm install photoswipe photoswipe-simplify --save

Or just include the script in your page:

<script src="path/to/photoswipe.js" charset="utf-8"></script>
<script src="path/to/photoswipe-ui-default.js" charset="utf-8"></script>
<script src="path/to/photoswipe-simplify.js" charset="utf-8"></script>

And, include the PhotoSwipe style in your page:

<link rel="stylesheet" href="path/to/photoswipe.min.css">
<link rel="stylesheet" href="path/to/default-skin.min.css">

Included photoswipe-simplify.js in your project and initialize:

<script charset="utf-8">

PhotoSwipe Options

PhotoSwipe options can be used as they are.

Please see this page for details.

Specify the option as follows:

    history: false,
    focus: false,


<!-- Wrapper element adding the [data-pswp] attribute. -->
<div data-pswp>
    <!-- Detect image links from internal elements and generate PhotoSwipe objects. -->
    <!-- If you want to display captions and authors, specify the data-caption and data-author attributes. -->
    <a href="test/img01.jpg" target="_blank" data-caption="This is dummy caption. It has been placed here solely to demonstrate the look and feel of finished, typeset text." data-author="Photo by"><img src="test/img01-thumb.jpg" alt=""></a>

Context Scope

The data-pswp attribute can be applied to much larger contexts than simply the immediate parent container. The gallery is defined by the scope of the parent container. For example:

<section data-pswp>
			<img />
			<img />
			<img />
			<img />
			<img />

photoswipe-simplify.js will consider all images between <section></section> to be part of the same gallery.

data-size attribute

PhotoSwipe on its own requires image sizes to be known in advance. This can be a major hurdle to setting up the script. photoswipe-simplify.js simplifies PhotoSwipe setup by automatically loading all the high-resolution images for a gallery and then calculating sizes to initialize PhotoSwipe.

This may simplify setup but can drastically increase bandwidth usage on larger galleries.

You can stop the pre-loading of high-resolution gallery images by adding the data-size attribute to the parent A tag, thusly:

<a href="images/gallery-high/photo01.jpg" data-size="2000x3000"><img src="images/gallery-thumb/photo01.jpg" /></a>

photoswipe-simplify.js, on seeing the data-size attribute will use that to establish the necessary resolution data for PhotoSwipe.


PhotoSwipe.js simplify by the VanillaJS.






No releases published


No packages published

Contributors 4