frontend-collective / react-image-lightbox Goto Github PK

There doesn't seem to be a way to specify the background color for the image inside the lightbox. This would be helpful so that images with a transparent background could have a background to contrast to.

Do you happen to know what browsers this is compatible with?

Hi~.
I want to use this lightbox simply.

But I got this error message.

Warning: Failed prop type: The prop `contentLabel` is marked as required in `Modal`, but its value is `undefined`.

Works well. Just an error message.

my components is..

        <div
          className="details__body"
          style={styles.body}
        >
          <div style={styles.imgWrap}>
            <img
              style={styles.img}
              src={data.preview}
              alt=""
              onClick={(e) => {
                e.stopPropagation();
                this.setState({ isImgOpen: true });
              }}
            />
            {
              this.state.isImgOpen &&
                <Lightbox
                  mainSrc={data.preview}
                  onCloseRequest={() => this.setState({ isImgOpen: false })}
                />
            }
          </div>
        </div>

Thanks you for cool package anyway,

react-image-lightbox is incompatible with non browser env.

It cannot be used in a module bundler like Webpack that uses use strict.

When I include the script in my project with import Lightbox from "react-image-lightbox"

and I try to build my project (it execute the javascript in a non browser env) I have this error: window is not defined

You use the window variable in src/util.js and src/react-image-lightbox.js.

I think the problem could be resolve surrounding all windowuses by

if(typeof window != 'undefined'){

So I did and after I had the same problem with document var.

For more explanations, please read this article, in particular the section Wait, you tried to run my code where?
https://nolanlawson.com/2015/10/19/the-struggles-of-publishing-a-javascript-library/

https://plus.google.com/photos/photo/111938507656529175207/6336827836368759602

Hi @fritz-c ,

When using this lightbox with react-bootstrap 3's navbar with fixedTop (a.k.a. sticky), the navbar keeps visible, on top of the lightbox.

Do you perhaps have a suggestion to fix this?

Kind regards,

Sander

Hi Chris! Great work overall!
It would be nice if you add mobile browsers support (touch).
Right now component does not move zoomed image but scrolls the page underneath.

I'm using masonry to show images on my page. Every click on each image opens Lightbox. When I have many images, I have to scroll page down. Then, when I open Lightbox, it scrolls (moves) to the top of page. IMO it's not desired behavior. I think it is caused by hardcoded position of react-modal component (position: absolute, top: 0, etc). Maybe Lightbox should take current position to show modal, or maybe simply have position: fixed?

Hi! Was wondering if React 15.5.0 support was on your radar. Not that it's technically broken, but because of the separation of the PropTypes separation, using your package in newer projects shows a lot of warnings. Happy to work on a PR for this, but wasn't sure what else was tied up that may be targeting older versions.

I have dropped the example code provided with react-image-lightbox v3.1.0 in my project, all works fine, but the close button is invisible. The zoom buttons are visible (and functional) though.

From the browser element inspector:

<li class="ril-toolbar__item toolbarItem___3WbMb">
    <button type="button" class="close ril-close ril-toolbar__item__child toolbarItemChild___2U_MP builtinButton___1zqo6 closeButton___3BdAF"></button>
</li>

Am I missing something, any clue?

Edit: I can click the close button, but there's no icon.

Hi everybody,

I have integrated react-image-lightbox however I have the following error message: "Uncaught Error: react-modal: You must set an element with Modal.setAppElement(el) to make this accessible"

Anyone know how could I fix it? I am using "react-modal": "^1.3.0" dependency.

Thanks a lot for your help.

https://github.com/fritz-c/react-image-lightbox/blob/ecf15d3d2b48792b3687bd39570ceeb3844abe3d/src/react-image-lightbox.js#L1324

I get the following warning:
Warning: 'NaN' is an invalid value for the width css style property. Check the render method of 'ReactImageLightbox'.

I guess this is connected to Issue #59

This warning occurred in test environment.

console.error node_modules/fbjs/lib/warning.js:36
      Warning: `NaN` is an invalid value for the `height` css style property. Check the render method of `ReactImageLightbox`.

Reproduce

git clone [email protected]:ClarityMovement/clarity-components.git 
cd clarity-components && yarn install
yarn run test

Hello,

I tried your react component and it work really well. However using it generates a warning in the console:

warning.js:36 Warning: Failed prop type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types
    in ReactImageLightbox (at App.js:43)
    in App (at index.js:7)

I'm new to react to perhaps I am missing something. I created my application using
create-react-app and it uses react V15.4.2. Should I upgrade to react 15.5 ?

Thanks

The following code reproduces the issue:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Lightbox from 'react-image-lightbox';


class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
      photoIndex: 0
    };
  }


  render() {
    const {isOpen, photoIndex} = this.state;


    const images = [
      '//placekitten.com/1500/500',
      '//placekitten.com/4000/3000',
      '//placekitten.com/800/1200',
      '//placekitten.com/1500/1500'
    ];

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <button onClick={() => this.setState({ isOpen: true })}>Open lightbox</button>


        {isOpen &&
                <Lightbox
                  mainSrc={images[photoIndex]}
                  nextSrc={images[(photoIndex + 1) % images.length]}
                  prevSrc={images[(photoIndex + images.length - 1) % images.length]}

                  onCloseRequest={() => this.setState({ isOpen: false })}
                  onMovePrevRequest={() => this.setState({
                    photoIndex: (photoIndex + images.length - 1) % images.length,
                  })}
                  onMoveNextRequest={() => this.setState({
                    photoIndex: (photoIndex + 1) % images.length,
                  })}
                />
                }
      </div>
    );
  }
}

export default App;

Related package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-image-lightbox": "^3.4.3",
    "sinon": "^2.1.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Hi.. In my case I want to fetch the images after the lightbox shown up, but I've got this warning.
The prop 'mainSrc' is marked as required in 'ReactImageLightbox', but its value is 'undefined'

I want to include loading indicator as my default mainSrc, but you already provide it before the data fetched.
How can I use your loading indicator as my default mainSrc? or do you have any suggestion to solve this problem?

Hi all!
I'm using PDF.js which in my implementation, returns a <canvas> element for each page of the PDF on request. Does this library support showing dynamically generated canvas images? Wanted to check before I go diving in as it's a bit outside of the normal examples. Thanks!

Hi,

thanks for this component,

just started using it and although base styles work just fine I need to change the z-index of the lightbox for it to be placed above another box that I can't change the z-index of (also might have to tweak other styles as well to match some other styles in my app)

so I was wondering if there was a preferred way of modifying the styles, apart from overriding with important in my own style sheets

thanks for your time

Unfortunately, this component doesn't seem to work with server side rendering. Upon being imported it tries to immediately access the window object thereby crashing the SSR build process. Ideally, it should access window global only after React component instantiation. That way it can be used in componentDidMount method, for example. Isomorphic or universal rendering is becoming really popular these days, so it really should be a must have feature.
If I had to guess what is causing then it'd be this line
https://github.com/fritz-c/react-image-lightbox/blob/5272072f349d2d7172f327c1c373ff3705b847da/src/react-image-lightbox.js#L29

Hey @fritz-c,
Thanks for all your hard work on this! Having a bit of difficulty saving images on iOS. I'm not using the downloadBlocker option and it does appear to be working fine in Chrome on iOS. Have you run into this yourself at all? It looks like normally this is done on iOS with user-select: none; and touch-callout: none; but I'm not sure if I'm seeing that -- only touch-action: none;

Hello!

Thanks a lot for this component!
We use it in our React project with Twitter Bootstrap and webpack. Unfortunately we found that, .close css class styles are overridden by Twitter Bootstrap. Is it possible to replace them by something more specific (like ril-close or react-image-lightbox-close), to keep ability to customize component and not to be overridden accidentally?

When zooming in on one point in an image and then zooming out from another, the image can start to slide outside of the viewport. I've tried to reduce the effects with max offset settings, but the result (and current implementation) is jerky and not at all eye-pleasing.

I'm certain that the right computations will provide both smooth zooming in and out from any point on the image, but after a couple hours trying out different things, I'm still at a loss. If anyone could offer some advice on how to handle this, I would be very grateful. The relevant code can be found here: https://github.com/fritz-c/react-image-lightbox/blob/master/src/react-image-lightbox.js#L212-L246

Everything is working as expected, but I'm wondering why I'm getting these two warnings in chrome dev tools' console:

Warning: Unknown prop `portalId` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div

Warning: Unknown prop `_radiumDidResolveStyles` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by StyleRoot)
    in StyleRoot (created by ReactImageLightbox)
    in div

const customStyles = {
    overlay: {
        backgroundColor: 'rgba(255, 255, 255, 0.5)'
    }
}

<Lightbox
    mainSrc={this.props.images[this.state.index]}
    nextSrc={this.props.images[(this.state.index + 1) % this.props.images.length]}
    prevSrc={this.props.images[(this.state.index + this.props.images.length - 1) % this.props.images.length]}

    reactModalStyle={customStyles}     /* NOT WORKING */   

    onCloseRequest={this.closeLightbox.bind(this)}
    onMovePrevRequest={this.movePrev.bind(this)}
    onMoveNextRequest={this.moveNext.bind(this)}
/>

Can someone point me if I'm doing something wrong?

I think the UX on the Flickr lightbox is really fantastic on desktop and would love to see something similar here.

The functionality I refer to is when you have a image larger than the viewport (e.g. viewing it at original size) and the user is moving the cursor, the image will move in response to show more.

The algorithm is equivalent to directly mapping cursor to background-position as a % of where it is on the screen. E.g. if cursor is at top of screen, then you can see the top of the image.

It is a really nice and slick way of immersively viewing content.

Hello,
I would like to change the icons on the toolbar because I changed the CSS and my background is white, I can't change the icons as they are image.
Do you have a solution ?

I would either use the icons or materials are-awesome power or coloring

Best regards,

Right now if there is an invalid image in the lightbox, the spinner can overlap the other images; depending on where it falls in the ordering. Right now there is a onImageLoadError prop that can be used, but it currently doesn't have a default as far as how to handle the UI. In the gif below I added in a small snippet to take care of not degrading the other images, but ideally we would not even show the loader and instead have some error text that could be shown/customized.

Hello! Thank you for this great package.
Is it possible to add Loading circle/Spinner customization to it?

Hi,

It could be nice (to my mind), to add the possibility of closing the lightbox when the user clicks outside of the image (i.e the gray overlay).
Clicking on the cross at the top right-hand corner does the job perferctly, but it could be more user-friendly to also be able to close by clicking on the overlay.

This could of course be optional, for instance by passing the appropriate prop to the Lightbox component.

Just a quick suggestion :)

Thanks for this great component anyway,

Hi @fritz-c,
In doing some testing to see if I can upgrade an app to React 16, it looks like this library is using react-modal which is using an unsupported API to interact with portals in newer version of React. It looks like there's an update available that may solve the issue and wanted to know if this was something on your plate already or if you needed some assistance. Thanks!

On iOS Safari, the images are extremely blurry. You can see this on the demo page on an iPhone with iOS 10.3. I believe this is happening because of how the images are scaled.

Right now, the image is given a width/height to fit in the browser viewport, and then a transform is used to scale the image based on that. This means that on iOS Safari, a 2000x2000 image might be rendered initially at, say, 750x750. When it is transformed, iOS Safari seems to keep the initially rendered snapshot and transform that, so you get a blurry version of the image when zoomed in.

To fix this, I think it could be possible to change the logic so that it initially displays the image at the full image resolution, and then applies a transform to that to adjust it to the viewport size, and continue to use the full image resolution as the basis for calculating the transforms.

Hi @fritz-c! Thanks for the component! Is is possible to have it update the url as one opens the lightbox and moves from one image to another? If not, is it something you've considered adding?

Thank you!

some particularly large images gets overlapped with the caption and title bar

Tab Focus moves out of the lightbox after the close icon instead of rotating within the lightbox. I have fixed this code on my local machine but unable to push my branch due to authorization. Please help me

Wondering if you have a way to change the close button class as bootstrap interferes with it and screws it appearance up.

Good work for developing this with CSS Module, but I find there is still a class name .close is not in CSS Module style. It's conflicting with Bootstrap css in my project.

className={'close ril-close ril-toolbar__item__child' +

Users tend to assume there are more images when there is only one if they see the navigation arrow, is there an option to disable those if we reach the end or have only one image?

While importing styles with style-loader makes the component more plug-and-play-able, it causes a couple significant issues:

1. It doesn't work with isomorphic builds (/ server-side rendering / SSR).
2. CSS class precedence is a pain, because style-loader either adds the <style> tag to the very bottom or top of the <head>, making it difficult to override the CSS without using !important.

With these in mind, I'm planning on migrating all of the CSS into an external file using extract-text-webpack-plugin.

Hi @fritz-c,

What's the purpose of the mainSrcThumbnail, nextSrcThumbnail and previousSrcThumbnail?

It's noted in the readme.md, but I don't understand.

Kind regards,

Sander

Hi,
Thanks for your amazing plugin. It works like a charm.
But I have a problem with getting images from server that needs token.

I solved that problem by getting images from server then converting to base64.

Is there any way to solve my problem?

Thanks for any help!

I realize you can set the toobar height through css with something like

.ril-toolbar{
    height: 200px!important;
}

But toolbarItemChild is only set from scss, is there a way to change the item child line-height?

hi,
i want to put rotate button with zoom buttons.
i able to place that button but how can i handle that rotate button click?

First off, great work! I like what you're doing with the project 👍

Any plans to offer support for embedded video or will this just be a lightbox for images?

There is a bug when i use this component on server side rendering

[piping] can't execute file: /Users/firdausious/Works/myweb/bin/server.js [piping] error given was: ReferenceError: window is not defined at /Users/firdausious/Works/myweb/node_modules/react-image-lightbox/dist/umd/react-image-lightbox.js:2:1265 at /Users/firdausious/Works/myweb/node_modules/react-image-lightbox/dist/umd/react-image-lightbox.js:2:1197 at e.exports (/Users/firdausious/Works/myweb/node_modules/react-image-lightbox/dist/umd/react-image-lightbox.js:2:1483) at Object.t.exports (/Users/firdausious/Works/myweb/node_modules/react-image-lightbox/dist/umd/react-image-lightbox.js:2:1959) at t (/Users/firdausious/Works/myweb/node_modules/react-image-lightbox/dist/umd/react-image-lightbox.js:1:534)

im using [email protected] with this boiletplate -> https://github.com/erikras/react-redux-universal-hot-example

thanks

Hi! Thank you very much for this library! I really like it. Could you please add loader/spinner for loading big images? Thank you!

Hello!
The plugin works well. Thanks!
But. If it is put to another website into <iframe> tag i have a error for first image as mainSrc.
But if you click back or forward the next picture works.

Message in console:
"Uncaught DOMException: Blocked a frame with origin "https://mysitename.com" from accessing a cross-origin frame."

Place error supposedly is on 242 line of code
The version plugin is 3.4.1

When I view the demo using my Samsung S7, I see an orange border around the image. Is there a way disable this, perhaps by passing a style directive to React Modal?

See the attached screenshot from my phone. It's difficult to see in this image, but you can see orange lines on the left and right side of the photo.