pedropalau / react-bnb-gallery Goto Github PK
View Code? Open in Web Editor NEWSimple react-based photo gallery inspired by Airbnb image gallery.
Home Page: https://peterpalau.github.io/react-bnb-gallery/
License: MIT License
Simple react-based photo gallery inspired by Airbnb image gallery.
Home Page: https://peterpalau.github.io/react-bnb-gallery/
License: MIT License
Hi, I'm trying to make a old facebooks photo and comment box.
For the image gallery react-bnb-gallery looks awesome but I can't figure out how to add another div box to image gallery.
For the comment section i'm considering simple-react-comment.
Does anyone have any idea how to do it?
Check if this library works properly in the server and if not, implement it.
Currently react-bnb-gallery
supports react
15 and 16:
It would be great, if it would also support the latest React 17 release.
Create multiple test cases to check the code works correctly.
when I clicked on any image of the slider, every time 1st image of the array is opened.
how to pass the current image or clicked image id to open that specific image.
Add some new demos of how-to
and check is something is missing in the documentation.
This library is using an imported CSS
file in the main JS
file.
The idea is to separate the CSS
file from the JS
so that anyone can import it as a normal file.
Hi. Great library thanks for sharing. I wonder how can I style buttons, I need to remove blue outline.
This is a very important part for the mobile improvements tasks for this library.
Make the integration with Travis to publish this library in npm
after any update, and also, update the demo using gh-pages
.
How to change phrases like "Hide photo list" pls?
Hello!
When I use the gallery with more photos (around 20, 25) thumbnails goes to 2 rows and active thumbnail is not visible.
I need to show some buttons after the thumbnails. Is there any possibility?
Hello. First of all, thank you for this great lib!
I'm enctountering an issue on mobile devices (tested on safari - iOS). Whenever I perform Pinch-to-zoom gesture, to zoom into image, Gallery component automatically triggers next image loading.
Is there something I can do to prevent this behaviour?
Thanks.
Hello,
I found a bug with firefox when click on the active image :
The event is not fired.
It is because the event is attached into the <button />
but on firefox it has a 0px x 0px
size.
It come from here https://github.com/peterpalau/react-bnb-gallery/blob/ebb11378048450ab9f75484847ac892fbfc9c35e/src/components/Image/Image.js#L144
You put a div element into a button, it's not allowed by the specs :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Permitted content | Phrasing content but there must be no Interactive content https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content
So the size flow is broken here, and when we click on the image, the event is not fire on the button but on the parent element li
https://peterpalau.github.io/react-bnb-gallery/#/options currently states the following:
Name | Type | Default | Description |
---|---|---|---|
wrap | boolean | false |
Whether the gallery should cycle continuously or have hard stops. |
My understanding would be, that wrap=false
would not show a previous-button on the first image. I would further expect, that wrap=true
would show a previous-button on the first image.
Currently the opposite is true: With wrap=true
no previous-button is shown on the first image.
I would either change the description or change the implementation.
This library is great! I'm excited to use it in my app, but I ran into a problem while running my end-to-end tests (via Cypress). These tests run my app in a headless browser, in this case, Electron (version 59). When I include this library, it crashes the app.
Any idea what might be going on?
Maybe random and unhelpful tidbits:
Here's the only error I get in my console logs when I have react-bnb-gallery on the page (the error goes away when I remove the component)
When clicking into the error link (VM296 main.js:40709) I get this:
I suspect it's actually from Sentry, but can't be sure right now. It's worth calling out that i'm using react-hot-loader
Hello,
I didn't understand why the zIndex I passed in ReactBnbGallery
was not working.
So I looked into the code :
https://github.com/peterpalau/react-bnb-gallery/blob/3cc13731afa21c968336a310099ac12cc4c974a4/src/ReactBnbGallery.js#L170
zIndex is not an HTML attribute but a CSS Property:
So it should be bind pretty much like that :
<div
style={{zIndex: zindex}}
// ...
/>
Hello.
First of all, thank you for this lib. I keep getting following error message in my console:
Warning: Failed prop type: The prop `alt` is marked as required in `Image`, but its value is `null`.
in Image (created by Thumbnail)
in Thumbnail (created by Caption)
in li (created by Caption)
What can I do with it?
Thanks!
Hi there, thank you so much for this package! My team is using the ReactBnbGallery
but we have some tall and narrow images with text that need to be zoomed in on to be visible. It would be awesome to be able to pass a zoom option to GalleryPhoto
. Alternatively, maybe Gallery
could accept children and render a different image component instead of GalleryPhoto
so that it could be zoomed?
It appears that this css change caused a regression where the default Chrome button borders are now appearing:
43f3d6e#diff-4a1fd173378d19262dca5c2d053630e451aab210800b5f6f884170de07a7bc43L346
When I try to set a relative path of image in array of photos and It doesn't work.
๐ Peter, I'm giving your lightbox another try. I noticed there were no TS typings out of the box so I added my own. Hope it's useful, and feel free to make any corrections:
declare module 'react-bnb-gallery' {
import ReactBnbGallery from 'react-bnb-gallery'
declare interface Props {
// Initial photo index to show.
activePhotoIndex: number
// Called when a photo is pressed.
activePhotoPressed: () => void
// Called when left key of the keyboard is pressed.
leftKeyPressed: () => void
// Called when next control button is pressed.
nextButtonPressed: () => void
// Called when the gallery modal is going to close.
onClose: () => void
// The number of photos to preload on gallery initialization.
preloadSize: number
// Called when previous control button is pressed.
prevButtonPressed: () => void
// Array of photos. It can be an array of photos URLs or an array of objects. See the [photo object] props bellow.
photos: Photo[] | string[]
phrases?: object
// Called when right key of the keyboard is pressed.
rightKeyPressed?: () => void
// Shows the modal when initialized.
show?: boolean
// Whether the gallery should show thumbnails.
showThumbnails?: boolean
// Whether the gallery should react to keyboard events.
keyboard?: boolean
// Whether the gallery should cycle continuously or have hard stops.
wrap?: boolean
// Sets the opacity level for the component.
opacity?: number
// Sets the background color of the gallery component.
backgroundColor?: string
// Specifies the stack order of the component.
zIndex?: number
}
declare interface Photo {
// The src attribute value of the image.
photo: string
// The current number of the photo.
number?: number
// Photo description.
caption?: string
// Photo secondary description, like the photo author or the name of the place where it was taken.
subcaption?: string
// The url of the photo thumbnail. The preferred size for each thumbnail is 100x67.
thumbnail?: string
}
}
When the user open the gallery, all the thumbnails images are loaded at the same time.
I need to implement a way to load images dynamically without affecting the performance.
This code is copied from getting started page in your documentation site.
Hi,
I just wanted to update the dependencies in my project and realized that the gallery does not allow React version 17.
Hi,
Thank you for the gallery, it's a great component, we are using it on https://ascendero.com.
It seems react-bnb-gallery/dist/style.css is not present in the package anymore, can you please check?
Thanks
Petr
This one is very important, because in today's frontend world everything is needed to be customizable.
I think forbidExtraProps is interfering with TypeScript
Type checking in progress...
/Users/fang/choice-kittens/node_modules/airbnb-prop-types/src/forbidExtraProps.js:1
(function (exports, require, module, __filename, __dirname) { import forbidExtraProps from 'prop-types-exact';
^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:84:7)
at createScript (vm.js:264:10)
at Object.runInThisContext (vm.js:312:10)
at Module._compile (internal/modules/cjs/loader.js:684:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (/Users/fang/choice-kittens/node_modules/react-bnb-gallery/dist/react-bnb-gallery.js:5:40)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
/Users/fang/choice-kittens/node_modules/airbnb-prop-types/src/forbidExtraProps.js:1
(function (exports, require, module, __filename, __dirname) { import forbidExtraProps from 'prop-types-exact';
I'm using
.gallery-modal .gallery {
display: table-cell;
vertical-align: middle;
}
to center the gallery on smaller screens
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.