1
votes

I'm unsure of what exactly the error I'm getting is caused by. I'm using FancyBox 2.0 with a simple YouTube viewer I created. When I view the site locally everything works fine. But when I view the live hosted version from my server I get an error in the console I've never seen before. Each file that is related to FancyBox comes back with this error:

GET http://devondeason.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js 
GET http://devondeason.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5 
GET http://devondeason.com/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5 
GET http://devondeason.com/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6 
GET http://devondeason.com/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7 
GET http://devondeason.com/fancybox/source/jquery.fancybox.css?v=2.1.5 
GET http://devondeason.com/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5 
GET http://devondeason.com/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7

The HTML that links the the files is as follows:

<head>
<title>youTube Clone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Add jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src='js/rotate.js'></script>
<script src='js/script.js'></script>

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<link rel='stylesheet' href='css/style.css'>

The path and file names are all accurate, as when I view the site from the Brackets Live Preview it works just as planned. Any help will be greatly appreciated. Below is a link to the site:

Link to live site

1
What error? You don't show an error. There are no errors on the site except for a missing favicon. The fancybox files are coming back with 200s and reasonable content. - Dave Newton
I just fixed it, will add my answer right now - user5862470

1 Answers

0
votes

By removing the / before each link and script linked to FancyBox, I was able to get FancyBox working. Leaving the first / directed the file path back a step too far.

Example:

<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />