React Image Lightbox Versions Save

Breaking changes

• Remove deprecated CSS classes (close, closing, download-blocker, image-current, image-next, image-prev, inner, next-button, not-loaded, outer, prev-button, toolbar, toolbar-left, toolbar-right, zoom-in, zoom-out)
• Put styles at top of body for easier css override.

Thanks to the generous time and effort contributed by @webcarrot, react-image-lightbox now works with mobile browsers, supporting pinch to zoom and swipe.

With the onImageLoadError prop, you can assign a callback function to be called whenever an image fails to load. Many thanks to @satya-dash for the PR!

You can now add captions to images by using the imageCaption prop, thanks to @c00kiemon5ter. The usage is the same as the imageTitle prop.

• Fixed IE 9 Zoom behavior
• Improved rendering performance by switching from positioning with left and top to transform and translate
• Exposed react-modal styles for adjustment via reactModalStyle prop
• Added classes to toolbarItem and toolbarItemChild elements
• Added prop enableZoom to allow disabling of zoom functionality

Add ril- prefix to class names and add deprecation notice for old ones. Fixes #15

• Class names were too generic, and were clashing with other libraries.

Fix bug where using hotkeys would unload cached images

• Using the keyboard shortcuts would make the component render an extra time and unload the image about to be viewed. It would then immediately load again. Kind of inefficient.

Create loading icon

• The code mentioned a loading icon that appears whenever waiting on an image. That was a lie. Now it is not.

Fix download discourager bug

• A typo prevented the class from putting a transparent image above the protected image

Enable image pan with touch events

Fix mobile (Safari) visual bug

• The edges of the lightbox were getting cut off due to the react-modal style settings.

Preface

With the upgrade to React 15.2.0, warnings are thrown whenever unrecognized props are given to DOM elements. Some users, myself included, were seeing warnings whenever developing (See #10). One of those warnings was for the portal component I had made, which has now been replaced (see react-modal note below). The other was for Radium (see Radium note below), which I was using for styling the component without requiring developers to include an external stylesheet.

react-modal (potential breaking changes)

I replaced Portal.js, my custom component to solve z-index issues, with the more complete react-modal component. This is the primary reason for bumping the version up to 3, as while the underlying ideas are the same as before (append children to the end of the document body, set z-index to 1000), I'm not confident enough in my knowledge of the workings of react-modal to say that the component will be displayed exactly as it was before. In my own projects, however, I have had no issues after the update. react-modal also comes with the (behavior-changing) benefit of confining the tab key targets to the modal contents.

Radium→Inlined CSS

Radium's developers are aware of the react warnings issue, but progress on the ticket was slow, and in the interest of more natural style handling and fewer dependencies, I decided to change back to CSS inlined via Webpack's style-loader.

Webpack

Webpack has some handy features like hot loading of react components and inlining CSS in code with style-loader, so I decided to abandon the gulp config I had been using.