Skip to content

min30327/photoswipe-simplify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

  •  
  •  
  •  
  •