Skip to content

Releases: xiaolin/react-image-gallery

bug fixes/enhancments

20 Feb 23:08
Compare
Choose a tag to compare

Minor bug fixes and enhancements to Accessibility.

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

Bug fixes

29 Jan 23:47
Compare
Choose a tag to compare
  • Fixes gallery shrinking when using lazyLoad
  • Fixes a resizeTimer not being cleared on unmount

Bug fixes

22 Jan 04:57
Compare
Choose a tag to compare
  • Adjust slide throttle based on slideDuration (fixes conflicting slide animation).
  • Fix jumpiness when lazyLoad is on, and sliding to a non loaded slide.

Custom rendered icons

07 Jan 22:04
Compare
Choose a tag to compare
  • 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}
            />
          );
        },

Thumbnail bar positioning

03 Jan 02:01
Compare
Choose a tag to compare

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

Custom controls added to image gallery

24 Dec 02:45
Compare
Choose a tag to compare

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

Bug Fixes

22 Oct 19:51
Compare
Choose a tag to compare

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

Minor enhancements

28 Sep 01:03
Compare
Choose a tag to compare

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

Full screen support with Play/Pause

10 Sep 20:36
Compare
Choose a tag to compare

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

Thumbnail container a bit more flexible

25 Aug 00:28
Compare
Choose a tag to compare

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.