{"_id":"@alumi-guard/react-image-gallery","_rev":"3-08c3018adf18bcded37f025ae9602258","name":"@alumi-guard/react-image-gallery","dist-tags":{"latest":"0.8.6"},"versions":{"0.8.6":{"name":"@alumi-guard/react-image-gallery","version":"0.8.6","description":"React carousel image gallery component with thumbnail and mobile support","main":"./build/image-gallery","scripts":{"start":"gulp dev","build":"gulp build","lint":"eslint --ext .js,.jsx src","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/xiaolin/react-image-gallery.git"},"keywords":["react","carousel","react-component","react-carousel","react-slideshow","react-gallery","react carousel","react slideshow","react gallery","image gallery","image slider","slideshow","gallery","slider"],"author":{"name":"Xiao Lin"},"email":"xiao@linxtion.com","license":"MIT","bugs":{"url":"https://github.com/xiaolin/react-image-gallery/issues"},"homepage":"https://github.com/xiaolin/react-image-gallery","devDependencies":{"babel-eslint":"^6.0.4","babel-plugin-transform-object-assign":"^6.8.0","babel-preset-es2015":"^6.6.0","babel-preset-react":"^6.5.0","babel-preset-stage-0":"^6.16.0","babelify":"^7.3.0","browserify":"^13.1.1","eslint":"^2.10.2","eslint-plugin-react":"^5.1.1","gulp":"^3.8.11","gulp-babel":"^6.1.2","gulp-clean-css":"^2.3.1","gulp-concat":"^2.6.0","gulp-connect":"^3.2.2","gulp-livereload":"^3.8.0","gulp-rename":"^1.2.0","gulp-sass":"^3.1.0","gulp-uglify":"^1.5.3","react":"^15.5.4","react-dom":"^15.5.4","vinyl-buffer":"^1.0.0","vinyl-source-stream":"^1.1.0","watchify":"^3.8.0"},"dependencies":{"lodash.debounce":"^4.0.8","lodash.throttle":"^4.1.1","prop-types":"^15.5.8","react-swipeable":"^4.0.0"},"gitHead":"dc428f5769437771d4f85dac4de71386b36cc933","_id":"@alumi-guard/react-image-gallery@0.8.6","_npmVersion":"5.5.1","_nodeVersion":"8.9.1","_npmUser":{"name":"aaronholla","email":"aaronholla@gmail.com"},"dist":{"integrity":"sha512-SwHfY+Y4oUcUstJx+j1lQb4rgheJEPNP6/MU08yovAiU4Cx2x+02zoX9Vy9OILfw2C4h9Z6YJTpTJ+qUAvK8mA==","shasum":"0db2340bdb9133dd353a92cadeae27a1b95e92b8","tarball":"https://registry.npmjs.org/@alumi-guard/react-image-gallery/-/react-image-gallery-0.8.6.tgz","fileCount":14,"unpackedSize":126736,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFiPycc/qVFTIEtwZ98ickIAEL0FdRDHdKLyLa/vFyN5AiEA15bWUH4CSuIK0Cj+wl5SFJR4G3YxBy4o2IXYoDmX3w0="}]},"maintainers":[{"name":"aaronholla","email":"aaronholla@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-image-gallery_0.8.6_1523039836531_0.04714361017861246"},"_hasShrinkwrap":false}},"time":{"created":"2018-04-06T18:37:16.430Z","0.8.6":"2018-04-06T18:37:16.609Z","modified":"2022-04-04T13:41:21.283Z"},"maintainers":[{"email":"aaronholla@gmail.com","name":"aaronholla"},{"email":"aaronholla@gmail.com","name":"aaronholland"}],"description":"React carousel image gallery component with thumbnail and mobile support","homepage":"https://github.com/xiaolin/react-image-gallery","keywords":["react","carousel","react-component","react-carousel","react-slideshow","react-gallery","react carousel","react slideshow","react gallery","image gallery","image slider","slideshow","gallery","slider"],"repository":{"type":"git","url":"git+https://github.com/xiaolin/react-image-gallery.git"},"author":{"name":"Xiao Lin"},"bugs":{"url":"https://github.com/xiaolin/react-image-gallery/issues"},"license":"MIT","readme":"React Carousel Image Gallery\r\n===\r\n\r\n[](https://badge.fury.io/js/react-image-gallery)\r\n[](http://www.npmjs.com/package/react-image-gallery)\r\n\r\n## Live Demo (try it on mobile for swipe support)\r\nLive demo: [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)\r\n\r\n\r\n\r\nReact image gallery is a React component for building image galleries and carousels\r\n\r\nFeatures of `react-image-gallery`\r\n* Mobile Swipe Gestures\r\n* Thumbnail Navigation\r\n* Fullscreen Support\r\n* Custom Rendered Slides\r\n* Responsive Design\r\n* Lightweight ~8kb (gzipped, excluding react)\r\n\r\n## Getting started\r\n\r\n```\r\nnpm install react-image-gallery\r\n```\r\n\r\n### Style import\r\n\r\n```\r\n# SCSS\r\n@import \"node_modules/react-image-gallery/styles/scss/image-gallery.scss\";\r\n\r\n# CSS\r\n@import \"node_modules/react-image-gallery/styles/css/image-gallery.css\";\r\n\r\n# Webpack\r\nimport \"react-image-gallery/styles/css/image-gallery.css\";\r\n\r\n# Stylesheet with no icons\r\nnode_modules/react-image-gallery/styles/scss/image-gallery-no-icon.scss\r\nnode_modules/react-image-gallery/styles/css/image-gallery-no-icon.css\r\n```\r\n\r\n\r\n### Example\r\nNeed more example? See [`example/app.js`](https://github.com/xiaolin/react-image-gallery/blob/master/example/app.js)\r\n```js\r\nimport ImageGallery from 'react-image-gallery';\r\n\r\nclass MyComponent extends React.Component {\r\n\r\n render() {\r\n\r\n const images = [\r\n {\r\n original: 'http://lorempixel.com/1000/600/nature/1/',\r\n thumbnail: 'http://lorempixel.com/250/150/nature/1/',\r\n },\r\n {\r\n original: 'http://lorempixel.com/1000/600/nature/2/',\r\n thumbnail: 'http://lorempixel.com/250/150/nature/2/'\r\n },\r\n {\r\n original: 'http://lorempixel.com/1000/600/nature/3/',\r\n thumbnail: 'http://lorempixel.com/250/150/nature/3/'\r\n }\r\n ]\r\n\r\n return (\r\n \r\n );\r\n }\r\n\r\n}\r\n```\r\n\r\n# Props\r\n\r\n* `items`: (required) Array of objects, see example above,\r\n * Available Properties\r\n * `original` - image src url\r\n * `thumbnail` - image thumbnail src url\r\n * `originalClass` - custom image class\r\n * `thumbnailClass` - custom thumbnail class\r\n * `renderItem` - Function for custom renderer (see renderItem below)\r\n * `renderThumbInner` - Function for custom thumbnail renderer (see renderThumbInner below)\r\n * `originalAlt` - image alt\r\n * `thumbnailAlt` - thumbnail image alt\r\n * `originalTitle` - image title\r\n * `thumbnailTitle` - thumbnail image title\r\n * `thumbnailLabel` - label for thumbnail\r\n * `description` - description for image\r\n * `srcSet` - image srcset (html5 attribute)\r\n * `sizes` - image sizes (html5 attribute)\r\n* `infinite`: Boolean, default `true`\r\n * infinite sliding\r\n* `lazyLoad`: Boolean, default `false`\r\n* `showNav`: Boolean, default `true`\r\n* `showThumbnails`: Boolean, default `true`\r\n* `thumbnailPosition`: String, default `bottom`\r\n * available positions: `top, right, bottom, left`\r\n* `showFullscreenButton`: Boolean, default `true`\r\n* `useBrowserFullscreen`: Boolean, default `true`\r\n * if false, fullscreen will be done via css within the browser\r\n* `showPlayButton`: Boolean, default `true`\r\n* `showBullets`: Boolean, default `false`\r\n* `showIndex`: Boolean, default `false`\r\n* `autoPlay`: Boolean, default `false`\r\n* `disableThumbnailScroll`: Boolean, default `false`\r\n * disables the thumbnail container from adjusting\r\n* `slideOnThumbnailHover`: Boolean, default `false`\r\n * slides to the currently hovered thumbnail\r\n* `disableArrowKeys`: Boolean, default `false`\r\n* `disableSwipe`: Boolean, default `false`\r\n* `defaultImage`: String, default `undefined`\r\n * an image src pointing to your default image if an image fails to load\r\n * handles both slide image, and thumbnail image\r\n* `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false\r\n* `slideDuration`: Number, default `450`\r\n * transition duration during image slide in milliseconds\r\n* `swipingTransitionDuration`: Number, default `0`\r\n * transition duration while swiping in milliseconds\r\n* `slideInterval`: Number, default `3000`\r\n* `flickThreshold`: Number (float), default `0.4`\r\n * Determines the max velocity of a swipe before it's considered a flick (lower = more sensitive)\r\n* `swipeThreshold`: Number, default `30`\r\n * A percentage of how far the offset of the current slide is swiped to trigger a slide event.\r\n e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event.\r\n* `stopPropagation`: Boolean, default `false`\r\n * Automatically calls stopPropagation on all 'swipe' events.\r\n* `preventDefaultTouchmoveEvent`: Boolean, default `false`\r\n * An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)\r\n* `startIndex`: Number, default `0`\r\n* `onImageError`: Function, `callback(event)`\r\n * overrides defaultImage\r\n* `onThumbnailError`: Function, `callback(event)`\r\n * overrides defaultImage\r\n* `onThumbnailClick`: Function, `callback(event, index)`\r\n* `onImageLoad`: Function, `callback(event)`\r\n* `onSlide`: Function, `callback(currentIndex)`\r\n* `onScreenChange`: Function, `callback(fullscreenElement)`\r\n* `onPause`: Function, `callback(currentIndex)`\r\n* `onPlay`: Function, `callback(currentIndex)`\r\n* `onClick`: Function, `callback(event)`\r\n* `onTouchMove`: Function, `callback(event) on gallery slide`\r\n* `onTouchEnd`: Function, `callback(event) on gallery slide`\r\n* `onTouchStart`: Function, `callback(event) on gallery slide`\r\n* `onMouseOver`: Function, `callback(event) on gallery slide`\r\n* `onMouseLeave`: Function, `callback(event) on gallery slide`\r\n* `renderCustomControls`: Function, custom controls rendering\r\n * Use this to render custom controls or other elements on the currently displayed image (like the fullscreen button)\r\n ```javascript\r\n _renderCustomControls() {\r\n return \r\n }\r\n ```\r\n* `renderItem`: Function, custom item rendering\r\n * On a specific item `[{thumbnail: '...', renderItem: this.myRenderItem}]`\r\n or\r\n * As a prop passed into `ImageGallery` to completely override `_renderItem`, see source for reference\r\n* `renderThumbInner`: Function, custom thumbnail rendering\r\n * On a specific item `[{thumbnail: '...', renderThumbInner: this.myRenderThumbInner}]`\r\n or\r\n * As a prop passed into `ImageGallery` to completely override `_renderThumbInner`, see source for reference\r\n\r\n* `renderLeftNav`: Function, custom left nav component\r\n * Use this to render a custom left nav control\r\n * Passes `onClick` callback that will slide to the previous item and `disabled` argument for when to disable the nav\r\n ```javascript\r\n renderLeftNav(onClick, disabled) {\r\n return (\r\n \r\n )\r\n }\r\n ```\r\n* `renderRightNav`: Function, custom right nav component\r\n * Use this to render a custom right nav control\r\n * Passes `onClick` callback that will slide to the next item and `disabled` argument for when to disable the nav\r\n ```javascript\r\n renderRightNav(onClick, disabled) {\r\n return (\r\n \r\n )\r\n }\r\n ```\r\n* `renderPlayPauseButton`: Function, play pause button component\r\n * Use this to render a custom play pause button\r\n * Passes `onClick` callback that will toggle play/pause and `isPlaying` argument for when gallery is playing\r\n ```javascript\r\n renderPlayPauseButton: (onClick, isPlaying) => {\r\n return (\r\n \r\n );\r\n }\r\n ```\r\n* `renderFullscreenButton`: Function, custom fullscreen button component\r\n * Use this to render a custom fullscreen button\r\n * Passes `onClick` callback that will toggle fullscreen and `isFullscreen` argument for when fullscreen is active\r\n ```javascript\r\n renderFullscreenButton: (onClick, isFullscreen) => {\r\n return (\r\n \r\n );\r\n },\r\n ```\r\n\r\n\r\n# Functions\r\n\r\n* `play()`: plays the slides\r\n* `pause()`: pauses the slides\r\n* `fullScreen()`: activates full screen\r\n* `exitFullScreen()`: deactivates full screen\r\n* `slideToIndex(index)`: slides to a specific index\r\n* `getCurrentIndex()`: returns the current index\r\n\r\n# Contributing\r\n\r\n* Follow eslint provided\r\n* Comment your code\r\n* Describe your feature/implementation in the pullrequest\r\n* Write [clean](https://github.com/ryanmcdermott/clean-code-javascript) code\r\n\r\n# Build the example locally\r\n\r\n```\r\ngit clone https://github.com/xiaolin/react-image-gallery.git\r\ncd react-image-gallery\r\nnpm install\r\nnpm start\r\n```\r\n\r\nThen open [`localhost:8001`](http://localhost:8001) in a browser.\r\n\r\n\r\n# License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}