React lightgallery.js integration without JQuery?

Question

I've been searching for a proper guidance for integrating lightgallery.js library into my application, but after several hours I did not find any solutions. Since I'm using React, I don't want to mix it with JQuery.

I've stumbled across many similar questions like this one, but since all of them are using JQuery, I can't use their solutions.

Also, I've found react-lightgallery package (React wrapper for lightgallery.js), but it does not include video support yet.

In the lightgallery.js documentation, there is the installation guidance. After completing all of the steps, importing lightgallery.js and trying to print it (as suggested here by the library owner), empty object is being shown.

What would be the best solution for this? Are there any good alternatives?

Thanks!

score 0 · Answer 1 · answered Jun 09 '19 at 14:18

I have handled it this way. May be it's not complete and the best practice, but it gives you a general view to how to handle it

import React, { PureComponent } from "react";
import Gallery from "lightgallery.js";

import "lightgallery.js/dist/css/lightgallery.min.css";

class _Gallery extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    let self = this;
    this.gallery = document.getElementById("lightgallery");
    lightGallery(this.gallery, {
      dynamic: true,
      dynamicEl: [
        {
          src:
            "1.jpg",
          thumb: "1.jpg",
          subHtml:
            "<h4>Fading Light</h4><p>Classic view</p>"
        },
        {
          src:
            "2.jpg",
          thumb: "2.jpg",
          subHtml:
            "<h4>Bowness Bay</h4><p>A beautiful Sunrise</p>"
        },
        {
          src:
            "3.jpg",
          thumb: "3.jpg",
          subHtml: "<h4>Coniston Calmness</h4><p>Beautiful morning</p>"
        }
      ]
    });

    this.gallery.addEventListener("onCloseAfter", function(event) {
      window.lgData[self.gallery.getAttribute("lg-uid")].destroy(true);
      self.props.onCloseGallery();
    });
  }

  render() {
    return <div id="lightgallery" />;
  }
}

export default _Gallery;

score 0 · Answer 2 · answered Jun 28 '19 at 10:59

Here is a working example with cloudinary at Cloudinary LightGallery

The code for the Cloundinary LightGallery React Component using Styled Components and styled css grid is below.

The Code for the upload component is in my GitHub Repo at.

UploadWidget

/* eslint-disable indent */
import React, { Component, Fragment } from 'react'
import { LightgalleryProvider, LightgalleryItem } from 'react-lightgallery'
import axios from 'axios'
import styled from 'styled-components'
import { CloudinaryContext, Transformation, Image } from 'cloudinary-react'
import { Grid, Cell } from 'styled-css-grid'
import { media } from '../../utils/mediaQuery'
import 'lightgallery.js/dist/css/lightgallery.css'

import 'lg-autoplay.js'

 const SectionTitle = styled.h3`
   font-size: 1em;
   margin: 0.67em 0;
   ${media.xs`
     font-size: .85em;
   `}
 `
class Gallery extends Component {
  constructor (props) {
    super(props)
    this.link = React.createRef()
    this.state = {
      gallery: [],
      isOpen: false,
      link: this.href,
    }
  }

 componentDidMount () {
    // Request for images tagged cats
   axios.get('https://res.cloudinary.com/mansbooks/image/list/v1557911334/cats.json')
     .then(res => {
       console.log(res.data.resources)
       this.setState({ gallery: res.data.resources })
     })
 }
 onLink (event) {
   this.setState({ link: this.href = 
   `https://res.cloudinary.com/mansbooks/image/upload/${data.public_id}.jpg` })
 }
 uploadWidget () {
   let _this = this
   cloudinary.openUploadWidget({ cloud_name: 'mansbooks', upload_preset: 'photos- 
   preset', tags: ['cats'], sources: ['local', 'url', 'camera', 'image_search', 
   'facebook', 'dropbox', 'instagram'], dropboxAppKey: 'Your API Key', googleApiKey: 
   'Your API Key' },
      function (error, result) {
      // Update gallery state with newly uploaded image
          _this.setState({ gallery: _this.state.gallery.concat(result) })
      })
  }
  render () {

return (
  <div>
    <Fragment>
      <SectionTitle>Gallery by Cloudinary</SectionTitle>
      <div>
        <CloudinaryContext cloudName='mansbooks'>
          <Grid columns='repeat(auto-fit,minmax(260px,1fr))' id='hash'>
            <LightgalleryProvider>
              {
            this.state.gallery.map(data => {
            return (
              <Cell key={data.public_id}>
                <LightgalleryItem group='group1' src={`https://res.cloudinary.com/mansbooks/image/upload/${data.public_id}.jpg`} data-sub-html={'data.public_id'}>
                  <Image publicId={data.public_id} onClick={() => this.setState({ isOpen: true })}>
                    <Transformation
                      crop='scale'
                      width='250'
                      height='170'
                      radius='6'
                      dpr='auto'
                      fetchFormat='auto'
                      responsive_placeholder='blank'
                    />
                  </Image>
                </LightgalleryItem>
              </Cell>
              )
            })
          }
            </LightgalleryProvider>
          </Grid>
        </CloudinaryContext>
      </div>
    </Fragment>
  </div>
)
}
}

export default Gallery

React lightgallery.js integration without JQuery?

2 Answers2

Linked