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
.
<link rel="stylesheet" href="path/to/photoswipe.css">
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">
<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">
<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">
<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);
Also you should install it by npm install jquery.photoswipe
.
Have fun!!