2.0.21 • Published 5 months ago
pm-gallery v2.0.21
Pm-Gallery.js
Pm-Gallery.js - A simple yet powerful responsive image gallery
With pm-Gallery, you can create professional-quality visual content.
How usage?
- npm i pm-gallery
- Add files: HEAD - pm-gallery-style.css Scripts - pm-gallery.js
- 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 |
2.0.21
5 months ago
2.0.20
6 months ago
2.0.19
7 months ago
2.0.17
7 months ago
2.0.18
7 months ago
2.0.15
7 months ago
2.0.3
7 months ago
2.0.16
7 months ago
2.0.2
7 months ago
2.0.13
7 months ago
2.0.5
7 months ago
2.0.14
7 months ago
2.0.4
7 months ago
2.0.11
7 months ago
2.0.7
7 months ago
2.0.12
7 months ago
2.0.6
7 months ago
2.0.9
7 months ago
2.0.10
7 months ago
2.0.8
7 months ago
2.0.1
7 months ago
1.0.2
11 months ago
1.0.1
11 months ago
1.0.0
11 months ago