pm-gallery's Introduction

Pm-Gallery.js

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

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

Demo page
How usage?
Example
Parameters

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

Recommend Projects