Pm-Gallery.js

Pm-Gallery.js - A simple yet powerful responsive image gallery

With pm-Gallery, you can create professional-quality visual content.

1. Demo page
2. How usage?
3. Example
4. Parameters

How usage?

1. npm i pm-gallery
2. Add files: HEAD - pm-gallery-style.css Scripts - pm-gallery.js
3. Init:

new PmGallery(".pm-gallery", {});

Example:

<div class="pm-gallery">
    <img src="./images/img-small-1.svg" data-src="./images/img-large-1.svg" alt="img" />
    <img src="./images/img-small-2.svg" data-src="./images/img-large-2.svg" alt="img" />
    <img src="./images/img-small-3.svg" data-src="./images/img-large-3.svg" alt="img" />
</div>

Parameters

| Name | type | Default | Value | Description | | :------------------- | :-------------------: | :-----: | :---------------------------------------------------------------------: | :---------------------------------------------------- | | positionPreviews | string | 'left' | 'top' | 'bottom' | 'left'| 'right' | Positioning of preview images relative to the gallery | | objectFitPicture | string | 'cover' | 'fill' | 'contain' | 'cover' | 'scaleDown' | 'none' | Adds the 'object-fit' class for the main image | | visiblePreviews | boolean | true | true | false | Image preview visibility | | onCenterPreviews | boolean | true | true | false | Center previews in horizontal mode | | pagination | boolean | false | true | false | Pagination visibility | | swipeSlider | boolean | true | true | false | Swipe on main picture | | loop | boolean | false | true | false | Set to true to enable continuous loop mode | | countPreSlides | number | 4 | number | Count of preview images | | spaceBetween | number | 10 | number | Distance between preview images - px | | previewWidth | number | 100 | number | Width of the preview image - px | | previewHeight | number | 100 | number | Height of the preview image - px | | speedAnimScroll | number | 300 | number | Scrolling speed of preview images | | breakpoints | object | {} | - | Object with parameters for responsive mode Parameters | | fullScreen | object | {} | - | Object with parameters for fullScreen mode Parameters | | borderRadius | number | boolean | 4 | false | count | The options adds border radius for images | | autoPlay | number | boolean | false | false | count | Automatic slide change | | animSlide | string | boolean | false | false | 'fade' | 'flipInX' | 'zoomIn' | | Animation of the slide change |