Galleria dom manipulation in React

35 Views Asked by At

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```
1

There are 1 best solutions below

0
GopiinSO On

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