2

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

Phung Pham
  • 31
  • 2
  • 6

1 Answers1

0

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>
Root
  • 2,301
  • 1
  • 10
  • 14
  • Well,I have to guess you didn't install fancybox correctly.Did "npm install @fancyapps/fancybox --save" run successfully? – Root Nov 06 '18 at 05:18
  • yes, I installed fancybox correctly. Please see my code below – Phung Pham Nov 06 '18 at 05:26
  • @PhungPham I create an example here. https://codesandbox.io/s/yq4wmr426v – Root Nov 06 '18 at 06:15
  • @PhungPham You should import fancybox in your file:import fancybox from "@fancyapps/fancybox"; – Root Nov 06 '18 at 06:22
  • Thank you very much for your help, but now I got another error causing fancybox not working. the error is below ReferenceError: jQuery is not defined Click here to see the error detail: https://i.stack.imgur.com/j36xn.png – Phung Pham Nov 07 '18 at 15:52
  • From your code,should be “jQuery”，not jquery@PhungPham – Root Nov 08 '18 at 01:42
  • Thanks again! per your advice, I changed to 'jQuery', but it failed to compiled due to below error ./node_modules/jQuery/lib/node-jquery.js Module not found: Can't resolve 'location' in 'C:\Users\Phung Pham\Google Drive (phung.tech@gmail.com)\Pudatalk\Salon Website\no bootstrap themes\go_salon\node_modules\jQuery\lib' – Phung Pham Nov 08 '18 at 02:19
  • I did "npm install jquery" and "npm install jQuery@1.7.4" as having seen in your codes – Phung Pham Nov 08 '18 at 02:22
  • from this,I can only guess jQuery didn’t install successfully".First,import $ from “jQuery”;then run “npm install jQuery —save” again.@PhungPham – Root Nov 08 '18 at 02:50
  • I took your advice to change to "import $ from 'jQuery" and run "npm install jQuery --save" again; but it still has the error "cannot find the file: 'jquery.js' as below – Phung Pham Nov 09 '18 at 02:53
  • Cannot find file: 'jquery.js' does not match the corresponding name on disk: '.\node_modules\jQuery\dist\jquery'. – Phung Pham Nov 09 '18 at 02:53
  • Here is a relative answer,Hope it help you.https://stackoverflow.com/questions/32265449/uncaught-error-cannot-find-module-jquery @PhungPham – Root Nov 09 '18 at 05:27