Skip to content

min30327/photoswipe-simplify

master
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?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

PhotoSwipe.js simplify by the VanillaJS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •