Image rotation

[JackGamesFTW]

would be cool if there was a plugin that adds two buttons to rotate a image left or right 90 degrees, incase a image is in the wrong orientation

love the package btw, moved away from another one and it was really easy to move over

[igordanchenko]

Thank you for sharing this idea. I'll add it to the list of feature candidates for future releases. Based on my initial assessment, support for image rotation would need to be built into the lightbox core, Thumbnails, and Zoom plugins. Does compatibility with Thumbnails and Zoom plugins matter in your case?

April 2025 update

The image rotation plugin is tentatively slated for v4 as proper implementation of such a plugin requires major re-engineering of the library's internal implementation.

At this point, there are two prototypes compatible with v3. Neither is perfect, and both have their own limitations.

1. CSS-based implementation

https://stackblitz.com/edit/yet-another-react-lightbox-100

Pros: highly performant
Cons: isn't compatible with Zoom plugin

2. Image rotation via 2D canvas

https://stackblitz.com/edit/yet-another-react-lightbox-100-1

Pros: compatible with all other plugins
Cons:

• resource intensive
• requires CORS configuration for cross-origin images

[momosetti]

I achieved image rotation by customizing the render prop as shown below:

Custom slide:

const renderSlide = ({ slide }: { slide: Slide }): React.ReactNode => {
  // Custom rendering logic for slide
  // Return a React node to render the custom slide
  return (
    <img
      src={slide.src}
      alt={slide.alt}
      style={{
        transform: `rotate(${rotationAngle}deg)`,
        transition: 'transform 0.4s ease-in-out 0s',
      }}
    />
  );
};

To handle the rotation angle, I set a local state:

const [rotationAngle, setRotationAngle] = useState(0);

And then I used the Lightbox component with the following props:

<Lightbox
  // Lightbox props
  toolbar={{
    buttons: [
      // Button for rotating left
      <button
        key="to-left-btn"
        type="button"
        className="yarl__button"
        onClick={() => {
          setRotationAngle((prevAngle) => prevAngle - 90);
        }}
      >
        <MdRotateLeft size="30" />
      </button>,
      // Button for rotating right
      <button
        key="to-right-btn"
        type="button"
        className="yarl__button"
        onClick={() => {
          setRotationAngle((prevAngle) => prevAngle + 90);
        }}
      >
        <MdRotateRight size="30" />
      </button>,
      // Other toolbar buttons used in the Lightbox header
      'zoom',
      'close',
    ],
  }}
  render={{
    slide: renderSlide,
  }}
/>

[laichak]

The build-in ImageSlide handles onLoad, onError, onClick, draggable, etc.

Alternative to custom slide, setting the Lightbox style works too:

<Lightbox
   styles={{
      slide: {
         transform: `rotate(${rotationAngle}deg)`,
         transition: 'transform 0.4s ease-in-out 0s'
      }
   }}
/>

[igordanchenko]

@momosetti @laichak

Thank you for suggesting this creative approach. However, this implementation works well only for square images. All images with an aspect ratio other than 1:1 would either get cropped on the sides or wouldn't fill all available space. An additional scale transformation is needed here.

[igordanchenko]

@JackGamesFTW @momosetti @laichak

Piggybacking on the idea proposed by @momosetti, I put together a proof-of-concept implementation that works with Thumbnails and Zoom plugins (though I haven't thoroughly tested compatibility with Zoom plugin). This implementation is not compatible with imageFit: 'cover'. Please feel free to test it and provide your feedback.

Update: this draft implementation does not work properly with Zoom plugin.

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-100-7d49f7?file=%2Fsrc%2FApp.tsx

https://stackblitz.com/edit/yet-another-react-lightbox-100

[igordanchenko]

Is there a plan to add Zoom plugin compatibility?

I'm afraid not, as I do not see a clear path to make this PoC compatible with the current implementation of the Zoom plugin.

[pavanpej]

I think this link is broken (similarly, the Codesandbox links in other discussions all link to the same incomplete Codesandbox fork, which doesn't have the custom code specific to each discussion). Not sure if this is just me.
(This is because the Codesandbox link has run out of MicroVM credits, so others have to fork the original)

[igordanchenko]

I think this link is broken (similarly, the Codesandbox links in other discussions all link to the same incomplete Codesandbox fork, which doesn't have the custom code specific to each discussion). Not sure if this is just me.

Huh, it looks like CodeSandbox's Fork feature is completely broken. Instead of forking the most recent revision, it forks the initial revision, basically recreating the original sandbox that was used as the initial template. That's totally bonkers...

(This is because the Codesandbox link has run out of MicroVM credits, so others have to fork the original)

This is because CodeSandbox gutted its free tier plan after pushing everyone to migrate to the "unlimited cloud devboxes", making the devboxes completely unusable for open-source projects under the free plan. I'm now even unable to open any of the sandboxes I created in the past several years.

Anywho, I happen to have a copy of that sandbox locally (hopefully, it's the most recent version), so I'm publishing it on StackBlitz.

https://stackblitz.com/edit/yet-another-react-lightbox-100

[pavanpej]

Thanks for the quick reply. Any chance you could update the other links as well?

This library is great, and I was using some pieces from the above example to create my own Rotation plugin, so I felt like others will benefit from the CodeSandbox examples you have posted.

I also feel like the documentation on how to create your own plugins is a bit sparse, so that's another suggestion/request from me (updating the https://assets.yet-another-react-lightbox.com/plugins with another section potentially titled something like "Writing custom plugins" with an example)

Example plugin that I am talking about (could be included as an example under the above new section) - https://gist.github.com/pavanpej/857835d2b59d09ed0162b2bd59f80cb7

Of course, the StackBlitz link posted above is much more extensive, and could also become an excellent example in how to create one's own plugin.

[igordanchenko]

Thanks for the quick reply. Any chance you could update the other links as well?

I'm afraid this won't be possible as I don't have copies of most of the old sandboxes.

I felt like others will benefit from the CodeSandbox examples you have posted.

I completely agree. But it wouldn't be an issue in the first place if only CodeSandbox's Fork feature worked as intended.

I also feel like the documentation on how to create your own plugins is a bit sparse, so that's another suggestion/request from me (updating the https://assets.yet-another-react-lightbox.com/plugins with another section potentially titled something like "Writing custom plugins" with an example)

Thank you for sharing this feedback. I'll need to revisit the docs at some point. In the meantime, feel free to propose documentation improvements with a PR.

And in terms of plugin examples, there are ten excellent examples right here on GitHub.

https://github.com/igordanchenko/yet-another-react-lightbox/tree/main/src/plugins

[telisjok]

An even better approach would be to set a class in the Lightbox and then apply your styles in the img element of the slider.
I would recommend you to do this if you want to use ZOOM plugin too. If you rotate the whole slider (let's say 90 degrees) then if you zoom an image and drag and the image, the X Y axis will have been rotated as well, having as a result to move your cursor downwards but the image will move to the right.
For the styles part, I'm using tailwind.

const [rotationAngle, setRotationAngle] = useState(0);

const handleRotateLeft = () => {
  setRotationAngle((prevAngle) => (prevAngle <= 0 ? 270 : prevAngle - 90));
};

const handleRotateRight = () => {
  setRotationAngle((prevAngle) => (prevAngle >= 270 ? 0 : prevAngle + 90));
};

<Lightbox
  slides={slides}
  className={`rotated${rotationAngle}`}
  toolbar={{
    buttons: [
      <button
        key="rotate-left"
        type="button"
        className="yarl__button"
        onClick={handleRotateLeft}
      >
        <FontAwesomeIcon icon={faRotateLeft} size="lg" />
      </button>,
      <button
        key="rotate-right"
        type="button"
        className="yarl__button"
        onClick={handleRotateRight}
      >
        <FontAwesomeIcon icon={faRotateRight} size="lg" />
      </button>,
    ],
  }}
/>

<style>
.rotated0 {
  .yarl__slide_image {
    @apply rotate-0;
  }
}
.rotated90 {
  .yarl__slide_image {
    @apply rotate-90;
  }
}
.rotated180 {
  .yarl__slide_image {
    @apply rotate-180;
  }
}
.rotated270 {
  .yarl__slide_image {
    @apply -rotate-90;
  }
}
</style>

[Rich5]

I managed to get the main image to rotate using this css with @telisjok solution above. Seems to be working for what I need at the moment and the zoom also works. I have no idea if this breaks anything else though.

.rotated0 {
  .yarl__slide_wrapper img {
    @apply rotate-0;
  }
}
.rotated90 {
  .yarl__slide_wrapper img {
    @apply rotate-90;
  }
}
.rotated180 {
  .yarl__slide_wrapper img {
    @apply rotate-180;
  }
}
.rotated270 {
  .yarl__slide_wrapper img {
    @apply -rotate-90;
  }
}