It would be nice to have gesture controls, such as pinch-zooming and swiping left and right, within the lightbox on mobile devices.

As an example, PhotoSwipe http://photoswipe.com/ has these features on a mobile device.

Bonus points if the gestures work on a MacBook with a trackpad as well. :)

Using the latest 0.3.3 version of react-grid-gallery:

warning.js?8a56:36 Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
warning.js?8a56:36 Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

I believe these issues might give you some guidance in removing the PropTypes warning:
react-toolbox/react-toolbox#1410
react-toolbox/react-toolbox#1413

And this may help with the deprecated React.createClass:
reactjs/react-modal#367

Hi again,

I'd like to hook into the onClickThumbnail method but still run the default after - is that possible?

Something like this:

<Gallery onClickThumbnail={(index) => this.incViewCount(index)} />

incViewCount(index) {
   // increase view count in backend

   // open lightbox
}

Any help is greatly appreciated!
David

Thank you for sharing react-grid-library. It's really useful!

Is there a way to include a link (or html) that is rendered when the image is open ?

One idea would be to treat the caption as html and then I can link there to the image license or some additional page.

I was wondering if there is a possibility that the thumb images width and height are automatically sized from the image data. I want to avoid to define every width and height of every thumb.

The underlying react-images Lightbox component has a nice option showThumbnails, which draws a strip of images from the gallery along the bottom.

Please consider adding this to your Gallery Lightbox options.

This component is unfortunately unusable when using server rendering since it's accessing the document without checking if the DOM is available first

When an image is displayed in portrait orientation on an iPad in landscape orientation, the close button is off the screen. This means the lightbox cannot be closed when a portrait image is displayed, perhaps being impossible if the gallery only has portrait images and backdropClosesModal is set to false.

i want to show images from local sources.how can i handle with this.

PR #7 introduces a small edge case whereby duplicate images causes an error (two children cannot have the same key) and subsequently only the first of any repeated image src can be rendered.

On a mobile device, tapping the image shows the checkmark overlay to select the thumbnail. However, if an image is tapped and the lightbox displays then the checkmark will never display again and it becomes impossible to select any images in the gallery.

Ideally, one wouldn't need to tap the image twice to select it in any case. Perhaps, an option to always show the checkmark overlay (or just on mobile) is needed?

Right now it seems we are passing in a static number for the height of the row, but if there are images passed into the gallery with drastically different height and width, the row height is limited so the gallery rows are not completely filled from left to right. Note that I will have no control over the order of the images being passed in.

https://github.com/benhowell/react-grid-gallery#gallery-options
onClickThumbnail

This function can also take the following parameters: index (image index in array) and event (the click event).

Related #18

First off, thanks so much for sharing react-grid-gallery. It's working quite nicely.

A few things have me wandering to and fro...

1. shuffleArray - how and where is this defined. When I remove it the gallery works fine; but the shuffle would be sweet. note - I installed 'react-shuffle'; was not the solution.

2. srcset - I'm currently trying a " lightboxImage:{src: '', srcset:[ ] " approach. I can't get it working.
   Please, could you give an example of the necessary setup for srcsets to work in react-grid-gallery.

Thanks again!

Sorry for so many feature requests but this is almost perfect for my needs. Thanks for your efforts.

In the app I'm currently building, there are two primary use cases for which I would like to use this gallery:

• Viewing images. The user is primarily viewing images and is only making selections as a secondary concern.
• Selecting images. The user is primarily selecting images and is only viewing them as a secondary concern.

The first use case is handled very well.

However, the second use case is not handled as well. Ideally, in this case, tapping anywhere on the image would select it instead of viewing the lightbox. I could use onClickThumbnail to do this but then there would no way for the user to view the larger image in the lightbox unless I confuse them by doing it with onSelectImage.

I'm proposing a "View Larger Image" button for the upper-right corner that works similarly to the selection button but launches the lightbox with the image instead. Of course, this could be enabled or disabled in the same way as the selection button.

A more thorough implementation would be to give each of the four corners it's own target. Each could be used as the selection button or for other events like viewing the larger image in the lightbox so the designer has the option to put select in whatever corner they like, for example.

If each of these targets had custom SVG icons and styling (e.g. deselected, hover, active, and selected), they could be used for any number of user-defined functions, such as:

• Favorite Move the image to the beginning of the array with a red heart when selected.
• Trash A trash can that removes the image from the array.
• Delete A slashed-circle icon that deletes the image when viewing trashed images.
• Move Left or Move Right Arrows that moves the image left or right in the image array.
• Mirror Image Mirrors the image.
• Rotate Image Rotates the image.

Of course, the call back would be responsible for doing the actual processing and communicating the changes to the gallery and server.

To allow designers to have greater options, instead of just the four corners, the target might also include the midpoint of each edge (for a total of eight targets) such as: (The midpoint left and right seem ideal for the move left and move right targets, for example.)

+–––––––––––––––––––––+
| O        O        O |
|                     |
| O                 O |
|                     |
| O        O        O |
+–––––––––––––––––––––+

Finally, if instead of sending individual buttons to each target, you could set an array of buttons for each target, more complex things could be done. For example placing rotate clockwise and rotate counterclockwise buttons on the bottom left side, flip horizontal and flip vertical on the bottom right side, and three other options in the bottom center, like:

+–––––––––––––––––––––+
|                     |
|                     |
|                     |
|                     |
| OO      OOO      OO |
+–––––––––––––––––––––+

If arrays of buttons are created, then designers might like to have the center of the image for buttons as well, like:

+–––––––––––––––––––––+
|                     |
|                     |
|         OOO         |
|                     |
|                     |
+–––––––––––––––––––––+

Hi,

Thanks for building such an amazing module. While trying to make use of this module, I am unable to close the Lightbox using Esc or cross button

Hi there,

is there any plans to support video in this gallery?

Thanks

David

When updating images from state to Gallery component, i am getting a console error of RangeError: Maximum call stack size exceeded. Images are rendered correctly but getting the following error.

Uncaught RangeError: Maximum call stack size exceeded
at trackProperties (trackForMutations.js?7bd4:16)
at trackProperties (trackForMutations.js?7bd4:32)
at trackProperties (trackForMutations.js?7bd4:32)
at trackProperties (trackForMutations.js?7bd4:32)
at trackProperties (trackForMutations.js?7bd4:32)
at trackProperties (trackForMutations.js?7bd4:32)
at trackProperties (trackForMutations.js?7bd4:32)
at trackProperties (trackForMutations.js?7bd4:32)
at trackProperties (trackForMutations.js?7bd4:32)
at trackProperties (trackForMutations.js?7bd4:32)

Is there a way to or has anyone been able to set a max number of rows? I'd like to only show two rows regardless how many images I have.

Hi is it possible to load actual images lazily when they're visible in the viewport?

Thanks.

Hey there, I'm trying to work on including this into my project, but using the simple example I get some serious dependency issues that I can't quite work out.

When I first install this lib, it complains about being unable to resolve module 'react-dom'. All well and good, I'll install react-dom at the wanted version, but then 'react-dom' starts throwing errors about not being about to resolve module 'react/lib/React' -- I'm thinking something is fundamentally wrong.

Have you ran into anything like this? Would really love to use this library.

Hi,

Thanks for the awesome library!

I'm trying to implement the gird gallery so that when I click on a button, the lightbox will be displayed immediately isOpen={true}

I noticed the lightbox adds css rule: overflow-y:hidden to the body tag, which is fine except it's not removing that css rule when I close the lightbox (press esc) causing the page to freeze (no scroll)!

Any ideas/suggestions on how to workaround this?

Hello. Is there any reason not to have it in code if i want to rewrite opacity 0 style for example?

I may be doing things wrong, but could you run node gulpfile.js and commit?

The constructors for Gallery.js and CheckButton.js break on IE 10 and lower. But running node gulpfile to update the lib files and then installing locally fixes my app. thanks

It looks like you've copied my entire codebase with little changes that could have been pull requested and are trying to pass off this component as yours. You need to take this repo down.

It would be nice to allow to click on overlay, I've seen in your code the pointer events are all set to none. I tried to add onClick to my overlay but they get overwritten by the parent div in your source code.

Its possible for someone to add buttons onHover which do different functions to the image, it would be really nice if they are clickable.

Thanks for a good gallery.

Very useful gallery :)

Would love to be able to provide bespoke tileViewportStyle function (or some other means of setting selected and unselected styles), as well as being able to disable the tick icons?

Hi,

I've included this component inside a modal. Everything else mounts properly in my modal except for this component. The only way I can force it to render is by resizing the window or forcing a state change in the Chrome inspector. Here's a quick glance what the state of the component looks like by default after the page has loaded.

Any ideas to work around this?

Is it possible not to show the caption below the thumbs but only show a caption below the big image when they open them in the modal?

If I re-render a gallery with new image props, it doesn't show new images until I resize the window. I found that in componentDidUpdate it will not update the state unless the client has been resized - I'd recommend moving the thumbnail state update to its own function instead of onResize.

I'm not quite sure why componentDidUpdate only responds to resize, or I'd submit a PR.

https://github.com/benhowell/react-grid-gallery/blob/master/src/Gallery.js#L44

Similar to #37 except I do see the thumbnails the first time the modal opens. However, when new data becomes available and the props are updated, when the modal is reopened there are zero thumbnails, not even the ones that were previously displayed.

I have a put together a minimal app to demonstrate the issue here. Initially 2 images are available - click 'Create gallery' to see them. Then click 'Trigger new image data' to simulate a new image becoming available and then reopen the modal.

Hello everybody,

I'm getting this error in a project with Preact activated.

Does someone have any clue about this?

Thanks,

Are there options to pass in custom CSV for the selected icon and is it possible to theme the selected state so that I can control the size of the border (grey border that comes when thumbnails are selected) and its color?

@benhowell - Thank you for the awesome utility. Everything works perfect but when I select an image it doesn't get highlighted as it does on demo. on select functions gets called and I could print index and image object on console though.
Below is the code I am using:

onImageSelect(index, image) {
console.log('Selected image',index, image)
}

<Gallery
images={IMAGES}
onSelectImage={this.onImageSelect}
enableImageSelection={true}
/>

am I missing something? any help is appreciated. Thanks again.

I think it'd be useful to let end-users replace the lightbox with their own implementation. Maybe a onOpen() instead of passing customControls to the gallery as a whole. That'd give people the chance to implement things apart from lightboxes to display the full image---for example instead handling the showing of an image preview with an inline block like Google images does it.

i tried using this module and got: Line 136: 'shuffleArray' is not defined no-undef ill would be grateful if i could get the reason why

should create a prop "id" that allows anyone using this to set their own id

class name instead should be "Gallery"

At present, thumbnail width and height need to be passed in as props.
e.g.

{
    src: ...,
    thumbnail: ...,
    thumbnailWidth: ...,
    thumbnailHeight: ...,
    caption: ...
}

Instead, create js image obj and read width and height.

https://github.com/flickr/justified-layout

In Flickr's version you have certain knobs you can toggle:

• fullWidthBreakoutRowCadence - This lets you insert a fullwidth wide image every N images. Flickr uses it for their album pages. It's also handy for a display with a 'hero' banner style first image.
• showWidows - should we ommit the last few images from the layout if they can't make up a full row? Useful in two cases:
• Infinite scrolling: You can cut off a logical 'page', insert a stretch add, then include the ommited images in the next page.
• Album pages preview & summary; you can cut off the last images and stick a 'more' images button there.
• maxNumRows - exactly what it sounds like; constrains the # of rows delivered to prevent overly long pages when resizing the screen (or letting you use essentially the same code b/w mobile and desktop).
• You don't actually need image heights/widths; you can just set a target height and give it aspect ratios. This also simplifies changing the layout to target different device sizes.

The rest of their code deals with edge cases.
Hopefully that helps you decide. For what it's worth, I think its emminently useful.

About your code though....

• 'srcset' is documented but doesn't appear to be used anywhere; not even the lightbox.

Very nice gallery. However, passing classNames or own styles to the single tags would be useful.

When i use tag in render i got the following error.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

When i go through the code i got ' this._gallery.clientWidth' as undefined. From where you are getting this props..
Thanks in advance..

For some reason the images are defaulting to 271x180 even though the image was clearly set to 117x77, it still filled 271x180:

companies.json

 "misc": {
        "enabled": true,
        "list": [
          {
            "src": "/lib/assets/xpeppers/company/xpeppers-iteration-planning.jpg",
            "thumbnail": "/lib/assets/xpeppers/company/xpeppers-iteration-planning-thumb.jpg",
            "thumbnailWidth": 116,
            "thumbnailHeight": 77
          }

        ]
      }

I hacked it manually in Chome Dev tools...and this shows how It should have shown up based on 117x77:

The code that calls it

<ImageGallery images={company.images.misc.list} />

ImageGallery.js

import React, { Component } from 'react';
import Gallery from 'react-grid-gallery';

export default class ImageGallery extends React.Component {
  render() {
    return (
      <Gallery images={this.props.images} />
    )
  }
}

You can see here the viewport is not tight to the image width and height. And again I want these thumbs to show smaller

So how can I get this to work, why is the viewport size overriding my thumbnailWidth and thumbnailHeight?

Sometimes images look very strange. Can I do anything with it?

screen
Look at top left image. It props

marginLeft: -26
scaletwidth:101
src:"https://pp.userapi.com/c621830/v621830842/2a79a/D5bk9J7tk4s.jpg"
srcset:undefined
thumbnail:"https://pp.userapi.com/c621830/v621830842/2a797/KjtXLuTOrc0.jpg"
thumbnailHeight:604
thumbnailWidth:340
vwidth:49

Props for top right image

marginLeft:-257
scaletwidth:1055
src:"https://pp.userapi.com/c621830/v621830842/2a7ae/QsEpr5qTB_M.jpg"
thumbnail:"https://pp.userapi.com/c621830/v621830842/2a7ab/jEDe8cKl3p0.jpg"
thumbnailHeight:103
thumbnailWidth:604
vwidth:540

#30

Can we have a prop to control the lightbox image size? React-images lets you pass in a width prop.

It would be nice to have the ability to select images (and view whether they were already selected) from within the lightbox as well as the grid.

Is it possible to pass in a className for more find grained control over image layout?

Would like to adjust things to be more responsive.

Currently, thumbnail width and height properties are required. We can make them as non-required.
So, in this case, the js lib have to calculate the rate of width & height to show properly.
I'm require this feature, because in some cases we aren't know image width & height to set.

Warning on console

Failed prop type: The prop images[3].thumbnailWidthis marked as required inGallery, but its value is undefined.
NaN is an invalid value for the width css style property. Check the render method of Image.

When I add a customOverlay with an HTML element with an onClick handler, it doesn't fire when I click on the custom overlay element.

Example:
[{ src: "https://www.html5rocks.com/en/tutorials/speed/img-compression/len_std.jpg", thumbnail: "https://www.html5rocks.com/en/tutorials/speed/img-compression/len_std.jpg", thumbnailWidth: 100, thumbnailHeight: 100, customOverlay: (<button style={{zIndex: 10000}} onClick={()=>{alert('hello!')}}>hello world</button>) }]
When I hover over the thumbnail, the button is visible as expected. But when I click on it the alert never shows and the lightbox shoes instead.

I also using onClickThumbnail to inspect the target to see if I can tell when the button was clicked, but that also doesn't work. The target is always the image tag.

Please let me know what the correct approach is. My goal is to add "delete" button where the user can click an X button to delete the image.

Thanks!