react-image-gallery

What is react-image-gallery?

react-image-gallery is a flexible and customizable image gallery component for React applications. It allows developers to create responsive and interactive image galleries with features like slide shows, thumbnails, and full-screen mode.

What are react-image-gallery's main functionalities?

Basic Image Gallery

This code sample demonstrates how to create a basic image gallery using react-image-gallery. The gallery displays a series of images with corresponding thumbnails.

import React from 'react';
import ImageGallery from 'react-image-gallery';

const images = [
  {
    original: 'https://example.com/image1.jpg',
    thumbnail: 'https://example.com/thumb1.jpg',
  },
  {
    original: 'https://example.com/image2.jpg',
    thumbnail: 'https://example.com/thumb2.jpg',
  },
  {
    original: 'https://example.com/image3.jpg',
    thumbnail: 'https://example.com/thumb3.jpg',
  },
];

const MyGallery = () => (
  <ImageGallery items={images} />
);

export default MyGallery;

Auto Play Slide Show

This code sample shows how to enable the auto-play feature in the image gallery. The gallery will automatically cycle through the images.

import React from 'react';
import ImageGallery from 'react-image-gallery';

const images = [
  {
    original: 'https://example.com/image1.jpg',
    thumbnail: 'https://example.com/thumb1.jpg',
  },
  {
    original: 'https://example.com/image2.jpg',
    thumbnail: 'https://example.com/thumb2.jpg',
  },
  {
    original: 'https://example.com/image3.jpg',
    thumbnail: 'https://example.com/thumb3.jpg',
  },
];

const MyGallery = () => (
  <ImageGallery items={images} autoPlay={true} />
);

export default MyGallery;

Full-Screen Mode

This code sample demonstrates how to enable the full-screen mode in the image gallery. Users can view images in full-screen by clicking the full-screen button.

import React from 'react';
import ImageGallery from 'react-image-gallery';

const images = [
  {
    original: 'https://example.com/image1.jpg',
    thumbnail: 'https://example.com/thumb1.jpg',
  },
  {
    original: 'https://example.com/image2.jpg',
    thumbnail: 'https://example.com/thumb2.jpg',
  },
  {
    original: 'https://example.com/image3.jpg',
    thumbnail: 'https://example.com/thumb3.jpg',
  },
];

const MyGallery = () => (
  <ImageGallery items={images} showFullscreenButton={true} />
);

export default MyGallery;

Other packages similar to react-image-gallery

react-photo-gallery

react-photo-gallery is a React component for creating responsive image galleries. It offers a more grid-based layout compared to react-image-gallery and is optimized for performance with features like lazy loading.

react-images

react-images is a lightbox component for displaying images in a modal. It focuses on providing a simple and customizable lightbox experience, whereas react-image-gallery offers a more comprehensive gallery solution.

react-slick

react-slick is a carousel component for React. It is highly customizable and supports various types of content, not just images. It is more versatile in terms of content types compared to react-image-gallery.

README

react-image-gallery

Responsive image gallery, slideshow, carousel

Install

npm install 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/'
  },
  {
    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/'
  }
];

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

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

Props

• items: (required) Array of images,
• showThumbnails: Boolean, default true
• showBullets: Boolean, default false
• autoPlay: Boolean, default false
• slideInterval: Integer, default 4000
• onSlide: Function, callback(index)

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