@jiubao/gallery NPM

gallery

18k before gzip

Demo

https://jiubao.github.io/gallery/

Gestures

tap to open gallery
swipe to next or previous image
vertical pan to close
double tap to zoom in or zoom out
pinch to zoom in
pan to drag
pinch to zoom out or close

Install

$ npm install --save @jiubao/gallery

$ yarn add @jiubao/gallery

// using ES6 modules
import gallery from '@jiubao/gallery/dist/gallery.es'

The UMD build is available on unpkg:

<script src="https://unpkg.com/@jiubao/gallery"></script>

Usage

<div class="box">
  <img src="./imgs/1.jpg" data-gallery-item alt="">
  <img src="./imgs/2.jpg" data-gallery-item alt="">
  <img src="./imgs/3.jpg" data-gallery-item alt="">
  <img src="./imgs/4.jpg" data-gallery-item alt="">
  <img src="./imgs/5.jpg" data-gallery-item alt="">
</div>

import gallery from '@jiubao/gallery/dist/gallery.es'
gallery()

Options

Attribute	Description	Type	Default	Values
selector	gallery item flag, start with `data`	string	data-gallery-item

Methods

Name	Description	Parameters	Return
destroy	destroy gallery
show	show gallery	img
hide	hide gallery
on	add a event handler	event name, event handler	unregister function
off	remove handler	event name, event handler

Events

Name	Description	trigger	Parameters
show	show gallery	-	img
hide	hide gallery	-	img
single	single tap	-	points, target, phase, eventArg
double	double tap	-	points, target, phase, eventArg
scroll	vertical scroll	-	points, target, phase, eventArg
scrollend	vertical scroll end	-	points, target, phase, eventArg
pinch	pinch move	-	points, target, phase, eventArg
pinchend	pinch end	-	points, target, phase, eventArg
pan	pan move	-	points, target, phase, eventArg
panend	pan end	-	points, target, phase, eventArg
postpan	post pan end	-
start	touch start	-	points, target, phase, eventArg
move	touch move	-	points, target, phase, eventArg
end	touch end	-	points, target, phase, eventArg
swipestart	swipe start	-	index
swipe	swipe move	-	index
swipeend	swipe end	-	index