Easyphotoswiper NPM

EasyPhotoSwiper

Installation

Install the module:

npm install --save-dev easyphotoswiper

Import the module in your JavaScript files:

import EasyPhotoSwiper from 'easyphotoswiper'

Executhe the script:

const PhotoGallery = new EasyPhotoSwiper({
  wrap: '.js-gallery',
  item: '.js-gallery__item',
  link: '.js-gallery__link',
  image: 'img'
})
PhotoGallery.init()

Import styles in your SCSS files and setup $images_url variable:

$images_url: '../img/';
@import "node_modules/easyphotoswiper/src/easyphotoswiper";

Grab images and save them in your images folder (src/img):

https://raw.githubusercontent.com/dimsemenov/PhotoSwipe/master/dist/default-skin/default-skin.svg https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/default-skin/default-skin.svg https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/default-skin/preloader.gif

Enjoy!

Configuration

Your HTML needs to be well prepared, example below:

<div class="c-gallery-list js-gallery">
    <div class="c-gallery-list__item js-gallery__item">
        <div class="c-gallery-item">
            <a href="static/img/pic_gal-01-big.jpg" itemprop="contentUrl" data-size="1140x759" class="c-gallery-item__inner js-gallery__link">
                <figure class="o-image">
                    <img class="o-image__media" src="static/img/pic_gal-01.jpg" alt="" />
                </figure>
            </a>
        </div>
    </div>
</div>

Make sure if you have JS class for wrapper, list item and list link.
List link should contain data-size attribute.

Features

Build with Babel. (ES6 -> ES5)
Test with mocha.
Cover with istanbul.
Check with eslint.
Deploy with Travis.

Commands

npm run clean - Remove lib/ directory
npm test - Run tests. Tests can be written with ES6 (WOW!)
npm test:watch - You can even re-run tests on file changes!
npm run cover - Yes. You can even cover ES6 code.
npm run lint - We recommend using airbnb-config. It's fantastic.
npm run test:examples - We recommend writing examples on pure JS for better understanding module usage.
npm run build - Do some magic with ES6 to create ES5 code.
npm run prepublish - Hook for npm. Do all the checks before publishing you module.