benhowell / react-grid-gallery Goto Github PK
View Code? Open in Web Editor NEWJustified image gallery component for React
Home Page: https://benhowell.github.io/react-grid-gallery/
License: MIT License
Justified image gallery component for React
Home Page: https://benhowell.github.io/react-grid-gallery/
License: MIT License
should create a prop "id" that allows anyone using this to set their own id
class name instead should be "Gallery"
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!
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?
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
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?
This component is unfortunately unusable when using server rendering since it's accessing the document without checking if the DOM is available first
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?
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.
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
https://github.com/flickr/justified-layout
In Flickr's version you have certain knobs you can toggle:
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....
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.
Hi is it possible to load actual images lazily when they're visible in the viewport?
Thanks.
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.
Can we have a prop to control the lightbox image size? React-images lets you pass in a width prop.
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?
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
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..
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.
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
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?
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 in
Gallery, but its value is
undefined.
NaN is an invalid value for the
width css style property. Check the render method of Image.
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.
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?
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.
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.
react-grid-gallery/lib/Image.js
Line 150 in 1a33a0d
Hello. Is there any reason not to have it in code if i want to rewrite opacity 0 style for example?
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)
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?
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
i want to show images from local sources.how can i handle with this.
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. :)
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.
Hi there,
is there any plans to support video in this gallery?
Thanks
David
@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.
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
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.
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
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.
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.
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.
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.
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
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:
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:
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 |
| |
| |
+–––––––––––––––––––––+
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.
First off, thanks so much for sharing react-grid-gallery. It's working quite nicely.
A few things have me wandering to and fro...
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.
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!
Very nice gallery. However, passing classNames or own styles to the single tags would be useful.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.