This is a jQuery plugin for the PhotoSwipe that allow you to setup PhotoSwipe with just a few code.

Usage

Step 1. Include JS and CSS files

The CSS files are provided by PhotoSwipe, you can find them in the dist folder of PhotoSwipe's GitHub repository.

Note that this plugin already included the PhotoSwipe, so you don't have to include it yourself.
Also, you can access the PhotoSwipe class by referring $.fn.photoSwipe.PhotoSwipe.

I recommend that you install this plugin by NPM npm install jquery.photoswipe.

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

<!-- JS file -->
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.photoswipe-global.js"></script>

The markup is something like this.

<div id="gallery">
    <!-- 
    You can specify the following attribute for a img tag
    
      `data-original-src` : The url of original image 
      `data-original-src-width` : The width of original image 
      `data-original-src-height` : The height of original image
      
      ** About the caption text **
      The plugin will try to find the caption text from:
      1. `data-caption-class` attribute
         The value is a class name that indicates the element which contains the caption text.
         
      2. `figcaption` element
         The `figcaption` element that resides inside a `figure` which contains the slide `img` element.
         
      3. `alt` attribute
         The `alt` attribute of the slide `img` element.
    -->
    <img src="images/IMG_2969--thumbnail.jpg" data-original-src="images/IMG_2969.jpg" data-original-src-width="2000" data-original-src-height="2000" alt="caption text">

    <!-- 
    If the `data-original-src` not exists, `src` will be used. 
    If the `data-original-src-width` or `data-original-src-width` not exists, the natural width and height of the `src` will be used.
    If the file name of `src` matches the pattern `/(\d+)[*×x](\d+)/` (e.g. images/IMG_3012-1200x800.jpg), the plugin will takes width and height from the file name.
    (That way you don't need to specify the `data-original-src-width` and `data-original-src-width`).
    -->
    <img src="images/IMG_3012.jpg">
</div>

Step 2. Setup PhotoSwipe

Suppose you have the above markup, then just simply call the photoSwipe() method, you're done.

$('#gallery').photoSwipe();

Options

There are three parameters of the method photoSwipe.

Syntax

$gallery.photoSwipe(slideSelector, options, events);

slideSelector

The selector of slides, the default selector is 'img'.

Make sure you include a img tag inside of the selected element, or you can just use a "bare img tag" just like the above sample markup.

If this selector indicates an a tag, the attribute href will be used as the "original image url" of that image.

If this selector indicates an a tag, and the value of the attribute href begin with the # that point to an element, the inner html of the pointed element will be shown.

options

The options passed to PhotoSwipe.

events

The events passed to PhotoSwipe.

Here is a sample code use all the three parameters.

var slideSelector = 'img',
    options     = {bgOpacity: 0.8},
    events      = {
        close: function () {
            console.log('closed');
        }
    };

$('#gallery').photoSwipe(slideSelector, options, events);

Update gallery

After adding or removing slides of a gallery dynamically, all you need to do is $('#gallery').photoSwipe('update') to update the gallery.

ECMAScript 6

The source code is written in ECMAScript 6 (Browserify + Babelify), so you can easily import it by

import PhotoSwipeMounter from 'jquery.photoswipe';

PhotoSwipeMounter(jQuery); // mount this plugin into jQuery

Also you should install it by npm install jquery.photoswipe.

Have fun!!