Pm-gallery NPM | npm.io

2.0.21 • Published 4 months ago

Install

Weekly downloads

-

License

ISC

Repository

Last release

4 months ago

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

accepts acorn acorn-import-assertions ajv ajv-formats ajv-keywords ansi-html-community ansi-regex ansi-styles anymatch argparse array-flatten balanced-match batch binary-extensions body-parser bonjour-service boolbase brace-expansion braces browserslist buffer-from bytes call-bind callsites camel-case caniuse-lite chalk chokidar chrome-trace-event clean-css clone-deep color-convert color-name colorette commander compressible compression concat-map connect-history-api-fallback content-disposition content-type cookie cookie-signature core-util-is cosmiconfig cross-spawn css-blank-pseudo css-has-pseudo css-prefers-color-scheme css-select css-what cssdb cssesc debug default-gateway define-lazy-prop depd destroy detect-node dir-glob dns-equal dns-packet dom-converter dom-serializer domelementtype domhandler domutils dot-case ee-first electron-to-chromium encodeurl enhanced-resolve entities envinfo error-ex es-module-lexer escalade escape-html escape-string-regexp eslint-scope esrecurse estraverse etag eventemitter3 events execa express fast-deep-equal fast-glob fast-json-stable-stringify fastest-levenshtein fastq faye-websocket fill-range finalhandler find-up follow-redirects forwarded fraction.js fresh fs-monkey fs.realpath function-bind get-intrinsic get-stream glob glob-parent glob-to-regexp globby graceful-fs handle-thing has has-flag has-proto has-symbols he hpack.js html-entities html-loader html-minifier-terser htmlparser2 http-deceiver http-errors http-parser-js http-proxy http-proxy-middleware human-signals iconv-lite icss-utils ignore immutable import-fresh import-local inflight inherits interpret ipaddr.js is-arrayish is-binary-path is-core-module is-docker is-extglob is-glob is-number is-plain-obj is-plain-object is-stream is-wsl isarray isexe isobject jest-worker jiti js-tokens js-yaml json-parse-even-better-errors json-schema-traverse kind-of launch-editor lines-and-columns loader-runner locate-path lodash lower-case lru-cache markdown-html-webpack-plugin markdown-loader media-typer memfs merge-descriptors merge-stream merge2 methods micromatch mime mime-db mime-types mimic-fn minimalistic-assert minimatch ms multicast-dns nanoid negotiator neo-async no-case node-forge node-releases normalize-path normalize-range npm-run-path nth-check object-inspect obuf on-finished on-headers once onetime open p-limit p-locate p-retry p-try param-case parent-module parse-json parseurl pascal-case path-exists path-is-absolute path-key path-parse path-to-regexp path-type picocolors picomatch pkg-dir postcss-attribute-case-insensitive postcss-clamp postcss-color-functional-notation postcss-color-hex-alpha postcss-color-rebeccapurple postcss-custom-media postcss-custom-properties postcss-custom-selectors postcss-dir-pseudo-class postcss-double-position-gradients postcss-focus-visible postcss-focus-within postcss-font-variant postcss-gap-properties postcss-image-set-function postcss-initial postcss-lab-function postcss-logical postcss-modules-extract-imports postcss-modules-local-by-default postcss-modules-scope postcss-modules-values postcss-nesting postcss-opacity-percentage postcss-overflow-shorthand postcss-page-break postcss-place postcss-pseudo-class-any-link postcss-replace-overflow-wrap postcss-selector-not postcss-selector-parser postcss-value-parser pretty-error process-nextick-args proxy-addr pug-plugin punycode qs queue-microtask randombytes range-parser raw-body readable-stream readdirp rechoir relateurl renderkid require-from-string requires-port resolve resolve-cwd resolve-from retry reusify rimraf run-parallel safe-buffer safer-buffer schema-utils select-hose selfsigned semver send serialize-javascript serve-index serve-static setprototypeof shallow-clone shebang-command shebang-regex shell-quote side-channel signal-exit slash sockjs source-map source-map-js source-map-support spdy spdy-transport statuses string_decoder strip-ansi strip-final-newline supports-color supports-preserve-symlinks-flag tapable terser terser-webpack-plugin thunky to-regex-range toidentifier tslib type-is unpipe update-browserslist-db uri-js util-deprecate utila utils-merge uuid vary watchpack wbuf webpack-dev-middleware webpack-merge webpack-sources websocket-driver websocket-extensions which wildcard wrappy ws yallist

@everything-registry/sub-chunk-2449

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

6 months ago

5 months ago

6 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

10 months ago

10 months ago

10 months ago