求助：fancybox未定义（Uncaught ReferenceError）问题排查

Hey there! Let's figure out why you're hitting that Uncaught ReferenceError: fancybox is not defined error—since you mentioned no other error messages are showing up, this issue almost always boils down to script loading issues or small oversights. Here are the most likely fixes:

• Fancybox脚本压根没加载成功
  First up, double-check that you've actually included the Fancybox JS file in your HTML. You should have a tag that looks something like this:

  <script src="path/to/fancybox.min.js"></script>
  

  To confirm it's loading right, open your browser's Network tab, filter for JS files, and look for the Fancybox script. If you see a 404 status, that means your file path is wrong or the file isn't in the location you specified.

• 脚本加载顺序搞反了
  Fancybox (especially older versions) depends on jQuery, and even newer versions have their own internal dependencies. You need to make sure those dependencies load before Fancybox. For example, if you're using an older Fancybox version that needs jQuery:

  <!-- Load jQuery first -->
  <script src="path/to/jquery.min.js"></script>
  <!-- Then load Fancybox -->
  <script src="path/to/fancybox.min.js"></script>
  <!-- Finally, load your custom script that uses Fancybox -->
  <script src="path/to/your-custom-script.js"></script>
  

  Also, watch out for defer or async attributes on your script tags—these can change when scripts execute, which might cause your code to run before Fancybox is loaded.

• 大小写拼错了
  This is a super common gotcha! Newer Fancybox versions (like v3 and above) use Fancybox with a capital F, not all lowercase fancybox. When you tested in the console, you typed fancybox—try typing Fancybox instead. If that works, you just need to fix the capitalization in your code, like this:

  // Correct for newer Fancybox versions
  Fancybox.open([{ src: 'your-image.jpg' }]);
  

• 脚本被拦截或加载失败
  Sometimes browser extensions (like ad blockers) or server settings (CORS policies) can block the Fancybox script from loading. Check the Network tab again to see if the script request is failing for any reason—if you see a CORS error, you'll need to adjust your server's cross-origin settings to allow the script to load.

内容的提问来源于stack exchange，提问作者user1702965