pedropalau/react-bnb-gallery

Simple react-based photo gallery inspired by Airbnb image gallery.

Friendly, customizable and accessible-ready simple photo gallery based on React.

---

Install

You can install react-bnb-gallery from npm.

# If you are using npm
npm install --save react-bnb-gallery

# If you prefer yarn
yarn add react-bnb-gallery

Live Demo

https://peterpalau.github.io/react-bnb-gallery/

Documentation

For full documentation, visit the demo website.

License

This package have been released under the MIT Licence.

Updates

If you are interested in view the main updates visit our CHANGELOG.md.

Contributing

If you're interested in contributing please read the contributing docs before submitting a pull request.

react-bnb-gallery's Issues

React 17.0.0 not working

Hi,
I just wanted to update the dependencies in my project and realized that the gallery does not allow React version 17.

Zoomable Images

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?

Is there any way to disable full screen or add another div to the side

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?

The styles are not loaded after buld the entire project

Hello,

After build the my project where I am using the React-bnb-Gallery, the component lose its styles.

But in development mode it works fine.

Export `Gallery` as an individual component

https://stackoverflow.com/questions/58019805/how-to-render-components-child-instead-of-entire-component

Move from redux to react hooks

Basically https://www.sitepoint.com/replace-redux-react-hooks-context-api/

Pinch-to-Zoom on mobile triggers next image load

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.

Unable to remove button outline

Hi. Great library thanks for sharing. I wonder how can I style buttons, I need to remove blue outline.

Check if it is working on server side

Check if this library works properly in the server and if not, implement it.

Setup Travis to automatically publish the library after any update

Make the integration with Travis to publish this library in npm after any update, and also, update the demo using gh-pages.

zIndex prop is not bind correctly

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}}
  // ...
/>

Gallery not vertically centered on small screens

I'm using

.gallery-modal .gallery {
  display: table-cell;
  vertical-align: middle;
}

to center the gallery on smaller screens

Error in the 'Getting Started' Example (missing wrapping element)

This code is copied from getting started page in your documentation site.

Thumbnails on 2 rows

Hello!
When I use the gallery with more photos (around 20, 25) thumbnails goes to 2 rows and active thumbnail is not visible.

Image is missing alt

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!

Allow theme implementation

This one is very important, because in today's frontend world everything is needed to be customizable.

Causes errors in browser Electron v59

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

Expect to use lodash-es instead of lodash

Incorrect thumbnail border

It appears that this css change caused a regression where the default Chrome button borders are now appearing:
43f3d6e#diff-4a1fd173378d19262dca5c2d053630e451aab210800b5f6f884170de07a7bc43L346

Example screenshot (using v1.4.4)

All the images are loaded at the same time

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.

Set Relative Path in photo array

When I try to set a relative path of image in array of photos and It doesn't work.

Support to add buttons

I need to show some buttons after the thumbnails. Is there any possibility?

Change phrases

How to change phrases like "Hide photo list" pls?

Separate CSS styles from the source code

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.

Missing react-bnb-gallery/dist/style.css

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

TypeScript typings

👋 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
  }
}

Does not work with TypeScript

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';

React 17 support

Currently react-bnb-gallery supports react 15 and 16:

https://github.com/peterpalau/react-bnb-gallery/blob/ad411497c42c1bbdf8c16c7e4ab5a35844a9529a/package.json#L58-L61

It would be great, if it would also support the latest React 17 release.

activePhotoPressed not working in firefox

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

Implements touch swipe

This is a very important part for the mobile improvements tasks for this library.

Support for locale

Maybe this is more a question than an issue report. But docs are not clear when locale is nedded.

There are some labes such as

Is there any way to support other languages options?

Integration with i18next will be so nice!

Thanks in advance

"wrap" option misleading

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.

Improve documentation

Add some new demos of how-to and check is something is missing in the documentation.

Implements test cases

Create multiple test cases to check the code works correctly.

Seem like you forgot to add "light" Props to typescript

unable to open Clicked image.

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.