Note that there are some explanatory texts on larger screens.

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

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload