How to work a jQuery lightbox gallery in ReactJS Component?

simple-react-lightbox
react lightbox tutorial
react-fancybox
single image lightbox
react full screen image
lightbox without jquery
multiple image lightbox
lightbox gallery with gutters

I Have this jQuery lightbox plugin: http://simplelightbox.com/

I can´t implement its on react app. Everything is working good in a simple html app, but in React it isn't working. can everybody help me to solve it? Thank you.

here in the index.html page

<title>My website</title> 
  <link href="simplelightbox-master/dist/simplelightbox.min.css" rel='stylesheet' type='text/css'>
</head>

<body>        

  <div id="root"></div>   

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript" src="simplelightbox-master/dist/simple-lightbox.min.js"></script>
  <script>
    $(function(){    
      var $gallery = $('.gallery a').simpleLightbox();     

   });

  </script>    

</body>

Here is my React component who i want to show the lightbox gallery

import React, { Component } from 'react'   

class Interiores extends Component {    


  render() {    
    return (
      <div>    
        <div className="gallery">
          <a href="../../simplelightbox-master/demo/images/image1.jpg" className="big"><img src="../../simplelightbox-master/demo/images/thumbs/thumb1.jpg" alt="" title="Beautiful Image" /></a>
      </div>            

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
     <script type="text/javascript" src="../../simplelightbox-master/dist/simple-lightbox.min.js"></script>               

      </div>
    )
  }      
}

export default Interiores;

You should use react-simplelightbox https://github.com/ts-de/react-simple-lightbox

How to work a jQuery lightbox gallery in ReactJS Component?, A flexible lightbox component for displaying images in a React project. Image Zoom; Flexible rendering using src values assigned on the fly  I have this React component that renders images from a DB. The component is fetching successfully the images. But the jQuery gallery isn't working. When the component page starts to load, there app

I assume you're using a build tool, Webpack or similar? The reason it's not working is most likely because the script tags your component renders don't actually reference anything once the project is bundled, i.e. the scripts aren't included because they're not imported and therefore the build tool doesn't pick them up as a dependency and include them.

If you really want/need to use a jQuery plugin in this way, you should import the third-party script via an import/require and use it as the script's source so your build-tool imports it properly:

import React, { Component } from 'react'   
import * as Lightbox from '../../simplelightbox-master/dist/simple-lightbox.min.js'

class Interiores extends Component {    
  render() {    
    return (
      <div>    
        <div className="gallery">
          <a href="../../simplelightbox-master/demo/images/image1.jpg" className="big"><img src="../../simplelightbox-master/demo/images/thumbs/thumb1.jpg" alt="" title="Beautiful Image" /></a>
      </div>            

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
     <script type="text/javascript" src={Lightbox}></script>               
      </div>
    )
  }      
}

export default Interiores;

Using jQuery in this way however, with React goes against the very nature of React and its components. The recommended solution is to use a third-party component like the one recommended by Haidangdevhaui. Or, because a lightbox is actually quite simple, just create your own lightbox component. React state will come in handy.

react-image-lightbox, React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch This component is a port of Intense Image Viewer for use with React. A simple, responsive Lightbox component for ReactJS to display an array of images. In this Video, I'll be showing how to make Simple Jquery Lightbox Tutorial.-----Useful Links:

The solution is based on 2 simple steps: All of these changes are in the component that is using the gallery.

First: You just put this commentary line below for the lint accept the '$' sinal and it won't generate an error message.

/* global $ */
import React, { Component } from 'react'
    ...rest of the code here

Second: You need to put the main jquery's plugin function inside the React function 'conponentDidMount()'

componentDidMount() {    
  $(function () {
    var $gallery = $('.gallery a').simpleLightbox();      
  });    
}

I tested these changes and it is working successfully.

Lightbox, Responsive React Masonry Photo Gallery Component. Responsive React A library to use idangerous Swiper as a ReactJs component. A library to use Swiper  An image lightbox component for ReactJS. Contribute to jfcaiceo/react-lightbox-component development by creating an account on GitHub.

Gallery, Lightbox is a script used to overlay images on the current page. It's a snap to If you already use jQuery on your page, make sure it is loaded before lightbox.js . This feature is not available right now. Please try again later.

Lightbox, Packages are installed using Terminal. Hackable. colorbox - A light-weight, customizable lightbox plugin for jQuery. How to Use Vue. By continuing to use  Powerful Lightbox with just one component. Fullscreen Lightbox with all it's functionalities now working within React.js. Responsible, easy for developers, working with SSR! Speed up your work by including ready, high editable lightbox.

React lightbox srcset, 20 Oct 2017 use CSS style from react-images npm install vue-image-lightbox jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical  A simple lightbox component for displaying an array of images. A simple, responsive Lightbox component for ReactJS to display an array of images. Images, Lightbox, Gallery, Responsive, Dialogs, Modals

Comments
  • Thank you. Do you know how to implement a thumbnail?
  • uhum!This document is poor.I think you should make your component for save time :D
  • Sadly!That lib not provides props or event for custom.You have to read code in src/SimpleLightbox.js and write event click in child component for switch thumbnail and original image.