photoswipe-simplify.js

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.

Demo

View the demo

Installation

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">
    photoswipeSimplify.init();
</script>

PhotoSwipe Options

PhotoSwipe options can be used as they are.

Please see this page for details.

Specify the option as follows:

photoswipeSimplify.init({
    history: false,
    focus: false,
});

Usage

<!-- 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 pixabay.com"><img src="test/img01-thumb.jpg" alt=""></a>
    ...
</div>

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>
	<div>
		<figure>
			<img />
			<figcaption></figcaption>
		</figure>
		<figure>
			<img />
			<figcaption></figcaption>
		</figure>
	</div>
	<div>
		<figure>
			<img />
			<figcaption></figcaption>
		</figure>
		<figure>
			<img />
			<figcaption></figcaption>
		</figure>
		<figure>
			<img />
			<figcaption></figcaption>
		</figure>
	</div>
</section>

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.