There is absolutely no conflict if you use a base
tag and fancybox or whatsoever as you can see in this DEMO ... and there is no need of additional javascript/jQuery to hack or fix the (non-existing) issue as previously suggested.
However, I presume that you clearly understand that the base
tag will affect ALL your relative paths including your anchor <a>
tags as well as your <link>
, <script>
and/or your <img />
tags. In other words, any tag that uses the href
and/or src
attributes.
Having said that, consider this scenario :
Suppose that you have a page test.html
which is located in a subdirectory called sandobox
. The full path of such page would be http://somesite.com/sandbox/test.html
, correct?
Now suppose that you are loading fancybox from within test.html
using relative paths like :
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
... that is the equivalent of using the following absolute paths :
http://somesite.com/sandbox/fancybox/jquery.fancybox.css
and http://somesite.com/sandbox/fancybox/jquery.fancybox.js
respectively.
Now, if you decide to add a base
tag like this :
<base href="http://somesite.com/" />
... all your relative paths, inlcuding your calls to fancybox files will be converted to :
http://somesite.com/fancybox/jquery.fancybox.css
and http://somesite.com/fancybox/jquery.fancybox.js
.
Since the fancybox file are actually located under the sandbox
subdirectory, your document won't be able to load them (because the base
tag) so your fancybox implementation will fail.
To solve the conflict, you could either do :
- Use absolute paths in your
<link>
and <script>
tags or
- Relocate your files in relation to the
base
path.
Check this good question/answer about the base
tag Is it recommended to use the <base> html tag?