rig
4.4/58

react-image-gallery

npm i react-image-gallery

109 Versions

1.2.9

latest
20 days ago

Fixes #687: Removes transition when items change.


1.2.8

3 months ago

PRs deployed

#664 #637 #663


1.2.7

1 year ago

Fix issues #622 Improve thumbnail swipe gestures #617 memoized control components


1.2.6

1 year ago

Deprecated: imageSet has been removed when passing in item. Use custom renderItem if you need to render imageSet

Improvements: optimized renderItem so that it is not called again when changing slides #423 improved swipe gestures when swiping up/down (prevent moving the slide) and swiping left/right (prevent background scrolling) #616


1.2.5

1 year ago

Prevent image re-mounting on slide change (this was causing a new fetch when images were not cached)


1.2.4

1 year ago

1.2.3

1 year ago

1.2.2

1 year ago

Adds support for webpack for local development #586 Adds thumbnail swipe #452 Reduced overall bundle size by 12% #501


1.2.1

1 year ago

1.2.0

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

Fixes the following issues

#587 (non-passive event listener fix for react-swipeable) #595 (Thumbnails should have their own width and height) #599 (Remove preventDefaultTouchmoveEvent in favor of using css touchAction: pan-x)


1.0.10

1 year ago

Resolves the following issues

  • Adds play pause refresh on slideInterval or slideDuration change #577
  • Some css enhancement and fixes #544
  • Fixes calling handleResize when component unmounts #498
  • Mark original as not required for custom render methods #499
  • Remove focus on current thumbnail and bullet #507

1.0.9

1 year ago

Fixes #518 and #558


1.0.8

2 years ago

Fixes #533 and #519


1.0.7

2 years ago

While playing reset slider timer when sliding left or right #483 Use srcSet instead of media for imageSet prop #490 Fix onscreenchange when not using browser fullscreen API #489 Fix onscreenchange for multiple galleries #493


1.0.6

3 years ago

Fixes #479 #480


1.0.5

3 years ago

Add support for fullscreen src when in fullscreen mode #429 Fix transition when navigating between two slides #469


1.0.4

3 years ago

fixes #470

and add #467


1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago
Breaking changes

PROPS renamed: onErrorImage => onErrorImageURL disableArrowKeys => disableKeyDown

CSS class changes image-gallery-image now on the img element and not its container

Improvements and bug fixes
  • More a11y friendly
  • eslint fixes
  • onErrorImage should only be called once per load
  • use svg icons instead of ionicons
  • fix fullscreen and larger screen aspect ratio

0.9.1

3 years ago
  • Fix #433 shallow comparison of items causing unexpected behaviors in certain cases.

0.9.0

3 years ago

0.8.18

3 years ago
  • Removed unsafe lifecycles in preparation for react 17 #270
  • fix startIndex not updating on change #422
  • Update eslint config to extend airbnb (lots of lint errors now, lint updates coming soon...)

0.8.17

3 years ago
  • react-swipeable v5 update courtesy of @hartzis 🎊 🙏 ❤️

0.8.16

3 years ago

Commit 128b552 was reverted


0.8.15

3 years ago
  • Add style to package.json #394
  • Add the ability to slide by hovering thumbnails #387
  • fullscreen button - image doesn't fit over screen #383

0.8.14

3 years ago

Fix issue with calling window on constructor breaking SSR


0.8.13

4 years ago
  • Trigger onSlide after slide transition #380
  • use static event listener through lifecycle #374

0.8.12

4 years ago
  • Replaced unicode underscore with regular (#337)
  • fix: cancel debounce when component unmount (#328)

0.8.11

4 years ago

0.8.10

4 years ago
  • Fix broken thumbnail label #295
  • Allow imageSet source type #303
  • RTL support #256

0.8.9

4 years ago

Fixes #288


0.8.8

4 years ago
Backwards Incompatible changes
  • slideOnThumbnailHover prop removed
Other changes
  • Handle resizing using ReactResizeDetector #266
  • Thumbnails not aligned correctly when items.length changes (#267)
  • Use disabled property of Swipeable to disable swipe (#283)
  • Other bug fixes and improvements

0.8.7

5 years ago
  • added additionalClass prop on root node of the component
  • added option to change translate3d to translate css using prop useTranslate3D (default true)
  • added bulletClass and bulletOnClick attribute on images
  • added support for <source> and <picture> for images
  • other bug fixes and enhancements

0.8.6

5 years ago

Fixes #229, and overall swipe experience when scrolling up/down vs left/right.


0.8.5

5 years ago
  • Fix bug with swipes not working despite a flick
  • Lock swiping while slide is transitioning
  • other code cleanup/fixes

0.8.4

5 years ago
Fix issue #217 New Props
  • swipeThreshold: Integer, default 30
    • A percentage of how far the offset of the current slide is swiped to trigger a slide event. e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event.
  • stopPropagation: Boolean, default false
    • Automatically calls stopPropagation on all 'swipe' events.
  • preventDefaultTouchmoveEvent: Boolean, default false
    • An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)

0.8.3

5 years ago
  • Support of additional touch events on the slides
    • onTouchEnd: Function, callback(event)
    • onTouchStart: Function, callback(event)
  • Adds onThumbnailClick prop callback
  • Fixed warning for setState when resizing the gallery after unmounting

0.8.2

5 years ago
  • Fix overlapping transitions when using infinite (this was happening on certain browsers going from the first to the last slide and vise versa)
  • Add prop for onTouchMove #197
  • Fixes navigation padding on mobile #195
  • Add ability to add title attribute to gallery using originalTitle and thumbnailTitle
  • Add esc key support for non native browser fullscreen
  • Minor bug fixes and performance improvement on sliding

0.8.1

5 years ago

0.8.0

5 years ago

Fix proptype warnings


0.7.16

5 years ago

0.7.15

5 years ago

0.7.14

5 years ago

Added debounce so when resizing the gallery does not make excessive calls. Added swipingTransitionDuration prop to allow adjusting the transition while swiping


0.7.13

5 years ago

Minor bug fixes and enhancements to Accessibility.

New prop useBrowserFullscreen if false, fullscreen will be done via css within the browser


0.7.12

6 years ago
  • Fixes gallery shrinking when using lazyLoad
  • Fixes a resizeTimer not being cleared on unmount

0.7.11

6 years ago
  • Adjust slide throttle based on slideDuration (fixes conflicting slide animation).
  • Fix jumpiness when lazyLoad is on, and sliding to a non loaded slide.

0.7.10

6 years ago
  • New Prop for custom slideDuration allowing you to adjust the transition of the gallery.
  • Custom render the controls with your own component
    • renderLeftNav: Function, custom left nav component

      • Use this to render a custom left nav control
      • Passes onClick callback that will slide to the previous item and disabled argument for when to disable the nav
        renderLeftNav(onClick, disabled) {
          return (
            <button
              className='image-gallery-custom-left-nav'
              disabled={disabled}
              onClick={onClick}/>
          )
        }
      
    • renderRightNav: Function, custom right nav component

      • Use this to render a custom right nav control
      • Passes onClick callback that will slide to the next item and disabled argument for when to disable the nav
        renderRightNav(onClick, disabled) {
          return (
            <button
              className='image-gallery-custom-right-nav'
              disabled={disabled}
              onClick={onClick}/>
          )
        }
      
    • renderPlayPauseButton: Function, play pause button component

      • Use this to render a custom play pause button
      • Passes onClick callback that will toggle play/pause and isPlaying argument for when gallery is playing
        renderPlayPauseButton: (onClick, isPlaying) => {
          return (
            <button
              type='button'
              className={
                `image-gallery-play-button${isPlaying ? ' active' : ''}`}
              onClick={onClick}
            />
          );
        }
      
    • renderFullscreenButton: Function, custom fullscreen button component

      • Use this to render a custom fullscreen button
      • Passes onClick callback that will toggle fullscreen and isFullscreen argument for when fullscreen is active
        renderFullscreenButton: (onClick, isFullscreen) => {
          return (
            <button
              type='button'
              className={
                `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
              onClick={onClick}
            />
          );
        },
      

0.7.9

6 years ago

0.7.8

6 years ago

New prop thumbnailPosition This allows setting the position of the thumbnail bar. Available options are top, right, bottom, left


0.7.7

6 years ago

0.7.6

6 years ago

0.7.5

6 years ago

renderCustomControls property allows you to add your own custom controls into the gallery.

Thanks to @venyii for pr #122

Other minor fixes/enhancements

  • improve build process with stage-0
  • added .eslintrc
  • added background color on slides to help avoid background images sliding behind when the images do not take full width

0.7.4

6 years ago

0.7.3

6 years ago

Fixes onTouchStart preventing page scrolling when touch starts on a thumbnail/arrow navigation Fixes onScreenChange prop to handle unsupported browsers.


0.7.2

6 years ago

Updated <li> elements to be <button> Added disableSwipe support


0.7.1

6 years ago

0.7.0

6 years ago
Breaking Changes

CSS/SCSS has been moved to a styles directory please see readme to update your paths Hovering over main image slides no longer pauses slides

Updates

Full screen support for mobile Play/Pause button support built in


0.6.10

6 years ago

Thumbnails will now adjust based on the thumbnail container and not the image gallery container.

This will allow more flexibility moving the thumbnail bar around.


0.6.9

6 years ago

0.6.8

6 years ago

0.6.7

6 years ago

0.6.6

6 years ago

Fixed the dreaded infinite swipe support when there are only two slides.

Fixed a bug where isFlick would persist on the next swipe.

Minor code cleanup


0.6.5

6 years ago

0.6.4

6 years ago
  • renderItem: Function, custom item rendering
    • As a prop on a specific item [{thumbnail: '...', renderItem: '...'}]

    • As a prop passed into ImageGallery to completely override _renderItem, see original below

        _renderItem(item) {
          const onImageError = this.props.onImageError || this._handleImageError
      
          return (
            <div className='image-gallery-image'>
              <img
                  src={item.original}
                  alt={item.originalAlt}
                  srcSet={item.srcSet}
                  sizes={item.sizes}
                  onLoad={this.props.onImageLoad}
                  onError={onImageError.bind(this)}
              />
              {
                item.description &&
                  <span className='image-gallery-description'>
                    {item.description}
                  </span>
              }
            </div>
          )
        }
      

0.6.3

6 years ago

0.6.2

6 years ago

Mostly usability improvements, also added new function getCurrentIndex()


0.6.1

6 years ago
New Function
  • fullScreen(): activates full screen
New Props
  • onImageError: Function, callback(event)
    • overrides defaultImage
  • onThumbnailError: Function, callback(event)
    • overrides defaultImage
Bug fixes
  • Fixes image not showing when there was only 1 image.
Other changes
  • Ability to override $ig-* scss variable #53

0.6.0

6 years ago

This release includes better mobile swipe experience.

Props added includes infinite boolean onPause function onPlay function

I've renamed the scss file so if you were previously using @import "../node_modules/react-image-gallery/src/ImageGallery"; please update to @import "../node_modules/react-image-gallery/src/image-gallery";

merged in pull request #43 and #45, and other minor bug fixes.


0.5.13

6 years ago

0.5.12

6 years ago

0.5.11

6 years ago

0.5.10

6 years ago

Release notes

disableScroll is now called disableThumbnailScroll @johannesd

hovering on thumbnails no longer slides by default, use slideOnThumbnailHover={true} if you want that feature @twanschik


0.5.9

6 years ago

0.5.8

7 years ago

0.5.7

7 years ago

0.5.6

7 years ago

0.5.5

7 years ago

0.5.4

7 years ago

0.5.3

7 years ago

0.5.2

7 years ago

0.5.1

7 years ago

0.5.0

7 years ago

0.4.8

7 years ago

0.4.7

7 years ago

0.4.6

7 years ago

0.4.5

7 years ago

0.4.4

7 years ago

0.4.3

7 years ago

0.4.2

7 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.4

7 years ago

0.3.3

7 years ago

0.3.2

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

109 Versions

TagPublished
1.2.9latest20d ago
1.2.83mos ago
1.2.71yr ago
1.2.61yr ago
1.2.51yr ago
1.2.41yr ago
1.2.31yr ago
1.2.21yr ago
1.2.11yr ago
1.2.01yr ago
1.1.11yr ago
1.1.01yr ago
1.0.101yr ago
1.0.91yr ago
1.0.82yrs ago
1.0.72yrs ago
1.0.63yrs ago
1.0.53yrs ago
1.0.43yrs ago
1.0.33yrs ago
1.0.23yrs ago
1.0.13yrs ago
1.0.03yrs ago
0.9.13yrs ago
0.9.03yrs ago
0.8.183yrs ago
0.8.173yrs ago
0.8.163yrs ago
0.8.153yrs ago
0.8.143yrs ago
0.8.134yrs ago
0.8.124yrs ago
0.8.114yrs ago
0.8.104yrs ago
0.8.94yrs ago
0.8.84yrs ago
0.8.75yrs ago
0.8.65yrs ago
0.8.55yrs ago
0.8.45yrs ago
0.8.35yrs ago
0.8.25yrs ago
0.8.15yrs ago
0.8.05yrs ago
0.7.165yrs ago
0.7.155yrs ago
0.7.145yrs ago
0.7.135yrs ago
0.7.126yrs ago
0.7.116yrs ago
0.7.106yrs ago
0.7.96yrs ago
0.7.86yrs ago
0.7.76yrs ago
0.7.66yrs ago
0.7.56yrs ago
0.7.46yrs ago
0.7.36yrs ago
0.7.26yrs ago
0.7.16yrs ago
0.7.06yrs ago
0.6.106yrs ago
0.6.96yrs ago
0.6.86yrs ago
0.6.76yrs ago
0.6.66yrs ago
0.6.56yrs ago
0.6.46yrs ago
0.6.36yrs ago
0.6.26yrs ago
0.6.16yrs ago
0.6.06yrs ago
0.5.136yrs ago
0.5.126yrs ago
0.5.116yrs ago
0.5.106yrs ago
0.5.96yrs ago
0.5.87yrs ago
0.5.77yrs ago
0.5.67yrs ago
0.5.57yrs ago
0.5.47yrs ago
0.5.37yrs ago
0.5.27yrs ago
0.5.17yrs ago
0.5.07yrs ago
0.4.87yrs ago
0.4.77yrs ago
0.4.67yrs ago
0.4.57yrs ago
0.4.47yrs ago
0.4.37yrs ago
0.4.27yrs ago
0.4.17yrs ago
0.4.07yrs ago
0.3.47yrs ago
0.3.37yrs ago
0.3.27yrs ago
0.3.17yrs ago
0.3.07yrs ago