neptunian / react-photo-gallery Goto Github PK
View Code? Open in Web Editor NEWReact Photo Gallery
Home Page: http://neptunian.github.io/react-photo-gallery/
License: Other
React Photo Gallery
Home Page: http://neptunian.github.io/react-photo-gallery/
License: Other
Files in lib and dist folders are outdated.
examples folder:
more photos should be loaded, if lightbox is opened and the photos array is exhausted. loadMorePhotos
should be triggered w/o any scrolling.
documentation is not matching real code requirements
On the demo GitHub page the layout doesn't properly tile itself until after I resize the page.
Reference: #8
Looked briefly at the codebases of your project and this one:
https://github.com/benhowell/react-grid-gallery
It would seem perhaps your code and efforts have been unattributed / unacknowledged by this newer fork?
Hi! Just wondering if there might be a way to darken the lightbox background so it's harder to see through? Thanks!
Hi Sandra,
I just upgraded from 5.0.2"
to ^5.2.0"
on NPM and noticed that the grid is now broken.
Here's what it looks like using random images on Unsplash.
After downgrading to "react-photo-gallery": "5.0.2",
, the images look back to normal:
Secondarily, the versions on Github don't sync with the versions on NPM making this issue a bit more difficult to bisect/debug.
$ cat node_modules/react-photo-gallery/package.json | grep gitHead
"gitHead": "51613a4ef2da6c5885e9027abc85a9aea0cd1e42",
As soon as page loads I am getting an error
Uncaught RangeError: Maximum call stack size exceeded
at RegExp.[Symbol.replace] (native)
at String.replace (native)
at Object.escape (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:5532:34)
at getComponentKey (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:5322:27)
at traverseAllChildrenImpl (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:5360:35)
at traverseAllChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:5440:10)
at flattenChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:19767:5)
at ReactDOMComponent._reconcilerUpdateChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:17897:28)
at ReactDOMComponent._updateChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:18005:31)
at ReactDOMComponent.updateChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:17992:12)
at ReactDOMComponent._updateDOMChildren (http://localhost:3000/packages/modules.js?hash=640ff16f5cfd9a2d94bda2072319415ccb27731c:15332:12)
As when I try to resize the page ... it goes into infinite loop with following errors
Warning: performUpdateIfNecessary: Unexpected batch number (current 2012, pending 1769)
And it goes on infinitely please help me below is the code
let photoSet=[];
let src = 'https://source.unsplash.com/random/1024x768.jpg';
let img.cdnOriginal = 'https://source.unsplash.com/random/1024x768.jpg';
let srcset = ['https://source.unsplash.com/random/1024x768.jpg 1024w','https://source.unsplash.com/random/1024x768.jpg 768w','https://source.unsplash.com/random/1024x768.jpg 480w'];
photoSet.push(
{
src: src,
width: 1280,
height: 960,
aspectRatio: (Math.random()) + 1.5,
lightboxImage: {
src: img.cdnOriginal,
srcset: srcset,
},
});
<Gallery
photos= {photoSet}
/>
Please @neptunian have a look
See issue #32
react-photo-gallery 4.2.4 depends on react-images "^0.3.2".
Since react-images has released 0.3.3, react-photo-gallery will use react-images 0.3.3 and give an error.
ReactTransitionGroup:
ref
is not a prop. Trying to access it will result inundefined
being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)
Either of the followings will resolve the issue.
React-Images has an option to pass in bool preloadNextImage to support image preloading. Can that be supported by this component?
Hi. How to set gallery if dimensions is unknown or each picture scr is called 'id' for example?
Is it possible? I would like to create my own filters in the gallery, to display only images according to the user wish.
Please note that loading does not work in IE11.
I wanted to add CSS property like mix-blend-mode : darken but there is no prop to add css feature to img
Can you guide me how to add css property to images
Just updated to 6.0.0, getting this error from webpack:
Warning: Module not found: Error: Can't resolve 'react-measure' in '/dist/node_modules/react-photo-gallery/lib'
Aborted due to warnings.
let the user pass in custom callback method when clicking on gallery photo
Perhaps I'm missing the point of aspectRatio
, but I cannot see why this field is required. Even better; I don't see why this should be a api property at all.
Isn't the aspectRatio
simply width
/ height
? Anything else results in distortion no?
Photos properties
Property Type Default Description width number undefined Required. Width of the gallery image height number undefined Required. Height of the gallery image aspectRatio number undefined Required. Aspect ratio of the gallery image (width / height)
Hi ๐ ,
Thanks for building this component - it's super helpful!
Steps to Reproduce
Expected Results
All images should all display clearly with the original aspect ratio preserved at varying viewport widths.
Actual Results
About half the time, the last or second to last image displays blurry on a full width view port (1920x1080). The lightbox image quality always looks good.
If I figure it out why this is happening, I'll submit a PR ๐ .
Thanks,
Michael
This error seems to have been introduced in one of the recent commits.
My code has not changed, but has started to fail with the following error:
Cannot read property 'join' of undefined
at Gallery.js:135
at Array.map (<anonymous>)
at Gallery.render (Gallery.js:126)
Line 135 of Gallery (runtime, after compile):
_react2['default'].createElement('img', { src: photo.src, srcSet: photo.srcset.join(), sizes: photo.sizes.join(), style: { display: 'block', border: 0 }, height: photo.height, width: photo.width, alt: photo.alt })
I wasn't able to find the issue in the code (it might be a srcset vs srcSet thing), but was impressed by how clean your code is!
A quick patch is to pass srcset=[] sizes=[] as props to the gallery component
Hi,
I want to display images in a smaller size, in order to have more images per line.
I've tried to do so passing by props small photos with small width and height values, but nothing changes, there are always 3 photos per line.
Could you please give me a clue ?
Ane
Hi, I'm having a problem with using this component. I basically used the same code as the example just to see if I can get a basic gallery to show but this is what happens:
screenshot
Now the thing is , I don't have a sourcset for each image and I assume that's the problem. What I need to know is , what exactly do these images need to have in terms of dimensions in order to get them to line up properly like in your demo?
caused by browser returning the containing element of gallery's width as for example 1200px when its actually 1199.5px in the computed output. since i cannot force it to round down before it is returned to me i subtract one pixel for prevention.
Currently, the react-dom peer dependencies are behind the devDependencies -- and all of them are a few versions behind the current stable react-dom release.
from package.json (Note the 15.6.1 and 15.5.0 mismatch):
"devDependencies":{
...
-> "react": "^15.6.1",
"react-component-gulp-tasks": "^0.7.7",
-> "react-dom": "^15.6.1",
"react-images": "~0.5.2",
"react-measure": "^2.0.2"
},
"peerDependencies": {
-> "react": "~15.5.0",
-> "react-dom": "~15.5.0"
},
Additionally, since the 15.6.1 version, there have been two react-dom & react releases:
15.6.2
16.0.0
I'm currently tracking down a few bugs and am not sure if this is their cause -- but will update when I figure them out!
EDIT: The other bugs were related to separate package management issues on my machine -- I was working with an old version without knowing it. A lot of other packages are behind on the peer dependencies, so this issue is not pressing but is probably worth getting to at some point
Is there any way to add the annotorious library https://github.com/annotorious/annotorious, or alternative methods to enable annotating of images while the lightbox is open?
I am getting this error in console
proxyConsole.js:56 Warning: Unknown prop
photos on <gallery> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop in gallery (at gallery.jsx:7) in Gallery (created by RouterContext) in RouterContext (created by Router) in Router (at routes.js:8)
Hi there,
First off, thanks for the component. I'm new to it, yet it seems to be a nice solution for one of the tasks.
During first steps experiments, I found out that cols
property doesn't work as if it were ignored at all.
After digging down to lib/Gallery.js
and render()
method I can see why, generated script uses hardcoded rowLimit
:
var rowLimit = 1,
photoPreviewNodes = [];
if (this.state.containerWidth >= 480) {
rowLimit = 2;
}
if (this.state.containerWidth >= 1024) {
rowLimit = 3;
}
but not the value from the property as it should due to the documentation and original script part:
var cols = this.props.cols,
photoPreviewNodes = [];
if (!this.props.cols){
cols = 3;
}
My guess that it's an artifact of some previous version and in the Repo is an old lib/Gallery.js
which is a main script in the NPM module.
Can something be done with it in next version bump?
Cheers,
Andrew
The thumbnail images size is recalculated, so I could not manage the size of thumbnail images, in this way the size is uncontrolled by json images objects photo set. Please advice. Here is your code for recalculation, why don't you add parameter, which exclude calculation of image size by aspect ratio?
...
for (var i=0;i<this.props.photos.length;i+=rowLimit){
var rowItems = [];
// loop thru each set of rowLimit num
// eg. if rowLimit is 3 it will loop thru 0,1,2, then 3,4,5 to perform calculations for the particular set
var aspectRatio=0,
totalAr=0,
commonHeight = 0;
for (var j=i; j<i+rowLimit; j++){
if (j == this.props.photos.length){
break;
}
totalAr += this.props.photos[j].aspectRatio;
}
commonHeight = contWidth / totalAr;
// run thru the same set of items again to give the common height
for (var k=i; k<i+rowLimit; k++){
if (k == this.props.photos.length){
break;
}
...
#######################
add srcset option to lightbox component images (react-images component)
I'm using the photo gallery with react router and when I switch from one gallery to the next (swapping out the entire photoset) and then resize the browser I get this error, Uncaught Invariant Violation: findDOMNode was called on an unmounted component.
The window still seems to be listening for changes on the Gallery that has been removed.
Adding this seems to fix it pretty easily:
componentWillUnmount(){
window.removeEventListener('resize', this.handleResize, false);
}
Thanks, this is great!
Fix error when upgrading to React 15.2.1
invariant.js:17 Uncaught Invariant Violation: getNodeFromInstance: Invalid argument.
Seems to be coming from using 'findDomNode' in the Gallery
This could be a bug in 15.2, hold off updating to 15.2
studiointeract/accounts-ui#60
Hi,
I love the small footprint of the gallery.
Have you considered adding a preloader for the next image or two? Thats a must-have for a gallery imo.
Hi @neptunian! Thank you for the component!
Do you have thoughts on the component allowing for router support - to have it update the url as one opens the lightbox and moves from one image to another?
I noticed you are also the maintainer of react-images now. Would that be a more appropriate library to build this feature on?
Thank you!
So far the best thought out media gallery for react that I could find. Any plans on supporting videos?
Gallery.js contains <a href="#" className={k} onClick={(e) => this.props.onClickPhoto(k, e)}>
. This leads to the following HTML (from the example page):
<a href="#" class="1">...</a>
I was wondering if the numeric class name is intended or a side effect of something different.
add routing to demo example so users can see how that works. maybe have a demo with and without.
Current NPM version is 4.2.14
and throws warnings for react
& react-dom
packages for not meeting the following: peerDependencies: "~15.3.0"
Looks like you have it fixed in master
. Please publish a new version.
It may also be helpful to list that as ^15.4.0
so anything above 15.4 works
Some rows having 2 images, others such as a panorama spanning the entire row (1 col); user defined.
On Windows machines, the scrollbar is 17px wide.
This scrollbar disappears when the Lightbox is opened. Then, a re-render of the Gallery is triggered when the Lightbox is closed. At this time, this._gallery.clientWidth
is 17px wider than when first rendered. The computed widths for all pictures is therefore bigger.
However the scrollbar comes back afterwards, which forces the images to go into subsequent rows and break the layout.
I solved this issue by adding the following lines to my CSS:
html {
overflow-y: scroll;
}
which causes the scrollbar to be always visible, and therefore the clientWidth
of the gallery to be constant.
I notice that in the demo, body
has a padding of 17px (width of a scrollbar), is that for this reason?
How could this issue be solved at the component level?
Thanks for your package, it's been really helpful!
In 6.5.3, the properties srcset
and sizes
are no longer optional, if they are not set, you get an undefined
error.
Not causing any issues that I can see, just wanted to bring it to your attention. When I load my child that contains Photo Gallery, I get this error -
Gallery has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.
Only started happening when I upgraded to React 16.
Thanks!
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.