README

react-image-gallery

Responsive image gallery, slideshow, carousel

Install

npm install evolved-react-image-gallery

Demo & Examples

Live demo: linxtion.com/demo/react-image-gallery

To build the example locally, run:

npm install

gulp dev

You might need to run the following command if you do not have gulp installed globally.

npm install --global gulp

Then open localhost:8001 in a browser.

Use

SASS

@import "../node_modules/react-image-gallery/src/ImageGallery";

CSS

<link rel="stylesheet" href="/image-gallery.css"/>

JS

var ImageGallery = require('react-image-gallery');

var images = [
  {
    original: 'http://lorempixel.com/1000/600/nature/1/',
    thumbnail: 'http://lorempixel.com/250/150/nature/1/',
    originalClass: 'featured-slide',
    thumbnailClass: 'featured-thumb',
    originalAlt: 'original-alt',
    thumbnailAlt: 'thumbnail-alt',
    description: 'Optional description...',
    filemeta: {
        added: '11.5.2016 13:50:00',
        filename: 'file.jpg'
    }
  },
  {
    original: 'http://lorempixel.com/1000/600/nature/2/',
    thumbnail: 'http://lorempixel.com/250/150/nature/2/'
  },
  {
    original: 'http://lorempixel.com/1000/600/nature/3/',
    thumbnail: 'http://lorempixel.com/250/150/nature/3/'
  }
];

var gallerymenu;

// Add an action link for each image.
gallerymenu.push({
    text: 'Download',
    callback: function(idx) {
        //Do something with image at given index.
    }
});

handleSlide: function(index) {
  console.log('Slid to ' + index);
},

render: function() {
  return (
    <ImageGallery
      items={images}
      gallerymenu={gallerymenu}
      autoPlay={true}
      showFileMeta={true}
      slideInterval={4000}
      onSlide={this.handleSlide}/>
  );
}

Props

items: (required) Array of objects, see example above,
gallerymenu: Array of objects, see example above
lazyLoad: Boolean, default true
showNav: Boolean, default true
showThumbnails: Boolean, default true
showFileMeta : Boolean, default false
showBullets: Boolean, default false
showIndex: Boolean, default false
server: Boolean, default false
- adds loaded class to all slide <img>
autoPlay: Boolean, default false
disableThumbnailScroll: Boolean, default false
- disables the thumbnail container from adjusting
slideOnThumbnailHover: Boolean, default false
- slides to the currently hovered thumbnail
defaultImage: String, default undefined
- an image src pointing to your default image if an image fails to load
indexSeparator: String, default ' / ', ignored if showIndex is false
slideInterval: Integer, default 4000
startIndex: Integer, default 0
onSlide: Function, callback(index)
onClick: Function, callback(event)
showCloseButton: Boolean, default false
onCloseClick: Function, callback(event)
useKeyboardNavigation: Boolean, default true
- ability to use left and right arrows for navigation and esc button for triggering onCloseClick callback.

functions

play(): continuous plays if image is not hovered.
pause(): pauses the slides.
slideToIndex(index): slide to a specific index.

Notes

Feel free to contribute and or provide feedback!

License

MIT

Usage no npm install needed!