How do I use the lightbox using my own images

Topic: How do I use the lightbox using my own images

Melchizedek Odonkor free asked 5 years ago

hello, am new to React and am currently trying to create my first website using your framework. Currently having difficulty on how to load my photos into the light-box.

folder structure. Src folder -> components->images{then the photos}

my js file is in the components folder. Pls I a dummy code on how to import the images into the lightbox.

Thank you.

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

Hello,

You can <code>import</code> your photos into your js file which contains <code>LigthBox</code> component:

<pre class="prettyprint"><code> import image from './images/image.jpg'
</code></pre>

Then declare images array in the state:

<pre class="prettyprint"><code>images: [
 image,
 ....
 ]
</code></pre>

Then you can use the code snippet from our examples:

<pre class="prettyprint"><code>import React, { Component } from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import Lightbox from "react-image-lightbox";
import "./Lightbox.css";

//Importing your images
import image from "./images/image.jpg"
import image2 from "./images/image2.jpg"
//...

class LightboxPage extends Component {

state = {
    photoIndex: 0,
    isOpen: false,
     images: [
       image,
       image2,
        //...
    ]
  }

renderImages = () => {
    let photoIndex = -1;
    const { images } = this.state;

return images.map(imageSrc => {
 photoIndex++;
 const privateKey = photoIndex;
 return (
 <MDBCol md="4" key={photoIndex}>
 <figure>
 <img
 src={imageSrc}
 alt="Gallery"
 className="img-fluid"
 onClick={() =>
 this.setState({ photoIndex: privateKey, isOpen: true })
 }
 />
 </figure>
 </MDBCol>
 );
 })

}

render() {
 const { photoIndex, isOpen, images } = this.state;
 return (
 <MDBContainer className="mt-5">
 <div className="mdb-lightbox no-margin">
 <MDBRow>
 {this.renderImages()}
 </MDBRow>
 </div>
 {isOpen && (
 <Lightbox
 mainSrc={images[photoIndex]}
 nextSrc={images[(photoIndex + 1) % images.length]}
 prevSrc={images[(photoIndex + images.length - 1) % images.length]}
 imageTitle={photoIndex + 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
 })
 }
 />
 )}
 </MDBContainer>
 );
 }
}

export default LightboxPage;
</code></pre>

If something doesn't work please contact me again.

Best regards.

Please insert min. 20 characters.

Hello,

You can import your photos into your js file which contains LigthBox component:

 import image from './images/image.jpg'

Then declare images array in the state:

images: [
    image,
    ....
   ]

Then you can use the code snippet from our examples:

import React, { Component } from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import Lightbox from "react-image-lightbox";
import "./Lightbox.css";

//Importing your images
import image from "./images/image.jpg"
import image2 from "./images/image2.jpg"
//...

class LightboxPage extends Component {

  state = {
    photoIndex: 0,
    isOpen: false,
     images: [
       image,
       image2,
        //...
    ]
  }

  renderImages = () => {
    let photoIndex = -1;
    const { images } = this.state;

    return images.map(imageSrc => {
      photoIndex++;
      const privateKey = photoIndex;
      return (
      <MDBCol md="4" key={photoIndex}>
        <figure>
          <img
            src={imageSrc}
            alt="Gallery"
            className="img-fluid"
            onClick={() =>
              this.setState({ photoIndex: privateKey, isOpen: true })
            }
          />
        </figure>
      </MDBCol>
      );
    })

  }

  render() {
    const { photoIndex, isOpen, images } = this.state;
    return (
        <MDBContainer className="mt-5">
          <div className="mdb-lightbox no-margin">
            <MDBRow>
              {this.renderImages()}
            </MDBRow>
          </div>
          {isOpen && (
            <Lightbox
              mainSrc={images[photoIndex]}
              nextSrc={images[(photoIndex + 1) % images.length]}
              prevSrc={images[(photoIndex + images.length - 1) % images.length]}
              imageTitle={photoIndex + 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
                })
              }
            />
          )}
        </MDBContainer>
    );
  }
}

export default LightboxPage;

If something doesn't work please contact me again.

Best regards.

mark-steven-au premium commented 4 years ago

Hello Aliaksandr,Been looking around the questions for an answer to an issue I am having and this one is similar.

If I have an image coming in from your web site for avatar in a Card

I would like to replace it with a local one.JS file is in src/pagesimport image from 'src/pages/images/KT.png';

What is the best method of replacing the current image from MDB site as cannot get this one to work. One method recommended is build whole new component but this seems over the top for adding an image, or is this the only way to do so?

class Nav extends Component { render() { return ( )
} }

Thanks in advance. Mark

Please insert min. 15 characters.

Krzysztof Wilk staff commented 4 years ago

Hi!

There are two ways to load local pictures.

First: You can use import. Just import your picture and use it in src attribute in JavaScript expression.

import logo from './logo.png';

then

<img src={logo} alt="logo" />

Second: Use your public folder.

// Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.13.0
Device: Laptop
Browser: Mozilla Firefox
OS: Windows 10
Provided sample code: No
Provided link: No

Melchizedek Odonkor

15Support score
1Questions 1Answers 0Snippets