Question

我一直在寻找将lightgallery.js库集成到我的应用程序中的适当指导，但是几个小时后，我没有找到任何解决方案。由于我使用的是React，所以我不想将其与JQuery混合使用。

我偶然发现了许多类似的问题，例如this one，但是由于它们都使用了JQuery，因此我无法使用其解决方案。

我还找到了react-lightgallery软件包（用于lightgallery.js的包装），但是它还不包括视频支持。

在lightgallery.js文档中，有安装指南。完成所有步骤之后，导入lightgallery.js并尝试打印（如库所有者建议的here），将显示空对象。

什么是最好的解决方案？有什么好的选择吗？

谢谢！

Answer 1

我已经这样处理了。可能它并不完整，并且是最佳做法，但它为您提供了如何处理它的一般视图

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;

Answer 2

这是Cloudinary LightGallery上带cloudinary的一个有效示例

下面是使用样式化组件和样式化css网格的Cloundinary LightGallery React组件的代码。

上传组件的代码在我的GitHub存储库中。

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

在没有JQuery的情况下反应lightgallery.js集成？

2 个答案: