Skip to content
This repository has been archived by the owner on Jan 19, 2023. It is now read-only.

Releases: frontend-collective/react-image-lightbox

v5.1.1

10 Aug 08:01
Compare
Choose a tag to compare
chore(release): 5.1.1

Style fixes

28 May 06:02
Compare
Choose a tag to compare

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.

Made mobile-friendly

06 Dec 00:41
Compare
Choose a tag to compare

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

Add `onImageLoadError` callback

28 Nov 02:02
Compare
Choose a tag to compare

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!

Add Captions

09 Nov 01:06
Compare
Choose a tag to compare

Image with caption

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

v3.1.0

20 Aug 17:21
Compare
Choose a tag to compare
  • 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

v3.0.3

28 Jul 07:31
Compare
Choose a tag to compare

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

v3.0.2

27 Jul 05:27
Compare
Choose a tag to compare

Enable image pan with touch events

v3.0.1

27 Jul 04:36
Compare
Choose a tag to compare

Fix mobile (Safari) visual bug

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

Radium→Inlined CSS, react-modal, Webpack

19 Jul 01:58
Compare
Choose a tag to compare

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.