Search code examples
reactjsfancybox

How to initialize Fancybox in reactjs component?

Can anyone advise how I can import or initialize Fancybox in my ReactComponent, please?

I am working on building a salon website using ReactJs. I already installed jQuery & Fancybox by doing "npm install ...". Now I want to use Fancybox box to create a JSX component which is an image gallery.

I don't know how to start/initialize/import Fancybox to start using it.

I am looking for your advice. Thanks!

here is the codes that I am trying to use

Click to see my code

click here to see the error: ReferenceError: jQuery is not defined

Solution

  • After install, the official way to use it is to add data-fancybox.Here is part of the official example.

     <a href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" data-fancybox data-caption="This image has a simple caption">
    <img src="https://source.unsplash.com/0JYgd2QuMfw/240x160" />
  </a>