Scroll Through Gallery

[SleighJ]

Expected behaviour

number of gallery images could be dynamically changed to fit on a given screen size or in a carousel type component

Actual behaviour

requires array slicing of the image array in order to restrict the number of images for use in a carousel-type component. This normally wouldn't be an issue, however, there is no way to set a unique id/key to the image object and keep track of what is being viewed/clicked in the carousel - it is instead controlled by the objects placement inside the provided array - for example, given I choose to render 4 gallery images, the given click handlers only return the numbers 0-3, with respect to its position inside the array containing the 4 images, rather than the object or a unique id of the object from the un-sliced array.

Continually, if I have sliced my array to render 4 images and a user makes the screen smaller, and only 2 images render - the user will not get to see the 3rd or 4th image because there is no way to decipher whether or not the gallery carousel has incremented through the entirety of the un-sliced array given the lack of a unique identifier. If passing the entire array to <Gallery />, gallery cannot increment through the images because its under the impression that all images are currently rendering.

A function to be fired onClick that returned the entire object, a unique identifier, or access to event.target (and the ability to attach an id or key) would suffice, however I haven't found a way to do so.

If anyone has found a work-around I am all ears!!!

Steps to reproduce behaviour

https://codesandbox.io/s/react-codesandbox-vh9sz?fontsize=14

resize the screen to be smaller, until 2 or 3 photos are rendered, and try to scroll through the rest of the array. Then click on the last photo in the gallery and try to navigate to the last photo through the lightbox. Notice that the photo is only obtainable by clicking the last thumbnail. Check the console and notice that only the number representing its place in the spliced array has printed. Try to fix this by passing the entire array to the compontent, and then try to scroll through the photos. Also, understand that allowing the user to scroll beyond its lower and upper limits is not acceptable, as I'm implementing this in a production environment and this will render blank space and eventually cause the div to collapse.

Operating system

Windows 10 Pro

Browser and version

Version 77.0.3865.120 (Official Build) (64-bit)

Hardware

Dell Desktop

[nk9]

Now that react-grid-gallery is only a grid, and doesn't contain a lightbox/carousel… I think this can be closed.