Do plugins like Zoom, Fullscreen work with custom rendered slide content?

[DeFuex]

Hi, short question, as the title suggests, is it possible that custom rendered slide content works with e.g: zooming, other plugin functionalities? I didn't necessarily try it out yet, but i know that it does not work for photoswipe gallery. Furthermore, if you would build a custom comment section where would you put the comment section? As a part of the custom slide content or is it also possible to make an overlay that floats right sided next to the slide content without any issues? So far photoswipe gallery and lightgallery have both problems handling this and theres a lot of customisation needed to make those things work.

[igordanchenko]

Hi there!

is it possible that custom rendered slide content works with e.g: zooming, other plugin functionalities?

Most plugins work fine with custom rendered slide content. Zoom plugin is a special case though. It supports only image slides (slide.type === undefined || slide.type === "image"), and it takes over image rendering even when you define your own render.slide render function (you may not necessarily need to provide custom render.slide function in your case). While it's possible to add support for custom slide types, I'd like to learn about specific real-life use case before I implement such support.

Furthermore, if you would build a custom comment section where would you put the comment section? As a part of the custom slide content or is it also possible to make an overlay that floats right sided next to the slide content without any issues?

I could provide better advice if you could share a mock-up of the feature you have in mind.

If you want to put some content / custom elements that are absolutely positioned over the slide, you can use render.slideFooter render function:

render={{
  slideFooter: () => (
    <div style={{ color: "white", position: "absolute", bottom: 10, right: 10 }}>
      Content
    </div>
  ),
}}

But if you want to implement a side panel like in Google Photos (see #121), you can implement it by adding a custom module to the lightbox.

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-121-6spot4

I hope this helps.

[Demetri0]

I'd like to learn about specific real-life use case before I implement such support.

I need to add image Flip/Rotate functionality, and to work properly styles to transform: rotate() must be child of Zoom plugin (otherwise moving of zoomed image doesn't works properly).

I spend several hours in attempts to make it work to finally figure out that Zoom doesn't supports custom render slides.

[igordanchenko]

Please see the following draft implementation of the Rotate plugin - #100 (comment)

[Demetri0]

It doesn't work properly without predefined image sizes, even if I try to calculate width & height for rotate plugin, and it starts to work properly - then zoom is broken and doesn't work any more (when I remove predefined width and height).

[igordanchenko]

Thank you. I've added a note indicating that the draft Rotate implementation is incompatible with Zoom. At this point, I'm not even sure it's feasible to implement image rotation with just CSS transformation without adding it as a first-class feature to the library core and some plugins like Zoom.

[DeFuex]

wow, that Info plugin approach looks pretty good (thanks for sharing that) :)
my current approach is trying to put an overlay with relative position as comments section, but photoswipe gallery needs a lot of customisation, and with lightgallery i didn't even figure out yet how to open comment section overlays simultaniously without the lightgallery closing constantly (there's a lot of internal handled event things in these libraries that need !import overwrites to get the actual results)

Another question, is there some sort of component that is a direct child of the , like in other libraries? My approach/structure is currently that i have a gallery component where i map through my array[][] of data and then a child component that basically displays all elements in a thumbnail like manner in the gallery, but when i press one i would like to open the gallery directly. Would this approach work with the render or slides properties as well without changing too much of my structure?

Hence, another feature i would maybe need to apply is that in our software we sometimes have media like comments or audio or so without image content, so i would like to put this centered as slide content instead of a typical image. (i'm not sure how far its gonna go, but maybe even having an image + other content simultaneously on the slide content (thats why i asked about if the plugins like zooming, download image and such would still work), but i guess that would need some customisation.

[igordanchenko]

Another question, is there some sort of component that is a direct child of the , like in other libraries?

A direct child of what?

My approach/structure is currently that i have a gallery component where i map through my array[][] of data and then a child component that basically displays all elements in a thumbnail like manner in the gallery, but when i press one i would like to open the gallery directly. Would this approach work with the render or slides properties as well without changing too much of my structure?

I'm afraid I can't answer this question without seeing some sample code or mockups.

Hence, another feature i would maybe need to apply is that in our software we sometimes have media like comments or audio or so without image content, so i would like to put this centered as slide content instead of a typical image.

Did you have a chance to explore the Custom Slides example? You can render pretty much anything you want as a custom slide.

i'm not sure how far its gonna go, but maybe even having an image + other content simultaneously on the slide content (thats why i asked about if the plugins like zooming, download image and such would still work), but i guess that would need some customisation.

As I explained above, Zoom plugin is one notable exception that works only with standard image slides. Download plugin should work with custom slides as long as you provide downloadable url in your slide.

[DeFuex]

Sry, took a while for me to get back, in the end i figured it out. The custom plugin example really helped, thanks again :)