0

I am trying to implement the image gallery using Galleria plugin in Reactjs, write now I have used the npm package Galleria, jQuery to use inside the components and i am passing the reference of the root node to Galleria run function. But still, I am unable to see the image gallery, please let me know, what is the problem here.

import React, { Component } from 'react';
import Galleria from 'galleria';
import $ from 'jquery';


class AssetImages extends Component{
    constructor(props){
        super(props);
    }

    componentDidMount(){

    }

    componentDidUpdate(){
        if(this.props.dataLakeImages.length !== 0){
            Galleria.run(this.rootNode);
        }
    }

    render(){
        return (
                    <div className="rs-assets-health-bg1">
                            <div className="content">
                                <div className="galleria" ref={node => (this.rootNode = node)}>
                                    <a href='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'>
                                        <img
                                            src='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'
                                            data-big='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'
                                            alt="Assets"
                                        />
                                    </a>
                                    <a href='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'>
                                        <img
                                            src='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'
                                            data-big='https://img.wallpapersafari.com/desktop/1600/900/70/50/wIlBTm.jpg'
                                            alt="Assets"
                                        />
                                    </a>
                                </div>/
                            </div>
                    </div>
        )
    }
}

export default AssetImages```
GopiinSO
  • 11
  • 2
  • Not familiar with this package, but using jQuery with React is not a good idea. React handles all DOM manipulation internally, and using jQuery to manipulate elements yourself can create conflicts and unexpected behavior. I'm not sure exactly what you're trying to accomplish, but I would definitely recommend a React-only solution. I found this [image gallery package](https://www.npmjs.com/package/react-image-gallery) for React with a quick Google, I'm sure there are tools out there to accomplish what you need with some modifications. – Chris B. Feb 04 '20 at 15:08

1 Answers1

0

Yes absolutely Chris, but now we are in a situation near to deliverables and I just joined the team, I am not so familiar with the refs in react

GopiinSO
  • 11
  • 2